/* ============================================================
   BRIGHTFIELD — style.css (Global)
   - Aussie English
   - One global header + footer across pages
   - One global hero system (same layout everywhere)
   - Services/Sectors/Clients rendered via JSON + bf-content.js
   - KEEP: Acknowledgement of Country section (optional)
   - ADD: Sector page components used in sectors-*.html
   ============================================================ */

/* ============================================================
   1) ROOT VARIABLES
   ============================================================ */
:root{
  --bf-red:#b22222;
  --bf-dark:#111827;
  --bf-white:#ffffff;
  --bf-light:#f9fafb;
  --bf-border:#e5e7eb;

  --bf-text:#111827;
  --bf-muted:#6b7280;

  --bf-max-width:1200px;
  --bf-radius:14px;

  --bf-shadow-sm:0 6px 18px rgba(0,0,0,0.08);
  --bf-shadow-md:0 10px 26px rgba(0,0,0,0.12);

  --bf-focus: rgba(178,34,34,.35);

  --bf-hero-min: clamp(440px, 62vh, 680px);
  --bf-hero-img: none;

  --bf-trans: .2s ease;
}

/* ============================================================
   2) RESET + BASE
   ============================================================ */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

/* keep both spellings (some old editors/snippets) */
html{ scroll-behaviour:smooth; scroll-behavior:smooth; }

body{
  font-family:"Manrope", sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--bf-text);
  background:var(--bf-white);
}

img{ max-width:100%; height:auto; display:block; }

p{ margin:0 0 1rem; }

a{ color:inherit; }

a:focus-visible,
button:focus-visible{
  outline:3px solid var(--bf-focus);
  outline-offset:3px;
  border-radius:12px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{
    scroll-behavior:auto !important;
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* ============================================================
   3) LAYOUT HELPERS
   ============================================================ */
.bf-container{
  max-width:var(--bf-max-width);
  margin:0 auto;
  padding:0 1.5rem;
}

.bf-section{ padding:4.2rem 0; }

.bf-section-alt{
  background:var(--bf-light);
  border-top:1px solid var(--bf-border);
  border-bottom:1px solid var(--bf-border);
}

.bf-section-title{
  text-align:center;
  font-size:2.1rem;
  margin:0 0 .75rem;
  font-weight:800;
}

.bf-section-intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 2.6rem;
  color:var(--bf-muted);
}

.bf-muted{ color:var(--bf-muted); }

.bf-lead{
  font-size:1.05rem;
  line-height:1.75;
  margin:0 0 1rem;
}

.bf-h2-left{
  margin:0 0 .85rem;
  font-size:2rem;
  line-height:1.2;
  font-weight:900;
  color:var(--bf-dark);
}

/* ============================================================
   4) BUTTONS
   ============================================================ */
.bf-btn{
  display:inline-block;
  padding:.20rem 2rem;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.01em;
  border:0;
  cursor:pointer;
  transition:var(--bf-trans);
}

.bf-btn-primary{
  background:var(--bf-red);
  color:#fff;
  border:1px solid var(--bf-border);
 
}
.bf-btn-primary:hover{ background:#8e1c1c; }

.bf-btn-ghost{
  border:2px solid #f9f9f9;
  color:#ffffff;
  background:transparent;
}
.bf-btn-ghost:hover{ background:rgb(255, 255, 255); }

.bf-btn-light{
  background:#fff;
  color:var(--bf-dark);
  border:1px solid var(--bf-border);
}
.bf-btn-light:hover{ border-color:rgba(17,24,39,.25); }

.bf-btn-full{
  width:100%;
  text-align:center;
}
.bf-hero-actions {
  margin-top: 180px;
}
/* ============================================================
   5) HEADER (GLOBAL)
   ============================================================ */
.bf-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--bf-white);
}

/* Top bar */
.bf-topbar{
  background:var(--bf-dark);
  color:#ffffff;
  font-size:.85rem;
  padding:.35rem 0;
}

.bf-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.05rem;
  flex-wrap:wrap;
}

.bf-topbar-left{
  display:flex;
  align-items:center;
  gap:1.05rem;
  flex-wrap:wrap;
}

.bf-topbar-item{
  display:inline-flex;
  align-items:center;
  gap:.50rem;
  white-space:nowrap;
  opacity:.95;
}

