/* ============================================================================
   refine.css — Premium Korean Minimal theme layer for K-Pick Trading Corp
   ----------------------------------------------------------------------------
   Loaded AFTER style.css. Purely additive / refinement — no layout rewrites.
   Direction (per the dev.to style ranking, tuned for medical B2B):
     Base    = Minimalist  → whitespace, quiet type, high legibility
     Accent  = Frost UI     → the existing frosted pill nav, kept & refined
     Crisp   = Neo-brutalist→ hairline borders + confident CTAs for trust
     Avoided = Neumorphism / Claymorphism / heavy Glassmorphism
   Goal: clean, professional, neat, premium — Korean brand restraint.
   Safe to delete this file + its <link> to fully revert.
   ========================================================================== */

:root {
    /* ---- Ink / navy scale (mapped from existing brand navies) ---- */
    --rf-ink-900: #041a4f;   /* deepest brand navy */
    --rf-ink-800: #0a2559;
    --rf-ink-700: #102a67;
    --rf-ink-600: #0f2d6b;
    --rf-ink-500: #0f4ca3;   /* mid brand blue */

    /* ---- Single disciplined accent (teal) ---- */
    --rf-accent: #0e7c86;
    --rf-accent-soft: #e6f4f5;

    /* ---- Warm-neutral text + surfaces (premium, not cold) ---- */
    --rf-text: #1a2438;      /* body text on light */
    --rf-text-soft: #55607a; /* secondary text */
    --rf-hairline: #e4e8f0;  /* hairline borders */
    --rf-hairline-strong: #d3d9e6;
    --rf-surface: #ffffff;
    --rf-surface-sub: #f6f8fb;

    /* ---- Radii — tight & consistent (neat, not bubbly) ---- */
    --rf-r-sm: 8px;
    --rf-r-md: 12px;
    --rf-r-lg: 16px;

    /* ---- Elevation — layered soft shadows (premium depth, low opacity) ---- */
    --rf-shadow-sm: 0 1px 2px rgba(4, 26, 79, 0.06),
                    0 2px 6px rgba(4, 26, 79, 0.05);
    --rf-shadow-md: 0 4px 10px rgba(4, 26, 79, 0.06),
                    0 12px 28px rgba(4, 26, 79, 0.08);
    --rf-shadow-lg: 0 10px 24px rgba(4, 26, 79, 0.08),
                    0 28px 60px rgba(4, 26, 79, 0.12);

    /* ---- Motion — one restrained easing ---- */
    --rf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --rf-fast: 0.18s;
    --rf-med: 0.32s;
}

/* ---------------------------------------------------------------------------
   1. Global rendering — crisp type is the whole premium game
   ------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden; /* clip the ~scrollbar-width overflow from full-bleed bands (§11) */
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    color: var(--rf-text);
}

/* Optical tracking + weight discipline on headings.
   The base sets h1 to weight 900 / letter-spacing 0 which reads heavy;
   premium branding wants a touch lighter with negative tracking. */
h1, h2, h3, .dashboardarea h1 {
    letter-spacing: -0.02em;
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}

/* ---------------------------------------------------------------------------
   2. Hero headline — from condensed/heavy to confident/refined
   ------------------------------------------------------------------------- */
