/* ---------- Buttons ---------- */
  .btn-outline{
    border:1.5px solid var(--gold-dark); color:var(--gold-dark); font-weight:700; font-size:14px; padding:10px 20px;
    border-radius:999px; display:inline-flex; align-items:center; gap:8px; background:transparent;
    transition:background .18s ease, color .18s ease; width:100%; justify-content:center;
  }
  .btn-outline:hover{background:var(--gold-dark); color:#fff;}

  /* ---------- Book grid (shared card styles) ---------- */
  .book-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px 20px;}

  @keyframes pulseRing{
    0%{transform:scale(0.6); opacity:0.75;}
    100%{transform:scale(1.9); opacity:0;}
  }

  /* ---------- About Us page ---------- */
  .about-wrap{padding:48px 25px 110px;}
  .about-intro{max-width:760px; margin-bottom:52px;}
  .about-intro h2{font-size:clamp(24px,3vw,32px); font-weight:600; margin-top:10px;}
  .about-intro p{margin-top:14px; font-size:15px; line-height:1.8; color:var(--ink-soft);}
  .about-intro p + p{margin-top:12px;}

  .about-section{margin-bottom:56px;}
  .about-section > .section-label{display:flex; flex-direction:column; margin-bottom:26px;}
  .about-section h3{font-size:20px; font-weight:600; margin-top:6px;}

  .value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .value-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 22px;
    box-shadow:var(--shadow);
  }
  .value-icon{
    width:52px; height:52px; border-radius:50%; background:var(--gold-pale); color:var(--gold-dark);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .value-card h4{font-family:"Karla",sans-serif; font-size:15.5px; font-weight:800; color:var(--ink);}
  .value-card p{font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.6;}

  .office-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:stretch;}
  .office-card{
    background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px 32px;
    box-shadow:var(--shadow);
  }
  .office-card h4{font-size:18px; font-weight:600; margin-bottom:18px;}
  .office-name{font-family:"Karla",sans-serif; font-weight:800; font-size:15px; color:var(--maroon); margin-bottom:4px;}
  .office-addr{font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:20px;}
  .office-card .contact-item{margin-bottom:16px;}
  .office-card .contact-item svg{color:var(--gold-dark);}
  .office-note{
    background:var(--bg-alt); border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--ink-soft);
    line-height:1.7; border-left:3px solid var(--gold-dark);
  }
  .office-note a{color:var(--gold-dark); font-weight:700;}

  .map-card{
    position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
    background:linear-gradient(160deg, #EADFC4 0%, #DCC793 45%, #C9A55E 100%);
    min-height:280px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
    padding:30px; text-align:center;
  }
  .map-card svg{color:var(--maroon);}
  .map-card .pin-label{font-family:"Fraunces",serif; font-size:17px; font-weight:600; color:var(--ink);}
  .map-card .pin-sub{font-size:13px; color:var(--ink-soft); max-width:28ch;}

  @media (max-width: 980px){
    .value-grid{grid-template-columns:repeat(2,1fr);}
    .office-grid{grid-template-columns:1fr;}
    .book-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  @media (max-width: 620px){
    .value-grid{grid-template-columns:1fr;}
    .book-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  }