.bf-topbar i{ font-size:.95rem; }

.bf-topbar a{
  color:#fefeff;
  text-decoration:none;
}
.bf-topbar a:hover{ text-decoration:underline; }

.bf-topbar-center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.bf-topbar-tagline{
  font-weight:600;
  letter-spacing:.01em;
  opacity:.95;
  white-space:nowrap;
}

.bf-topbar-right{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.bf-topbar-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(184, 164, 164, 0.22);
  text-decoration:none;
  transition:var(--bf-trans);
}
.bf-topbar-social:hover{
  border-color:rgba(137, 10, 10, 0.55);
  transform:translateY(-1px);
}

.bf-social-icon{
  width:16px;
  height:16px;
  display:block;
  filter:brightness(0) invert(1);
  opacity:.95;
}

/* Main header */
.bf-main-header{
  background:var(--bf-white);
  background:#ffffff;
  border-bottom:1px solid var(--bf-border);
}

.bf-main-header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  min-height:80px;
  gap:1rem;
}

/* Logo */
.bf-logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
}

.bf-logo-icon{
  width:48px;
  height:48px;
}

.bf-logo-text-wrap{
  display:grid;
  line-height:1.05;
}

.bf-logo-title{
  font-size:1.28rem;
  letter-spacing:.08em;
  font-weight:800;
  color:var(--bf-dark);
}

.bf-logo-subtitle{
  font-size:.88rem;
  font-weight:500;
  color:var(--bf-muted);
}

/* Desktop nav + dropdowns */
.bf-nav-desktop{
  display:flex;
  justify-content:center;
}

.bf-nav-desktop ul{
  display:flex;
  gap:2.3rem;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

.bf-nav-desktop li{ position:relative; }

.bf-nav-desktop a{
  text-decoration:none;
  color:var(--bf-dark);
  padding:.250rem 0;
  font-weight:700;
  position:relative;
  transition:var(--bf-trans);
}

.bf-nav-desktop a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--bf-red);
  transition:.25s ease;
}

.bf-nav-desktop a:hover{ color:var(--bf-red); }
.bf-nav-desktop a:hover::after,
.bf-nav-desktop li.active > a::after{ width:100%; }

.bf-nav-desktop li.active > a{ color:var(--bf-red); }

.bf-nav-caret{
  font-size:.75rem;
  margin-left:.35rem;
  opacity:.75;
}

..bf-has-dropdown{ position:relative; }

/* dropdown 기본 (닫힘) */
.bf-dropdown{
  position:absolute;
  top:calc(100% + 10px);              /* ✅ 닫힘/열림 top 동일하게 */
  left:0;
  background:#ffffff;
  border:1px solid var(--bf-border);
  border-radius:12px;
  box-shadow:var(--bf-shadow-md);
  padding:12px;                        /* ✅ padding:px 오타 수정 */
  min-width:260px;
  max-width:min(360px, calc(100vw - 32px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:2000;
}

/* ✅ hover “틈” 메우는 브릿지 (이게 핵심) */
.bf-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;        /* dropdown 위쪽으로 확장 */
  height:14px;      /* 마우스가 지나가도 안 닫힘 */
  background:transparent;
}

/* 화살표(기존 유지) */
.bf-dropdown::before{
  content:"";
  position:absolute;
  top:-7px;         /* ✅ 브릿지 높이 고려해서 살짝 올림 */
  left:18px;        /* 필요하면 조절 */
  width:14px;
  height:14px;
  background:#ffffff;
  border-left:1px solid var(--bf-border);
  border-top:1px solid var(--bf-border);
  transform:rotate(45deg);
}

/* 열림 */
.bf-has-dropdown:hover > .bf-dropdown,
.bf-has-dropdown:focus-within > .bf-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* 내부 링크 */
.bf-dropdown-inner{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.bf-dropdown-inner a{
  display:block;
  padding:11px 12px;
  border-radius:10px;
  font-weight:800;
  color:var(--bf-dark);
  text-decoration:none;
  border:1px solid transparent;
  line-height:1.2;
}

.bf-dropdown-inner a:hover{
  background:var(--bf-light);
  border-color:var(--bf-border);
  color:var(--bf-red);
}

/* Hamburger (always visible) */
.bf-mobile-toggle{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:44px;
  height:44px;
  padding:0;
  background:#ffffff43;
  border:3px solid var(--bf-border);
  border-radius:60px;
  cursor:pointer;
  transition:var(--bf-trans);
  flex:0 0 right;
  margin-left: auto;
  
}

.bf-mobile-toggle span{
  display:block;
  width:22px;
  height:3px;
  background:var(--bf-dark);
  border-radius:999px;
  transition:var(--bf-trans);
}

.bf-mobile-toggle:hover{
  border-color:rgba(166, 0, 0, 0.45);
  box-shadow:var(--bf-shadow-sm);
}

.bf-mobile-toggle.is-open{
  border-color:rgba(166, 0, 0, 0.45);
}

/* Slide-out mobile nav */
.bf-mobile-nav{
  position:fixed;
  top:0;
  right:0;
  width:360px;
  max-width:86%;
  height:100%;
  background:var(--bf-white);
  border-left:1px solid var(--bf-border);
  transform:translateX(100%);
  transition:.25s ease;
  z-index:2200;
  padding:1rem 1.25rem;
  box-shadow:var(--bf-shadow-md);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

}

.bf-mobile-nav.open{ transform:translateX(0); }

.bf-mobile-nav-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height: 0;
}

.bf-mobile-nav-close{
  align-self:flex-end;
  font-size:2.2rem;
  line-height:1;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--bf-dark);
  padding:.25rem .5rem;
}

