/* ==========================================================================
   brand-elements.css — K Group signature visual language
   --------------------------------------------------------------------------
   The K Group logo centers on a red swoosh: a curved, sweeping form that
   flows from the lower-left up to the upper-right, conveying motion and care.
   These classes abstract that single gesture into a reusable background
   texture and a section divider so the WHOLE site is unified by one
   distinctive brand element — NOT by generic cards, boxes, or numbered
   section chips.

   Use ONE swoosh per section at most. It is a signature, not wallpaper.
   Both classes use an inline SVG (a soft, tapered crescent) as a background
   image so the curve stays smooth at any size and needs no image assets.
   `preserveAspectRatio='none'` lets the sweep stretch to fill its box.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .swoosh-bg
   Large, soft, low-opacity red sweep meant to sit BEHIND hero sections and
   major section headers as a subtle background texture.

   Usage:
     <section class="hero" style="position: relative">
       <span class="swoosh-bg" aria-hidden="true"></span>
       <div class="container"> ...hero content (give it position:relative)... </div>
     </section>

   Notes:
     • The parent must be position: relative and typically overflow: hidden.
     • It is decorative only — pointer-events are disabled and it sits at the
       back of the stacking context. Mark the element aria-hidden="true".
   -------------------------------------------------------------------------- */
.swoosh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.10; /* subtle texture — within the 8–15% target range */
  background-repeat: no-repeat;
  /* Aspect-preserved (cover) and anchored to the lower-left corner so the
     sweep keeps the logo's true proportions instead of stretching. */
  background-position: left bottom;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500'%3E%3Cpath d='M-60 480 C420 440 840 300 1500 50 C920 250 470 390 -60 440 Z' fill='%23CC1516'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   .section-divider-swoosh
   A thinner, more visible version of the same curved motif. Use it to
   separate page sections in place of a plain straight <hr> — the divider
   echoes the logo's sweep instead of a generic line.

   Usage:
     <hr class="section-divider-swoosh" aria-hidden="true" />
     — or —
     <div class="section-divider-swoosh" aria-hidden="true"></div>

   Notes:
     • Works as either an <hr> (border reset below) or a <div>.
     • Height sets how tall the sweep reads; tune per layout.
   -------------------------------------------------------------------------- */
.section-divider-swoosh {
  display: block;
  width: 100%;
  height: 18px;
  margin: 0;
  border: none;          /* reset default <hr> border */
  background: transparent;
  pointer-events: none;
  opacity: 0.45;         /* refined accent — present but not heavy */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* A delicate tapered crescent: converges to points at both ends and stays
     a thin line through the middle — reads as a refined sweep, not a band. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C480 6 960 4 1440 12 C960 12 480 14 0 30 Z' fill='%23CC1516'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   .swoosh-bg--light
   Modifier for .swoosh-bg used on sections too dark for the red sweep to
   read (e.g. deep charcoal / near-black backgrounds). Swaps the red fill for
   a light tint (white at low opacity) so the same curve stays legible.

   Usage:
     <span class="swoosh-bg swoosh-bg--light" aria-hidden="true"></span>

   Notes:
     • Apply IN ADDITION to .swoosh-bg (it only overrides the fill image).
     • Not applied anywhere yet — kept ready for dark sections that need it.
   -------------------------------------------------------------------------- */
.swoosh-bg--light {
  opacity: 0.06; /* white reads stronger than red — keep it very faint */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500'%3E%3Cpath d='M-60 480 C420 440 840 300 1500 50 C920 250 470 390 -60 440 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}