/* ============================================================
   main_oa.css — main.html restyled to the office_announcement
   design system (indigo/teal light theme, General Sans / Inter
   Display type, OA spacing + card language). Loaded LAST so it
   overrides style.css / target_grid.css on the home page.
   ============================================================ */

.home-page {
    /* Palette ported 1:1 from office_announcement */
    --ink:      #14152E;
    --indigo:   #5453E8;
    --indigo-lt:#6C6BF5;
    --teal:     #14B8A6;
    --muted:    #5B5E7E;
    --faint:    #8A8DAC;
    --border:   #E6E7F5;
    --field:    #F6F6FD;
    --page:     #EEEFFB;
    --g100:     #F1F0FE;
    --font-disp:'General Sans','Inter Display',sans-serif;
    --mono:     'JetBrains Mono', ui-monospace, monospace;
    --r-lg:20px; --r-md:18px; --r-sm:13px;
    --sh-sm:0 14px 36px -28px rgba(20,21,46,.5);
    --sh-md:0 18px 44px -26px rgba(20,21,46,.5);

    background:#EEEFFB;
    font-family:'Inter Display','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
.home-page h2,
.home-page h3,
.home-page h4 { font-family: var(--font-disp); }

/* ==========================================
   SHARED TITLE GROUP (advantage + services)
   ========================================== */
.home-page .title_group { text-align:center; margin-bottom:48px; line-height:1.24; }
.home-page .title_group h3 {
    font-family: var(--font-disp);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.02em;
    margin-bottom: 14px;
}
.home-page .title_group p {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 400;
    max-width: 760px;
    margin: 0 auto;
}

/* ==========================================
   TARGET SOLUTIONS GRID (already indigo — align type only)
   ========================================== */
.home-page .tg_section { background:#fff; }
.home-page .tg_kicker { font-family: var(--mono); font-weight:600; letter-spacing:.16em; color: var(--indigo-lt); }
.home-page .tg_head h2 { font-family: var(--font-disp); font-weight:500; color: var(--ink); letter-spacing:-.02em; }
.home-page .tg_card { border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.home-page .tg_card:hover { box-shadow: var(--sh-md); }
.home-page .tg_card h3 { font-family: var(--font-disp); font-weight:600; letter-spacing:0; }
.home-page .tg_card_num { font-family: var(--mono); }
.home-page .tg_card_action { font-family: var(--mono); }

/* ==========================================
   ADVANTAGE — OA "characteristic" cards
   ========================================== */
.home-page .advantage_section { padding: 96px 0; background:#EEEFFB; }
.home-page .adv_grid_wrap { display:flex; flex-direction:column; gap:20px; }
.home-page .adv_row { display:flex; gap:20px; }

/* Reset the sky-blue fills / gradient-border cards to a single OA card style */
.home-page .adv_card,
.home-page .adv_card.type_fill,
.home-page .adv_card.type_line,
.home-page .adv_card.type_long {
    flex:1 1 0 !important;
    background:#fff;
    background-image:none;
    border:1px solid var(--border);
    border-radius: var(--r-md);
    padding: 32px 30px;
    box-shadow: var(--sh-sm);
    color: var(--ink);
    position:relative;
    overflow:hidden;
    min-height:0;
    display:flex; flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.home-page .adv_card_in { padding:0; }

/* left accent bar (indigo / teal / ink) */
.home-page .adv_card::before {
    content:''; position:absolute; top:0; left:0; width:3px; height:100%;
    background: var(--indigo); z-index:2;
}
.home-page .adv_card.type_line::before { background: var(--teal); }
.home-page .adv_card.type_long::before { background: var(--ink); }

/* disable the old accordion flex-grow, keep a gentle lift */
.home-page .adv_row:hover .adv_card,
.home-page .adv_card:hover { flex:1 1 0 !important; }
.home-page .adv_card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

/* icon tile → OA indigo gradient with white glyph */
.home-page .adv_card .icon_area,
.home-page .adv_card.type_fill .icon_area,
.home-page .adv_card.type_line .icon_area,
.home-page .adv_card.type_long .icon_area {
    width:46px; height:46px; border-radius:13px; margin-bottom:20px;
    background: linear-gradient(150deg,#6C6BF5,#4A49E0);
    display:flex; align-items:center; justify-content:center;
}
.home-page .adv_card .icon_area img {
    width:22px; height:22px;
    filter: brightness(0) invert(1);   /* recolor any icon to white */
}
.home-page .adv_card h4 {
    font-family: var(--font-disp);
    font-size: 1.2rem; font-weight: 500; color: var(--ink);
    letter-spacing:-.01em; margin-bottom: 12px;
}
.home-page .adv_card p { font-size: 1rem; color: var(--muted); line-height: 1.7; opacity:1; }

/* ==========================================
   CORE SERVICES — image + text rows
   ========================================== */
.home-page .main_services { padding: 96px 0 64px; background:#fff; }
.home-page .service_row { gap: 64px; margin-bottom: 80px; }
.home-page .service_row .cat_label {
    display:inline-block;
    font-family: var(--mono);
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--indigo);
    background: var(--g100);
    border: 1px solid #D8DAF6;
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 16px;
}
.home-page .service_row h4 {
    font-family: var(--font-disp);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.02em;
    margin-bottom: 18px;
}
.home-page .service_row p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; }
.home-page .service_row .img_area {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
}
.home-page .service_row .img_area img { border-radius: var(--r-lg); }

/* ==========================================
   CTA BUTTON → OA indigo gradient pill
   ========================================== */
.home-page .cta_section { padding: 8px 0 0; }
.home-page .btn_full_services {
    font-family: var(--font-disp);
    background: linear-gradient(150deg,#5150E6,#7A79F6);
    color:#fff; font-weight: 500; font-size: 1rem;
    padding: 16px 44px; border-radius: 999px;
    box-shadow: var(--sh-md);
    letter-spacing: 0;
}
.home-page .btn_full_services:hover {
    background: linear-gradient(150deg,#4A49E0,#6C6BF5);
    transform: translateY(-2px);
    box-shadow: 0 26px 60px -24px rgba(84,83,232,.5);
}

/* ==========================================
   MASTER CTA (Data Room) — solid indigo background
   ========================================== */
.home-page .tg_master_btn {
    background: #6C6BF5;
    border-color: rgba(255,255,255,.35);
}
.home-page .tg_master_btn::before { display:none; }  /* remove dark radial glow */
.home-page .tg_master_btn:hover { box-shadow: 0 26px 60px -24px rgba(84,83,232,.55); }
.home-page .tg_master_text .title { font-family: var(--font-disp); font-weight:600; }

/* ==========================================
   SOCIAL CHANNEL CARDS — reuse master CTA style, 3-up grid
   ========================================== */
.social_section { max-width:1280px; margin:0 auto; padding:80px 20px; }
.social_wrap { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.home-page .social_wrap .tg_master_btn {
    justify-content:flex-start; text-decoration:none; padding:26px 26px;
}
/* Pin the arrow at the right (vertically centered) and reserve its width with
   padding-right on the content, so titles never slide under it at any width. */
.home-page .social_wrap .tg_master_inner { flex:1 1 auto; min-width:0; padding-right:36px; }
.home-page .social_wrap .tg_master_text { min-width:0; }
.home-page .social_wrap .tg_master_arrow {
    position:absolute; right:26px; top:50%; transform:translateY(-50%); margin:0;
}
.home-page .social_wrap .tg_master_text .title { font-size:1.02rem; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1023px) {
    .home-page .advantage_section { padding: 72px 0; }
    .home-page .main_services { padding: 72px 0 48px; }
    .home-page .adv_grid_wrap { display:flex; flex-direction:column; gap:20px; }
    .home-page .adv_row { flex-wrap:wrap; }
    .social_wrap { grid-template-columns:1fr; }
}
@media (max-width: 767px) {
    .home-page .advantage_section { padding: 60px 0; }
    .home-page .main_services { padding: 60px 0 40px; }
    .home-page .adv_row { flex-direction:column; }
    /* stacked cards must size to their content — flex:1 1 0 (basis 0) would
       collapse their height in a column and clip the text under overflow:hidden */
    .home-page .adv_card,
    .home-page .adv_card.type_fill,
    .home-page .adv_card.type_line,
    .home-page .adv_card.type_long,
    .home-page .adv_row:hover .adv_card,
    .home-page .adv_card:hover { flex:0 0 auto !important; }
    .home-page .service_row { gap: 32px; margin-bottom: 56px; }
    .home-page .btn_full_services { padding: 14px 36px; }
    .home-page .social_wrap .tg_master_text .title { font-size: .86rem; }
}