.bf-mobile-list{
  list-style:none;
  padding:0;
  margin:.75rem 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}

.bf-mobile-list li{
  border-bottom:1px solid var(--bf-border);
}

.bf-mobile-list a{
  display:block;
  padding:1.05rem 0;
  text-decoration:none;
  color:var(--bf-dark);
  font-weight:800;
}

.bf-mobile-list li.active > a{ color:var(--bf-red); }

.bf-mobile-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:2100;
}

.bf-mobile-nav-backdrop.open{
  visibility:visible;
  opacity:1;
}

.bf-mobile-actions{
  margin-top:auto;
  padding-top:1rem;
  display:grid;
  gap:.85rem;
}
.bf-mobile-menu {
  height: 100vh;           
  overflow-y: auto;     
  -webkit-overflow-scrolling: touch;

  
}
/* ============================================================
   6) HERO (GLOBAL + SECTOR VARIANTS)
   ============================================================ */
.bf-hero{
  position:relative;
  min-height:var(--bf-hero-min);
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}

.bf-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--bf-hero-img);
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  filter:saturate(1.25) contrast(1.12) brightness(1.03);
  z-index:0;
}

.bf-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(38, 6, 219, 0.123) 0%,
    rgba(131, 77, 77, 0.404) 45%,
    rgba(0, 0, 0, 0.219) 100%
  );
  z-index:1;
}

.bf-hero-content{
  position:relative;
  z-index:2;
  max-width:820px;
  padding:5rem 0;
}

.bf-hero h1{
  font-size:2.9rem;
  line-height:1.15;
  font-weight:800;
  margin:0 0 1.1rem;
  color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,0.35);
}

.bf-hero p{
  font-size:1.05rem;
  margin:0 0 1.8rem;
  opacity:.95;
  color:#fff;
  text-shadow:0 10px 26px rgba(0,0,0,0.25);
}

.bf-hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* Sector pages use bf-hero--sector in HTML (no special layout needed, but keep hook) */
.bf-hero--sector{}

/* Sector hero kicker used in your Commercial HTML */
.bf-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .95rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:900;
  font-size:.92rem;
  line-height:1;
  margin-bottom:1rem;
}

.bf-hero-kicker i{
  font-size:.95rem;
  opacity:.95;
}

/* Hero badges (home page style) */
.bf-hero-badges{
  margin-top:1.4rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.bf-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .95rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  line-height:1;
  white-space:nowrap;
}

.bf-hero-badge i{
  font-size:.95rem;
  opacity:.95;
}

/* ============================================================
   7) SERVICES / SECTORS ICON GRID (GLOBAL)
   ============================================================ */
.bf-icon-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:2.1rem;
}

.bf-icon-card{
  background:#fff;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  padding:2rem 1.5rem;
  text-align:center;
  color:var(--bf-dark);
  text-decoration:none;
  transition:.25s ease;
}