.dashboardarea h1 {
    font-weight: 760;
    letter-spacing: -0.025em;
    line-height: 1.03;
    text-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
.dashboardarea__lede,
.dashboardarea p {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

/* Eyebrow — quiet, spaced, single accent */
.dashboardarea__eyebrow,
.section-eyebrow {
    letter-spacing: 0.2em;
    font-weight: 650;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   3. Section headings — refine the shouty uppercase H2s
   ------------------------------------------------------------------------- */
.brand-spotlights__header h2,
.section-eyebrow + h2 {
    letter-spacing: -0.01em;
    font-weight: 720;
}

/* Generous, consistent vertical rhythm between major bands */
.brand-spotlights { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }

/* ---------------------------------------------------------------------------
   4. Buttons — neat radius, confident (not shouty) weight, premium lift
      Primary  = solid, high-trust      Secondary = hairline / frost
   ------------------------------------------------------------------------- */
.dashboardarea__button {
    border-radius: var(--rf-r-sm);
    font-weight: 640;
    letter-spacing: 0.01em;
    font-size: 14.5px;
    padding: 0 26px;
    min-height: 50px;
    transition: transform var(--rf-fast) var(--rf-ease),
                box-shadow var(--rf-med) var(--rf-ease),
                background-color var(--rf-med) var(--rf-ease),
                color var(--rf-med) var(--rf-ease);
}
.dashboardarea__button--primary {
    background: #ffffff;
    color: var(--rf-ink-600);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.dashboardarea__button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}
.dashboardarea__button--secondary {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.06);
}
.dashboardarea__button--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   5. Nav pill — keep the frost, refine to a cleaner hairline & shadow
   ------------------------------------------------------------------------- */
.navbar {
    border: 1px solid var(--rf-hairline);
    box-shadow: var(--rf-shadow-md);
    background: rgba(255, 255, 255, 0.86);
}
.navbar.navbar-scrolled {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--rf-shadow-lg);
}
.navigation a {
    letter-spacing: 0.005em;
    transition: color var(--rf-fast) var(--rf-ease);
}

/* ---------------------------------------------------------------------------
   6. Hero brand cards — hairline + soft depth, refined hover
   ------------------------------------------------------------------------- */
.hero-brand {
    border-radius: var(--rf-r-md);
    transition: transform var(--rf-med) var(--rf-ease),
                box-shadow var(--rf-med) var(--rf-ease),
                border-color var(--rf-med) var(--rf-ease);
}
.hero-brand:hover {
    transform: translateY(-3px);
    box-shadow: var(--rf-shadow-md);
}

/* ---------------------------------------------------------------------------
   7. Brand spotlight blocks + product tags — neat borders, quiet surfaces
   ------------------------------------------------------------------------- */
.brand-spotlight__product-tag {
    border: 1px solid var(--rf-hairline-strong);
    border-radius: 999px;
    background: var(--rf-surface-sub);
    color: var(--rf-text-soft);
    font-weight: 550;
    letter-spacing: 0.005em;
    transition: border-color var(--rf-fast) var(--rf-ease),
                color var(--rf-fast) var(--rf-ease);
}
.brand-spotlight__product-tag:hover {
    border-color: var(--rf-accent);
    color: var(--rf-accent);
}
.brand-spotlight__cta {
    font-weight: 640;
    letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   8. Certification badges — crisp, trust-signalling (neo-brutalist restraint)
   ------------------------------------------------------------------------- */
.cert-badge {
    border-radius: var(--rf-r-sm);
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: var(--rf-shadow-sm);
}

/* ---------------------------------------------------------------------------
   9. Trust bar — quiet, evenly-spaced credential row
   ------------------------------------------------------------------------- */
.trust-bar__item {
    letter-spacing: 0.06em;
    font-weight: 600;
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   11. Neumorphism ("bump", never a pressed "hole")
       Neumorphism only reads when the card and the surface *behind* it share
       one colour, so the whole band is tinted and small cards extrude from
       it (light top-left highlight + dark bottom-right shadow = raised).
       inset shadows would make a hole — we never use inset here.

       Sides fix: .about / .recognition-section live inside .body (margin
       0 15%/8%/5%), so their tint used to float mid-page with white gutters
       and the card's highlight fell on white (killing the bump). We full-
       bleed the band to the viewport edges and restore the content column
       with symmetric padding — both are breakpoint-proof because they track
       the same 50%/50vw delta as .body's own margin. <body> already clips
       overflow-x, so no horizontal scrollbar appears.
   ------------------------------------------------------------------------- */
:root {
    --rf-neu-surface: #e7ecf3;         /* soft cool-grey surface */
    --rf-neu-light:   rgba(255, 255, 255, 0.92); /* top-left highlight */
    --rf-neu-dark:    rgba(15, 32, 73, 0.16);    /* bottom-right shadow */
}

/* Full-bleed grey bands (edge-to-edge tint, content restored to the column) */
.about,
.brand-stories,
.recognition-section {
    background: var(--rf-neu-surface);
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left:  calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* Outer About wrapper is now flat — the band supplies the surface, and the
   raised bumps live only on appropriately-sized child cards (no card-in-card
   rectangle, which is what looked off at the sides). */
.about-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Reusable raised bumps ------------------------------------------------------ */
.about-highlights {
    border-top: 0;
    border-bottom: 0;
    gap: 14px;
    margin-top: 28px;
}
.about-highlights div,
.recognition-card,
.story-card {
    background: var(--rf-neu-surface);
    border: 0;
    box-shadow:
        -6px -6px 14px var(--rf-neu-light),
         7px  7px 16px var(--rf-neu-dark);
}
.about-highlights div {
    padding: 16px 18px;
    border-bottom: 0;
    border-radius: 14px;
}
.about-highlights div:last-child { border-bottom: 0; }

.about-image img {
    border-radius: 18px;
    box-shadow:
        -8px -8px 18px var(--rf-neu-light),
         10px 10px 24px var(--rf-neu-dark);
}

/* Recognition cards: drop the multi-colour top-border "AI-generic" look and
   the hard 1px outline — extrude them as soft bumps instead. */
.recognition-section { background: var(--rf-neu-surface); }
.recognition-card {
    border-radius: 16px;
}
.recognition-card--journal,
.recognition-card--review,
.recognition-card--global { border-top: 0; }
/* 3 cards (odd): only ever 1×3 (wide) or 3×1 (narrow), never a 2 + 1 orphan. */
.recognition-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
    .recognition-grid { grid-template-columns: 1fr; }
}
.recognition-card:hover {
    transform: translateY(-2px);
    box-shadow:
        -8px -8px 18px var(--rf-neu-light),
         11px 11px 24px var(--rf-neu-dark);
}

/* "About Our Partners" story cards: same treatment — drop the coloured
   top accent bar + 1px outline, extrude as soft bumps. Brand colour stays
   in the category pill and the CTA. */
.story-card { border-radius: 16px; }
.story-card__accent { display: none; }
.story-card:hover {
    transform: translateY(-2px);
    box-shadow:
        -8px -8px 18px var(--rf-neu-light),
         11px 11px 24px var(--rf-neu-dark);
}

/* Story-card grid: only ever 1×4 (wide), 2×2 (medium) or 4×1 (narrow) —
   the base auto-fit produced an ugly 3 + 1 orphan row. */
.brand-stories__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .brand-stories__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .brand-stories__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   11b. Navy-capped neumorphic panels (ph-market-strip, learn-outro)
        A dark-navy bar keeps its brand colour across the TOP; the body below
        becomes a grey neumorphic raised bump. Body text + buttons recoloured
        to navy/grey so they stay legible on the light surface.
   ------------------------------------------------------------------------- */
.ph-market-strip,
.learn-outro__panel {
    background: linear-gradient(#041a4f 0, #041a4f 16px, var(--rf-neu-surface) 16px);
    border: 0;
    box-shadow:
        -8px -8px 18px var(--rf-neu-light),
         10px 10px 24px var(--rf-neu-dark);
}

/* ph-market-strip: stat text on grey */
.ph-market-strip__stat { border-right-color: rgba(15, 32, 73, 0.12); }
.ph-market-strip__stat strong { color: var(--rf-ink-900); }
.ph-market-strip__stat span   { color: var(--rf-text-soft); }

/* learn-outro: drop the dark-bg glow, recolour content + buttons for grey */
.learn-outro__panel::before { display: none; }
.learn-outro__eyebrow { color: var(--rf-ink-500); }
.learn-outro h2       { color: var(--rf-ink-900); }
.learn-outro p        { color: var(--rf-text-soft); }
.learn-outro__trust   { color: var(--rf-text-soft) !important; }
.learn-outro .brand-cta__btn--primary {
    background: var(--rf-ink-900);
    color: #ffffff;
}
.learn-outro .brand-cta__btn--primary:hover { background: var(--rf-ink-700); }
.learn-outro .brand-cta__btn--secondary {
    background: transparent;
    color: var(--rf-ink-700);
    border-color: rgba(15, 32, 73, 0.30);
}
.learn-outro .brand-cta__btn--secondary:hover { background: rgba(15, 32, 73, 0.06); }

/* ---------------------------------------------------------------------------
   11c. EROP research citation → soft neumorphic bump
        (green icon / label / link kept for brand identity)
   ------------------------------------------------------------------------- */
.erop-research-cite {
    background: var(--rf-neu-surface);
    border: 0;
    border-radius: 14px;
    box-shadow:
        -6px -6px 14px var(--rf-neu-light),
         7px  7px 16px var(--rf-neu-dark);
}

/* ---------------------------------------------------------------------------
   11d. Brand CTA — breathing room between the buttons and the trust line.
        Needs .brand-cta prefix to outrank `.brand-cta p { margin: 0 0 28px }`
        (0,1,1), which was pinning margin-top to 0 (the "sticking").
   ------------------------------------------------------------------------- */
.brand-cta .brand-cta__trust { margin-top: 32px; }

/* ---------------------------------------------------------------------------
   11e. Small touch-ups
   ------------------------------------------------------------------------- */
/* Company-history timeline year titles: 900 was heavy — semibold reads
   cleaner without going thin. Scoped to timeline only (the base selector is
   shared with .service-grid / .faq-grid h3, which we leave untouched). */
.timeline-grid h3 { font-weight: 650; }

/* Partner-section CTA: rounded edges */
.partner-section__button { border-radius: 999px; }

/* Header logo centered (the E-MAIL line that used to sit opposite it is gone) */
.header-container { justify-content: center; }

/* ---------------------------------------------------------------------------
   12. Motion restraint — honour reduced-motion (medical accessibility)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== TOKEN LAYER — 2026-08-04 exhibit polish (delete this block to revert) ===== */

/* ---------------------------------------------------------------------------
   1. Palette tokens
   ------------------------------------------------------------------------- */
:root {
    --kp-bg: #F7F9FC;
    --kp-surface: #FFFFFF;
    --kp-text: #10182B;
    --kp-text-2: #4B5468;
    --kp-accent: #0B3D91;
    --kp-accent-hover: #082C6B;
    --kp-accent-soft: #EAF0FB;
    --kp-border: #E2E6EE;
}

/* ---------------------------------------------------------------------------
   2. Font stack — override the base `*{font-family:'Inter'}` rule (and the
      one explicit outlier, .faq-question) so headings inherit it too.
      Pretendard <link> is being added to the pages separately; Inter is the
      fallback already in use.
   ------------------------------------------------------------------------- */
* ,
.faq-question {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 'Inter', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

/* ---------------------------------------------------------------------------
   3. Weight ceiling — style.css hardcodes 900 on ~79 selectors. Major
      standalone headings capped at 620; smaller in-card h2/h3 tags capped
      at 600. Logo/wordmark and small uppercase eyebrow labels are left
      untouched on purpose (never capped, never re-weighted here).
   ------------------------------------------------------------------------- */
.dashboardarea h1,
.learn-hero h1,
.about-title h1,
.about-title h2,
.section-panel-header h2,
.coverage-section h2,
.partner-section__title,
.brand-hero__title,
.brand-intro h1,
.brand-intro h2,
.contact-page__title,
.quote-hero h1,
.tieupsTitle,
.insufine-sizes__header h2,
.erop-spec h2,
.brand-cta h2,
.brand-spotlights__header h2,
.learn-outro h2 {
    font-weight: 620;
}
.packaging-placeholder h2,
.service-grid h3,
.faq-grid h3,
.insufine-size-card__label h3 {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   4. Borderless cards — flat surface, shadow only appears on the existing
      :hover rules in style.css. .about-container intentionally skipped: it
      is already flattened to `transparent` by the neumorphic band treatment
      in §11 above, and giving it a white surface here would fight that.
   ------------------------------------------------------------------------- */
.brand-card,
.product-card,
.erop-category-card,
.insufine-size-card {
    border: none;
    box-shadow: none;
    background: var(--kp-surface);
}

/* Internal grid hairlines removed; gap added so cards stay visually
   separated once the dividing line is gone. */
.timeline-grid article,
.service-grid article,
.faq-grid article {
    border-right: none;
    border-bottom: none;
}
.coverage-list span {
    border-right: none;
    border-bottom: none;
}
.timeline-grid { gap: 28px; }
.service-grid,
.faq-grid { gap: 28px; }
.coverage-list { gap: 16px; }

/* ---------------------------------------------------------------------------
   5. Container — .body used a 15%/8%/5% percentage margin at three
      breakpoints; replaced with an auto-centered, max-width column so line
      lengths stay sane on the ultra-wide monitors a trade-show booth kiosk
      tends to use. Same rule beats all three percentage variants (equal
      specificity, later in cascade) without needing to repeat it per query.
   ------------------------------------------------------------------------- */
.body {
    margin-left: auto;
    margin-right: auto;
    max-width: 1240px;
    padding-left: clamp(20px, 4vw, 64px);
    padding-right: clamp(20px, 4vw, 64px);
}

/* ---------------------------------------------------------------------------
   6. Accent consolidation — only the brand-neutral, clicked-most CTAs.
      Per-brand CTAs (Sungshim blue / EROP green / Insufine teal) and the
      dark-navy footer links are left alone on purpose: those colors are
      either deliberate brand identity or a contrast-risk on a dark surface.
   ------------------------------------------------------------------------- */
.dashboardarea__button--primary {
    color: var(--kp-accent);
}
.dashboardarea__button--primary:hover {
    color: var(--kp-accent-hover);
}
.partner-section__button {
    color: var(--kp-accent);
}
.partner-section__button:hover {
    color: var(--kp-accent-hover);
}
.quote-button {
    background: var(--kp-accent);
}
.quote-button:hover {
    background: var(--kp-accent-hover);
}

/* ---------------------------------------------------------------------------
   7. Mobile legibility — 10px eyebrow-adjacent label was under the
      ~12-13px comfortable floor for hospital-floor lighting/viewing angles.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .hero-brand__type {
        font-size: 12px;
    }
}

/* Verified-documents block in the homepage certifications section —
   replaces the dashed "documents will be displayed here" placeholder. */
.kpick-cert-docs {
    background: var(--kp-surface, #ffffff);
    border: 1px solid var(--kp-border, #E2E6EE);
    border-radius: 12px;
    padding: 28px 28px 24px;
}
.kpick-cert-docs strong {
    display: block;
    font-size: 15px;
    font-weight: 620;
    color: var(--kp-text, #10182B);
    margin-bottom: 12px;
}
.kpick-cert-docs ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.kpick-cert-docs li {
    padding: 8px 0;
    border-bottom: 1px solid var(--kp-border, #E2E6EE);
    font-size: 14px;
    line-height: 1.5;
}
.kpick-cert-docs li:last-child { border-bottom: none; }
.kpick-cert-docs li a {
    color: var(--kp-accent, #0B3D91);
    font-weight: 600;
    text-decoration: none;
}
.kpick-cert-docs li a:hover { color: var(--kp-accent-hover, #082C6B); text-decoration: underline; }
.kpick-cert-docs li span { color: var(--kp-text-2, #4B5468); font-size: 12.5px; margin-left: 8px; }
.kpick-cert-docs > p { font-size: 12.5px; color: var(--kp-text-2, #4B5468); line-height: 1.6; margin: 0; }
.kpick-cert-docs > p a { color: var(--kp-accent, #0B3D91); font-weight: 600; }