/* ============================================================
   Harrimont Business Systems — service page
   Loaded AFTER css/styles.css (reuses :root tokens, header/footer,
   .section, .btn, .contact-form / .field, .form-success).
   ============================================================ */

/* ---------- hero ---------- */
.bsys-hero{
  position:relative;min-height:86vh;min-height:86svh;display:flex;align-items:center;overflow:hidden;color:var(--white);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(200,164,106,.10), transparent 55%),
    linear-gradient(160deg,#0D1321 0%,#121b2c 58%,#0a0f1a 100%);
}
.bsys-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 74% 42%,#000,transparent 72%);
}
.bsys-hero .hero-photo{position:absolute;inset:0;z-index:0;}
.bsys-hero .hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.34;}
.bsys-hero .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(13,19,33,.78) 0%,rgba(13,19,33,.88) 55%,rgba(10,15,26,.97) 100%);}
.bsys-hero .wrap{position:relative;z-index:2;padding-top:132px;padding-bottom:74px;max-width:62rem;}
.bsys-hero .eyebrow{margin-bottom:26px;}
.bsys-hero h1{font-size:clamp(2.3rem,5.6vw,4.1rem);font-weight:500;line-height:1.06;letter-spacing:-0.02em;margin-bottom:24px;max-width:20ch;}
.bsys-hero h1 em{font-style:italic;color:var(--gold);font-weight:400;}
.bsys-lede{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--gray-100);line-height:1.62;max-width:62ch;margin-bottom:40px;}
.bsys-cta{display:flex;flex-wrap:wrap;gap:16px;}

/* ---------- generic intro under a section head ---------- */
.bsys-intro{font-size:clamp(1.04rem,1.9vw,1.18rem);color:var(--ink-soft);line-height:1.72;max-width:70ch;margin-bottom:clamp(30px,4vw,46px);}
.section-dark .bsys-intro{color:var(--gray-100);}
.bsys-endline{margin-top:clamp(28px,4vw,42px);font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--ink);line-height:1.4;max-width:62ch;}
.section-dark .bsys-endline{color:var(--white);}

/* ---------- checklist (problem / compliance) ---------- */
.bsys-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;}
.bsys-list li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:1rem;line-height:1.55;}
.bsys-list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg);}
.section-dark .bsys-list li{color:var(--gray-100);}
.bsys-list.check li::before{content:"";left:0;top:.45em;width:14px;height:8px;border:0;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);}

/* ---------- feature grid (what we build) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.feat{
  border:1px solid var(--line);border-radius:6px;padding:20px 22px;background:rgba(255,255,255,.5);
  display:flex;align-items:center;gap:14px;
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.feat:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:var(--shadow);}
.feat::before{content:"";width:7px;height:7px;flex:none;border:1px solid var(--gold);transform:rotate(45deg);}
.feat span{font-family:"Montserrat",sans-serif;font-size:.98rem;font-weight:500;color:var(--ink);letter-spacing:.01em;}

/* ---------- 3 service cards ---------- */
.bsys-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,30px);}
.bsys-card{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3vw,38px);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.bsys-card::after{content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--gold);transition:width .4s var(--ease);}
.bsys-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(13,19,33,.45);border-color:var(--line-gold);}
.bsys-card:hover::after{width:100%;}
.bsys-card .cnum{font-family:"Playfair Display",serif;font-style:italic;color:var(--line-gold);font-size:1.4rem;}
.bsys-card h3{font-size:1.28rem;margin:12px 0 12px;color:var(--ink);}
.bsys-card p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.62;}

/* ---------- audience chips ---------- */
.audience-grid{display:flex;flex-wrap:wrap;gap:12px;}
.audience-grid span{
  border:1px solid rgba(255,255,255,.2);border-radius:40px;padding:11px 22px;font-size:.9rem;color:var(--gray-100);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.audience-grid span:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--white);}

/* ---------- steps (how we work) ---------- */
.steps{display:grid;border-top:1px solid var(--line);}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,46px);padding:clamp(24px,3.5vw,36px) 0;border-bottom:1px solid var(--line);align-items:start;}
.step .snum{font-family:"Playfair Display",serif;font-style:italic;color:var(--line-gold);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;}
.step h3{font-size:clamp(1.15rem,2.2vw,1.5rem);margin-bottom:8px;color:var(--ink);}
.step p{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.7;max-width:62ch;}

/* ---------- legal-safe note ---------- */
.bsys-note{
  margin-top:26px;padding:16px 20px;border-left:3px solid var(--gold);border-radius:0 4px 4px 0;
  background:var(--gold-soft);font-size:.9rem;color:var(--ink-soft);line-height:1.62;max-width:74ch;
}
.section-dark .bsys-note{background:rgba(200,164,106,.12);color:var(--gray-100);}
.bsys-note strong{color:var(--gold-ink);}
.section-dark .bsys-note strong{color:var(--gold);}

/* ---------- lead form (reuses .field / .contact-form) ---------- */
.bsys-form-wrap{max-width:660px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
.field select{
  width:100%;background-color:rgba(13,19,33,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A46A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  border:1px solid rgba(255,255,255,.16);border-radius:3px;
  padding:14px 44px 14px 16px;color:var(--white);font-family:"Montserrat",sans-serif;font-size:16px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field select:focus{outline:none;border-color:var(--gold);background-color:rgba(13,19,33,.8);box-shadow:0 0 0 3px var(--gold-soft);}
.field select option{color:#0D1321;}

@media(max-width:820px){
  .feature-grid{grid-template-columns:1fr 1fr;}
  .bsys-cards{grid-template-columns:1fr;}
  .bsys-list{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .feature-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}