.bf-icon-card:hover{
  transform:translateY(-6px);
  border-color:var(--bf-red);
  box-shadow:var(--bf-shadow-md);
}

.bf-icon-wrap{
  height:72px;
  width:72px;
  border-radius:50%;
  border:2px solid var(--bf-red);
  background:rgba(178,34,34,0.09);
  margin:0 auto 1.15rem;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:.25s ease;
}

.bf-icon-wrap.small{ height:68px; width:68px; }

.bf-icon-wrap i{
  font-size:1.9rem;
  color:var(--bf-red);
  transition:var(--bf-trans);
}

.bf-icon-card:hover .bf-icon-wrap{ background:var(--bf-red); }
.bf-icon-card:hover .bf-icon-wrap i{ color:#fff; }

.bf-icon-card h3{
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 .6rem;
}

.bf-icon-card p{
  color:var(--bf-muted);
  font-size:.95rem;
  margin:0;
}

.bf-grid-image{
  width:72px;
  height:72px;
  object-fit:contain;
  margin:0 auto 1.15rem;
  display:block;
}

/* ============================================================
   7A) PROOF / DIFFERENTIATORS GRID
   ============================================================ */
.bf-proof-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.35rem;
}

.bf-proof-card{
  background:#fff;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  padding:1.7rem 1.35rem;
  box-shadow:var(--bf-shadow-sm);
  transition:.22s ease;
}

.bf-proof-card:hover{
  transform:translateY(-4px);
  border-color:rgba(178,34,34,.45);
  box-shadow:var(--bf-shadow-md);
}

.bf-proof-icon{
  height:54px;
  width:54px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(178,34,34,.25);
  background:rgba(178,34,34,.07);
  margin-bottom:.85rem;
}

.bf-proof-icon i{
  font-size:1.25rem;
  color:var(--bf-red);
}

.bf-proof-card h3{
  margin:0 0 .55rem;
  font-size:1.05rem;
  font-weight:900;
}

.bf-proof-card p{
  margin:0;
  color:var(--bf-muted);
  font-size:.96rem;
  line-height:1.65;
}

/* ============================================================
   7B) STEPS / PROCESS
   ============================================================ */
.bf-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.35rem;
}

.bf-step{
  background:#fff;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  padding:1.7rem 1.35rem;
  box-shadow:var(--bf-shadow-sm);
}

.bf-step-num{
  height:40px;
  width:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bf-red);
  color:#fff;
  font-weight:900;
  margin-bottom:.85rem;
}

.bf-step h3{
  margin:0 0 .55rem;
  font-size:1.05rem;
  font-weight:900;
}

.bf-step p{
  margin:0;
  color:var(--bf-muted);
  font-size:.96rem;
  line-height:1.65;
}

/* ============================================================
   7C) SERVICE PAGE COMPONENTS
   ============================================================ */
.bf-split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:2.2rem;
  align-items:start;
}

.bf-panel{
  background:#fff;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  box-shadow:var(--bf-shadow-sm);
  padding:1.6rem;
}

.bf-panel-title{
  margin:0 0 .75rem;
  font-size:1.1rem;
  font-weight:900;
  color:var(--bf-dark);
}

.bf-panel-divider{
  height:1px;
  background:var(--bf-border);
  margin:1.1rem 0;
}

.bf-panel-sticky{
  position:sticky;
  top:110px;
}

.bf-checklist{
  list-style:none;
  padding:0;
  margin:1.2rem 0 0;
  display:grid;
  gap:.65rem;
}

.bf-checklist li{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  color:var(--bf-dark);
  font-weight:700;
}

.bf-checklist i{
  margin-top:.2rem;
  color:var(--bf-red);
}

.bf-inline-cta{
  margin-top:1.4rem;
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
}

/* Reusable pills */
.bf-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.70rem;
  margin:.75rem 0 0;
}

.bf-pill{
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  padding:.025rem 2rem;
  border-radius:999px;
  border:1px solid rgba(178,34,34,.22);
  background:rgba(178,34,34,.07);
  font-weight:900;
  color:var(--bf-dark);
  font-size:.9rem;
}

.bf-pill i{ color:var(--bf-red); }

/* Hero pill styling (used in sector hero) */
.bf-pill-row--on-hero{ margin-top:1.2rem; }

