/* =========================
   P&H Service Page — Scoped CSS
   Targets ONLY .service* classes from the HTML snippet
   ========================= */

   :root{
    --ph-navy:#1C3F60;
    --ph-gold:#E3B23C;
    --ink-900:#0f172a;
    --ink-700:#334155;
    --ink-600:#475569;
    --bd:#e5e7eb;
    --bg:#f7f9fb;
    --card:#ffffff;
    --shadow:0 10px 24px rgba(2,12,27,.08);
    --r:16px;
  }
  
  /* Keep the section visually separated from any "sidebar" layout around it */
  .service{
    box-sizing:border-box;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:clamp(24px,4vw,56px) 16px;
  }
  
  /* ---------- HERO ---------- */
  .service__hero{
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    gap:24px;
    align-items:center;
    margin-bottom:28px;
  }
  .service__hero-text h1{
    margin:0 0 10px;
    font:800 clamp(22px,4.5vw,36px)/1.2 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ink-900);
    letter-spacing:-.02em;
  }
  .service__lead{
    margin:0;
    color:var(--ink-700);
    font:500 clamp(15px,2.2vw,18px)/1.7 system-ui,-apple-system,"Inter","Noto Sans",Arial;
  }
  .service__hero-media{
    margin:0;
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:var(--r);
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .service__hero-media img{ display:block; width:100%; height:auto; }
  .service__hero-media figcaption{
    padding:10px 12px;
    color:var(--ink-600);
    font:500 14px/1.5 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    background:#fff;
    border-top:1px solid var(--bd);
  }
  
  /* ---------- HIGHLIGHTS (3 columns on desktop) ---------- */
  .service__highlights{ margin: 8px 0 20px; }
  .highlight-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:16px;
    list-style:none; margin:0; padding:0;
  }
  .highlight{
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:14px;
    padding:16px;
    box-shadow:var(--shadow);
  }
  .highlight__title{
    margin:0 0 8px;
    font:800 16px/1.3 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ph-navy);
  }
  .highlight__text{ 
      margin:0;
      color:var(--ink-700);
      font-size:1.3em;
      line-height: initial;
    }
  
  /* ---------- AUDIENCE ---------- */
  .service__section-head{
    display:flex; align-items:center; gap:12px;
    margin: 24px 0 10px;
  }
  .service__section-head h2{
    margin:0;
    font:800 20px/1.3 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ink-900);
  }
  .service__inline-img{
    width:44px; height:44px; object-fit:cover; border-radius:10px;
    border:1px solid var(--bd);
  }
  .bullet-list{
    list-style: disc;
    padding-left:22px;
    margin:0 0 22px;
    color:var(--ink-700);
    font:500 16px/1.7 system-ui,-apple-system,"Inter","Noto Sans",Arial;
  }
  
  /* ---------- PROCESS (Stepper) ---------- */
  .service__process{ margin: 8px 0 24px; }
  .service__process h2{
    font:800 20px/1.3 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ink-900); margin:0 0 12px;
  }
  .stepper{
    list-style:none; margin:0; padding:0;
    display:grid; gap:16px;
  }
  .step{
    display:grid;
    grid-template-columns: 160px 1fr; /* media + text */
    gap:16px;
    align-items:start;
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:14px;
    padding:14px;
    box-shadow:var(--shadow);
  }
  .step__media img{ display:block; width:100%; height:auto; border-radius:10px; }
  .step__title{
    margin:0 0 6px;
    font:800 16px/1.3 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ph-navy);
  }
  .step__text{ margin:0; color:var(--ink-700); }
  
  /* ---------- GALLERY ---------- */
  .service__gallery{ margin: 8px 0 26px; }
  .service__gallery h2{
    font:800 20px/1.3 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ink-900); margin:0 0 12px;
  }
  .media-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:16px;
  }
  .media-card{
    background:var(--card);
    border:1px solid var(--bd);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow);
    margin:0;
  }
  .media-card img{ display:block; width:100%; height:auto; }
  .media-card figcaption{
    padding:10px 12px;
    color:var(--ink-600);
    border-top:1px solid var(--bd);
    background:#fff;
    font:500 14px/1.5 system-ui,-apple-system,"Inter","Noto Sans",Arial;
  }
  
  /* ---------- CTA ---------- */
  .service__cta{
    margin: 6px 0 26px;
    background:linear-gradient(180deg,#ffffff, #f4f7fb);
    border:1px solid var(--bd);
    border-radius:16px;
    padding:16px;
    display:flex; gap:12px; align-items:center; justify-content:space-between;
    box-shadow:var(--shadow);
  }
  .service__cta p{
    margin:0; color:var(--ink-700);
    font:600 16px/1.6 system-ui,-apple-system,"Inter","Noto Sans",Arial;
  }
  .btn{
    appearance:none; border:0; cursor:pointer;
    padding:12px 16px; border-radius:999px;
    font:800 14px/1 system-ui,-apple-system,"Inter","Noto Sans",Arial;
  }
  .btn--primary{ background:var(--ph-navy); color:#fff; }
  .btn--primary:hover{ filter:brightness(1.06); }

  .service__block-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 1.1remf;
  }
  
  /* ---------- FAQ (native details) ---------- */
  .service__faq h2{
    font:800 20px/1.3 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ink-900); margin:0 0 12px;
  }
  .faq{
    border:1px solid var(--bd);
    border-radius:12px;
    background:#fff;
    box-shadow:var(--shadow);
    padding:0; margin:8px 0;
  }
  .faq__q{
    list-style:none;
    padding:14px 16px;
    cursor:pointer;
    font:700 15px/1.4 system-ui,-apple-system,"Inter","Noto Sans",Arial;
    color:var(--ink-900);
  }
  .faq__a{
    padding:0 16px 14px;
    color:var(--ink-700);
    font:500 15px/1.6 system-ui,-apple-system,"Inter","Noto Sans",Arial;
  }
  
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1024px){
    .service__hero{ grid-template-columns: 1fr; }
    .service__hero-media{ order: 2; }
    .service__hero-text{ order: 1; }
    .highlight-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .media-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (max-width: 680px){
    .highlight-grid{ grid-template-columns: 1fr; }
    .media-grid{ grid-template-columns: 1fr; }
    .step{ grid-template-columns: 1fr; }
    .service__cta{ flex-direction:column; align-items:flex-start; gap:10px; }
  }
  
  /* Safety: avoid unexpected sidebars/columns from global flex/grid */
  .service, .service * { min-width: 0; }