/* ===== STRAUSS Tier 1 — extra components (Tentang / Garansi / FAQ) =====
   Builds on style.css (same tokens: --orange #EE7522, --black, Russo One + Roboto). */

/* placeholder marker — content still waiting on data from the owner */
.todo{display:inline;background:#fff3e9;color:#c9560f;border:1px dashed var(--orange);
  border-radius:6px;padding:1px 7px;font-size:.92em;font-weight:600;font-style:normal;}
.todo::before{content:"✎ ";opacity:.7;}
.todo-block{display:block;background:#fff7f1;border:1px dashed #f0b483;border-left:4px solid var(--orange);
  border-radius:10px;padding:14px 16px;margin:10px 0;color:#9a5a25;font-size:14px;}

/* ===== sub-page hero ===== */
.subhero{background:var(--black);color:#fff;position:relative;overflow:hidden;}
.subhero-in{padding:62px 0 56px;max-width:780px;}
.subhero .kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--orange);}
.subhero .kicker::before{content:"";width:26px;height:3px;background:var(--orange);}
.subhero h1{font-family:'Russo One',sans-serif;font-size:46px;line-height:1.06;margin:16px 0 14px;}
.subhero h1 span{color:var(--orange);}
.subhero p{color:#c4c4c4;font-size:16px;max-width:620px;}
.subhero .crumbs{font-size:12.5px;color:#7f7f7f;margin-bottom:20px;}
.subhero .crumbs a:hover{color:var(--orange);}
.subhero-emblem{position:absolute;right:-60px;bottom:-70px;width:300px;opacity:.06;}

/* ===== generic content section ===== */
.section{padding:60px 0;}
.section.alt{background:var(--paper);}
.section .lead{max-width:760px;}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--orange);margin-bottom:12px;}
.section h2{font-family:'Russo One',sans-serif;font-size:30px;line-height:1.15;margin-bottom:14px;}
.section h3{font-size:19px;font-weight:700;margin:0 0 8px;}
.section p{font-size:15.5px;color:#3a3a3a;margin-bottom:14px;}
.section p:last-child{margin-bottom:0;}
.muted{color:var(--grey);}

/* two-column intro */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;}
.split .media{background:var(--black);border-radius:16px;min-height:280px;display:flex;
  align-items:center;justify-content:center;position:relative;overflow:hidden;}
.split .media img{width:62%;opacity:.95;}
.split .media .tag{position:absolute;bottom:14px;left:16px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#777;}

/* feature / differentiator / value cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
.cards.two{grid-template-columns:repeat(2,1fr);}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;transition:.2s;}
.section.alt .fcard{background:#fff;}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#e0ddd7;}
.fcard .ic{width:42px;height:42px;border-radius:10px;background:#fff1e6;color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;}
.fcard h3{font-size:16.5px;margin-bottom:6px;}
.fcard p{font-size:14px;color:#555;margin:0;}

/* mission / vision band */
.mvbar{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.mvbar .mv{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;}
.mvbar .mv .eyebrow{margin-bottom:10px;}
.mvbar .mv p{font-size:16px;color:#2c2c2c;margin:0;}

/* ===== timeline (Our Story) ===== */
.timeline{position:relative;margin-top:18px;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:#e2ded8;}
.tl{position:relative;padding:0 0 26px 22px;}
.tl::before{content:"";position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--orange);border:3px solid #fff;box-shadow:0 0 0 2px var(--orange);}
.tl:last-child{padding-bottom:0;}
.tl .yr{font-family:'Russo One',sans-serif;font-size:14px;color:var(--orange);letter-spacing:.04em;}
.tl h4{font-size:16px;margin:3px 0 5px;}
.tl p{font-size:14px;color:#555;margin:0;}

/* ===== FAQ accordion ===== */
.faq{max-width:840px;}
.faq-cat{font-family:'Russo One',sans-serif;font-size:15px;color:var(--orange);letter-spacing:.05em;
  text-transform:uppercase;margin:26px 0 10px;}
.acc{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;overflow:hidden;}
.acc summary{list-style:none;cursor:pointer;padding:16px 50px 16px 18px;font-weight:600;font-size:15px;
  position:relative;color:var(--ink);}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--orange);transition:transform .2s;}
.acc[open] summary::after{content:"–";}
.acc summary:hover{color:var(--orange);}
.acc .ans{padding:0 18px 18px;font-size:14.5px;color:#454545;line-height:1.6;}
.acc .ans p{margin:0 0 8px;}.acc .ans p:last-child{margin:0;}

/* ===== warranty cards ===== */
.warr{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.wcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px;border-top:4px solid var(--orange);}
.wcard h3{font-size:17px;display:flex;align-items:center;gap:10px;}
.wcard h3 .n{width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;
  font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.wcard ul{list-style:none;margin:12px 0 0;}
.wcard li{font-size:14px;color:#454545;padding:7px 0 7px 22px;position:relative;border-bottom:1px solid var(--line);}
.wcard li:last-child{border-bottom:0;}
.wcard li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;background:var(--orange);border-radius:2px;}
.wcard li.no::before{background:#c0392b;}

/* ===== CTA strip ===== */
.cta-strip{background:var(--black);color:#fff;border-radius:18px;padding:38px 40px;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;}
.cta-strip h2{font-family:'Russo One',sans-serif;font-size:24px;margin-bottom:6px;}
.cta-strip p{color:#bdbdbd;font-size:14px;margin:0;}
.cta-strip .actions{display:flex;gap:12px;flex-wrap:wrap;}

/* contact mini-grid */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px;}
.cinfo{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.cinfo .lbl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);}
.cinfo .val{font-size:15px;font-weight:600;margin-top:4px;color:var(--ink);}
.cinfo a.val:hover{color:var(--orange);}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:26px;}
  .cards,.cards.two,.warr,.mvbar,.contact-grid{grid-template-columns:1fr;}
  .subhero h1{font-size:36px;}
  .section h2{font-size:25px;}
}