.bf-pill--hero{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
}
.bf-pill--hero i{ color:#fff; opacity:.95; }

.bf-bullet{
  margin:.5rem 0 0;
  padding-left:1.1rem;
  color:var(--bf-muted);
  line-height:1.7;
}
.bf-bullet li{ margin:.45rem 0; }

/* Capabilities grid */
.bf-cap-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.35rem;
}

.bf-cap-card{
  background:#fff;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  padding:1.6rem 1.4rem;
  box-shadow:var(--bf-shadow-sm);
  transition:.22s ease;
}

.bf-cap-card:hover{
  transform:translateY(-4px);
  border-color:rgba(178,34,34,.45);
  box-shadow:var(--bf-shadow-md);
}

.bf-cap-card h3{
  margin:0 0 .55rem;
  font-size:1.05rem;
  font-weight:900;
}

.bf-cap-card p{
  margin:0 0 .9rem;
  color:var(--bf-muted);
  font-size:.96rem;
  line-height:1.65;
}

.bf-mini-list{
  margin:0;
  padding-left:1.1rem;
  color:var(--bf-muted);
  line-height:1.7;
}
.bf-mini-list li{ margin:.4rem 0; }

.bf-cap-highlight{
  background:linear-gradient(180deg, rgba(178,34,34,.06) 0%, rgba(17,24,39,.02) 100%);
  border-color:rgba(178,34,34,.25);
}

.bf-related-links{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

/* Chips (reusable) */
.bf-chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .95rem;
  border-radius:999px;
  border:1px solid var(--bf-border);
  background:#fff;
  text-decoration:none;
  font-weight:900;
  color:var(--bf-dark);
  transition:.18s ease;
}
.bf-chip:hover{
  border-color:rgba(178,34,34,.55);
  color:var(--bf-red);
  transform:translateY(-1px);
}

/* FAQ */
.bf-faq{
  max-width:920px;
  margin:0 auto;
  display:grid;
  gap:.85rem;
}

.bf-faq-item{
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  background:#fff;
  box-shadow:var(--bf-shadow-sm);
  overflow:hidden;
}

.bf-faq-item summary{
  cursor:pointer;
  padding:1.1rem 1.25rem;
  font-weight:900;
  color:var(--bf-dark);
  list-style:none;
}

.bf-faq-item summary::-webkit-details-marker{ display:none; }

.bf-faq-body{
  padding:0 1.25rem 1.2rem;
  color:var(--bf-muted);
  line-height:1.75;
}

/* ============================================================
   7D) SECTOR PAGE COMPONENTS (USED BY sectors-*.html)
   ============================================================ */
#bfSectorsStart{ scroll-margin-top:120px; }

/* Lists used in sector panels */
.bf-list{
  margin:.75rem 0 0;
  padding-left:1.1rem;
  color:var(--bf-muted);
  line-height:1.7;
}
.bf-list li{ margin:.5rem 0; }
.bf-list strong{ color:var(--bf-dark); }

/* Panel variants */
.bf-panel-dark{
  background:var(--bf-dark);
  color:#fff;
  border-color:rgba(255,255,255,.10);
}
.bf-panel-dark .bf-panel-title{ color:#fff; }
.bf-panel-dark .bf-list{ color:rgba(255,255,255,.86); }
.bf-panel-dark .bf-list strong{ color:#fff; }

.bf-panel-plain{
  box-shadow:none;
  background:transparent;
  border:0;
  padding:0;
}

/* Tight headings + related row */
.bf-h3-tight{
  margin:0 0 .8rem;
  font-size:1.15rem;
  font-weight:900;
  color:var(--bf-dark);
}

.bf-related{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

/* Sector “service mix” cards used in your Commercial HTML */
.bf-card-grid{
  display:grid;
  gap:1.35rem;
}

.bf-card-grid--3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.bf-card{
  background:#fff;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  padding:1.6rem 1.4rem;
  box-shadow:var(--bf-shadow-sm);
  transition:.22s ease;
}

.bf-card:hover{
  transform:translateY(-4px);
  border-color:rgba(178,34,34,.45);
  box-shadow:var(--bf-shadow-md);
}

.bf-card-top{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:.75rem;
}

.bf-card-icon{
  height:44px;
  width:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(178,34,34,.25);
  background:rgba(178,34,34,.07);
  flex:0 0 auto;
}

.bf-card-icon i{
  color:var(--bf-red);
  font-size:1.1rem;
}

.bf-card h3{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  color:var(--bf-dark);
}

.bf-card p{
  margin:0;
  color:var(--bf-muted);
  font-size:.96rem;
  line-height:1.65;
}

/* ============================================================
   8) CLIENT LOGO BANNER (GLOBAL)
   ============================================================ */

.bf-clients{
  background:#fff;
}

.bf-client-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  background:var(--bf-light);
  padding:20px 0;
}

.bf-client-track{
  display:flex;
  align-items:center;
  gap:32px;
  width:max-content;
  animation:bfMarquee 155s linear infinite; /* desktop slower */
  will-change:transform;
  transform:translate3d(0,0,0);
}


.bf-client-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
}

.bf-client-logo{
  height:110px;
  width:auto;
  filter:brightness(100%);
  opacity:.85;
  transition:var(--bf-trans);
}

.bf-client-logo:hover{
  filter:grayscale(60%);
  opacity:1;
  transform:translateY(-1px);
}

/* Edge fade */
.bf-client-marquee::before,
.bf-client-marquee::after{
  content:"";
  position:absolute;
  top:0;
  width:70px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.bf-client-marquee::before{
  left:0;
  background:linear-gradient(to right, var(--bf-light), rgba(249,250,251,0));
}

.bf-client-marquee::after{
  right:0;
  background:linear-gradient(to left, var(--bf-light), rgba(249,250,251,0));
}

/* Animation */
@keyframes bfMarquee{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .bf-client-track{
    animation:none;
  }
}

/* ============================================================
   MOBILE SETTINGS
   ============================================================ */

@media (max-width:980px){

  .bf-client-track{
    animation-duration:135s;
  }

  .bf-client-logo{
    height:70px;
  }

}
}
/* ============================================================
   9) CTA STRIP (GLOBAL)
   ============================================================ */
.bf-cta-strip{
  margin-top:2.4rem;
  background:linear-gradient(180deg, rgba(178,34,34,.07) 0%, rgba(17,24,39,.04) 100%);
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  padding:1.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.bf-cta-strip h3{
  margin:0 0 .25rem;
  font-weight:900;
  color:var(--bf-dark);
}

.bf-cta-strip p{
  margin:0;
  color:var(--bf-muted);
  max-width:64ch;
}

.bf-cta-strip-actions{
  display:flex;
  gap:.85rem;
  flex-wrap:wrap;
}

/* ============================================================
   10) FOOTER (GLOBAL)
   ============================================================ */
.bf-footer{
  background:var(--bf-dark);
  color:#f3f4f6;
}

.bf-footer-cta{
  background:var(--bf-red);
  padding:1.6rem 0;
  color:#fff;
}

.bf-footer-cta-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:center;
}

.bf-footer-cta h2{
  margin:0 0 .25rem;
  font-size:1.55rem;
  line-height:1.2;
  color:#fff;
}

.bf-footer-cta p{ margin:0; opacity:.95; }

.bf-footer-main{ padding:2.4rem 0; }

.bf-footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:3rem;   /* 1rem → 3rem */
}

.bf-footer-logo{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  margin-bottom:14px;
}

.bf-footer-logo img{ height:40px; width:40px; }

.bf-footer-col 
h3{ margin:0 0 .65rem; color:#fff; }
.bf-footer-col{
  display:flexbox;
  flex-direction:column;
  gap:10px;
}
.bf-footer-col a{
  color:#e5e7eb;
  text-decoration:none;
}
.bf-footer-col a:hover{ text-decoration:underline; }

.bf-footer-col ul{ list-style:none; padding:0; margin:0; }
.bf-footer-col ul li{ margin-bottom:.45rem; }

.bf-footer-small{
  font-size:.92rem;
  color:#e5e7eb;
  margin:0;
  opacity:.95;
}

.bf-footer-tagline{
  margin:0;
  color:#cbd5e1;
  font-size:.92rem;
  opacity:.95;
}

.bf-footer-badges{
  display:flex;
  gap: 0.5rem;
  flex-wrap:wrap;
  margin:.25rem 0 .6rem;
  align-items:center;
}

bf-footer-badges img{
  height:40px;
  width:auto;
  opacity:.9;
}

.bf-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .6rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  background:rgba(255,255,255,.06);
}

.bf-footer-bottom{
  background:#0d1422;
  padding:.85rem 0;
}

.bf-footer-bottom-inner{
  display:flex;
  justify-content:center;   /* 🔥 가운데 정렬 */
  align-items:center;
  text-align:center;
  font-size:.85rem;
}
.bf-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.bf-footer-bottom a{ color:#fff; text-decoration:none; }
.bf-footer-bottom a:hover{ text-decoration:underline; }

/* ============================================================
   11) ACKNOWLEDGEMENT OF COUNTRY (OPTIONAL)
   - Keep for Home/About pages only (not forced)
   ============================================================ */
.bf-acknowledgement{ background:#fff; }

.bf-ack-card{
  position:relative;
  border:1px solid var(--bf-border);
  border-radius:var(--bf-radius);
  overflow:hidden;
  background:linear-gradient(180deg, #f3a7a7 0%, #e6ee9f 100%);
  box-shadow:var(--bf-shadow-sm);

  display:grid;
  grid-template-columns:320px 1fr;
  align-items:stretch;
}

.bf-ack-card::before,
.bf-ack-card::after{
  content:"";
  position:absolute;
  top:0;
  width:150px;
  height:100%;
  opacity:.64;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 35%, rgba(0,0,0,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 55%, rgba(0,0,0,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 70%, rgba(0,0,0,0.12) 0 2px, transparent 3px);
  background-size:26px 26px;
}

.bf-ack-card::before{ left:-34px; }
.bf-ack-card::after{ right:-34px; transform:scaleX(-1); }

.bf-ack-title{
  padding:2.4rem 2rem;
  border-right:1px solid var(--bf-border);
  display:flex;
  align-items:center;
  background:rgba(17,24,39,0.02);
  position:relative;
  z-index:1;
}

.bf-ack-title h2{
  margin:0;
  font-size:1.8em;
  line-height:1.1;
  font-weight:900;
  color:var(--bf-dark);
}

.bf-ack-body{
  padding:2.4rem 2rem;
  position:relative;
  z-index:1;
}

.bf-ack-body p{
  margin:0 0 1rem;
  color:var(--bf-dark);
  font-size:1.02rem;
  line-height:1.75;
}
.bf-ack-body p:last-child{ margin-bottom:0; }

/* ============================================================
   12) RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .bf-topbar-center{
    order:3;
    width:100%;
    margin:0;
    padding-top:.25rem;
    text-align:left;
  }

  .bf-topbar-tagline{ white-space:normal; }

  .bf-hero{ min-height:clamp(520px, 72vh, 760px); }
  .bf-hero h1{ font-size:2.2rem; }

  .bf-hero-badge{ white-space:normal; }

  .bf-icon-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bf-proof-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bf-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .bf-split{ grid-template-columns:1fr; }
  .bf-panel-sticky{ position:static; top:auto; }

  .bf-cap-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .bf-card-grid--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .bf-footer-cta-inner{
    display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 2rem;
}

  /* Acknowledgement card stacks nicely */
  .bf-ack-card{ grid-template-columns:1fr; }
  .bf-ack-title{
    border-right:none;
    border-bottom:1px solid var(--bf-border);
  }
}

@media (max-width: 600px){
  .bf-container{ padding:0 1.1rem; }

  .bf-section{ padding:3rem 0; }
  .bf-section-title{ font-size:1.75rem; }

  .bf-icon-grid{
    grid-template-columns:1fr;
    gap:1.25rem;
  }

  .bf-icon-card{ padding:1.7rem 1.1rem; }

  .bf-proof-grid{ grid-template-columns:1fr; }
  .bf-steps{ grid-template-columns:1fr; }

  .bf-cap-grid{ grid-template-columns:1fr; }

  .bf-card-grid--3{ grid-template-columns:1fr; }

  /* Mobile devices: hide hover dropdowns (mobile nav handles it) */
  .bf-dropdown{ display:none; }

  .bf-client-logo{ height:42px; }
  .bf-client-track{ gap:24px; }
}
@media (max-width: 980px){
  .bf-nav-desktop{
    display:none !important;
  }