/* ==========================================================================
   Goldcattle — Custom CNC Machined Smartphone Metal Bezel Frames
   Scoped under .gcb-  |  Deploy: https://www.xmgoldcattle.com/assets/css/cnc-phone-metal-bezel-case.css
   ========================================================================== */
.gcb-page{--gc-blue:#0052cc;--gc-blue-lt:#2f7bff;--gc-ink:#14171b;--gc-graphite:#1c2026;--gc-graphite-2:#252a32;--gc-line:#e3e7ec;--gc-mut:#5b6675;--gc-bg:#ffffff;--gc-soft:#f4f6f8;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1c2026;line-height:1.65;background:var(--gc-bg);}
.gcb-wrap{max-width:1180px;margin:0 auto;padding:0 22px;}
.gcb-section{padding:64px 0;}
.gcb-section--soft{background:var(--gc-soft);}
.gcb-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gc-blue);margin-bottom:10px;}
.gcb-section h2{font-size:1.85rem;line-height:1.25;margin:0 0 14px;color:var(--gc-ink);font-weight:700;}
.gcb-lede{max-width:840px;margin:0 0 24px;color:var(--gc-mut);font-size:1.02rem;}
.gcb-note,.gcb-fine{font-size:.86rem;color:var(--gc-mut);margin:14px 0 0;}
.gcb-fine a,.gcb-note a,.gcb-callout a{color:var(--gc-blue);text-decoration:none;}
.gcb-fine a:hover,.gcb-callout a:hover{text-decoration:underline;}

/* ---------- Hero ---------- */
.gcb-hero{background:linear-gradient(150deg,#12151a 0%,#1d222a 48%,#262d37 100%);color:#fff;padding:60px 0 52px;position:relative;overflow:hidden;}
.gcb-hero::after{content:"";position:absolute;top:-160px;left:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(0,82,204,.25),transparent 65%);pointer-events:none;}
.gcb-hero .gcb-wrap{position:relative;z-index:1;display:grid;grid-template-columns:.92fr 1.2fr;gap:40px;align-items:start;}
.gcb-hero-visual{border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.gcb-hero-visual img{display:block;width:100%;height:auto;}
.gcb-hero-visual figcaption{background:#1a1e24;color:#9aa4b2;font-size:.78rem;padding:10px 14px;text-align:center;}
.gcb-hero-tag{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9db8ff;border:1px solid rgba(157,184,255,.4);padding:5px 12px;border-radius:999px;margin-bottom:16px;}
.gcb-hero-title{font-size:2.3rem;line-height:1.18;margin:0 0 14px;color:#fff;font-weight:800;}
.gcb-hero-sub{color:#c7ced8;max-width:640px;margin:0 0 22px;font-size:1.03rem;}
.gcb-hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font-size:.86rem;color:#c7ced8;}
.gcb-hero-meta b{color:#fff;}
.gcb-hero-bullets{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;font-size:.88rem;color:#c7ced8;}
.gcb-hero-bullets span::before{content:"✓ ";color:#5ecb7f;font-weight:700;}

/* Hero spec table */
.gcb-spec-tbl{width:100%;border-collapse:collapse;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;}
.gcb-spec-tbl td{padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;color:#e6eaf0;text-align:left;}
.gcb-spec-tbl tr:last-child td{border-bottom:none;}
.gcb-spec-tbl td:first-child{color:#9db8ff;font-weight:600;white-space:nowrap;width:42%;}
.gcb-spec-tbl td:last-child{color:#fff;}
.gcb-spec-star{font-size:.76rem;color:#8f99a8;margin-top:8px;}

/* ---------- Buttons ---------- */
.gcb-cta{transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 8px 22px rgba(0,82,204,.35);}
.gcb-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,82,204,.45);}
.gcb-cta--light:hover{box-shadow:0 12px 28px rgba(0,0,0,.18);}

/* ---------- Tables ---------- */
.gcb-table-wrap{overflow-x:auto;border:1px solid var(--gc-line);border-radius:12px;background:#fff;}
.gcb-table-wrap table{width:100%;border-collapse:collapse;min-width:520px;}
.gcb-table-wrap td,.gcb-table-wrap th{padding:12px 16px;border-bottom:1px solid var(--gc-line);font-size:.94rem;text-align:left;}
.gcb-table-wrap th{background:var(--gc-soft);font-weight:700;color:var(--gc-ink);}
.gcb-table-wrap tr:last-child td{border-bottom:none;}
.gcb-table-wrap td:first-child{color:var(--gc-mut);font-weight:600;white-space:nowrap;}
.gcb-table-wrap td:last-child{color:#1c2026;}

/* ---------- 6-col customization ---------- */
.gcb-custom6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcb-custom6-item{background:#fff;border:1px solid var(--gc-line);border-radius:12px;padding:20px;}
.gcb-custom6-item h4{margin:0 0 8px;font-size:1rem;color:var(--gc-ink);}
.gcb-custom6-item p{margin:0;font-size:.88rem;color:var(--gc-mut);}
.gcb-custom6-item .gcb-ico{display:inline-block;width:34px;height:34px;line-height:34px;text-align:center;border-radius:8px;background:var(--gc-soft);color:var(--gc-blue);font-weight:800;font-size:.85rem;margin-bottom:10px;}

/* ---------- Materials table w/ cards ---------- */
.gcb-mats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcb-mat{background:linear-gradient(160deg,#232831,#171a20);color:#fff;border-radius:12px;padding:22px 20px;}
.gcb-mat h4{margin:0 0 6px;font-size:1.06rem;color:#fff;}
.gcb-mat p{margin:0 0 12px;font-size:.88rem;color:#b9c1cc;}
.gcb-mat ul{margin:0;padding:0;list-style:none;}
.gcb-mat li{font-size:.84rem;color:#dfe4ea;padding:3px 0;}

/* ---------- CNC process ---------- */
.gcb-proc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:proc;}
.gcb-proc-step{background:#fff;border:1px solid var(--gc-line);border-radius:12px;padding:20px;position:relative;}
.gcb-proc-step::before{counter-increment:proc;content:counter(proc,decimal-leading-zero);position:absolute;top:14px;right:16px;font-size:1.5rem;font-weight:800;color:#e7ebf0;}
.gcb-proc-step b{display:block;font-size:.98rem;color:var(--gc-ink);margin-bottom:6px;padding-right:34px;}
.gcb-proc-step p{margin:0;font-size:.86rem;color:var(--gc-mut);}

/* ---------- Finishes ---------- */
.gcb-finishes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcb-finish{background:#fff;border:1px solid var(--gc-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
.gcb-finish-swatch{height:88px;display:block;}
.gcb-finish-body{padding:14px 16px;flex:1;}
.gcb-finish-body h4{margin:0 0 6px;font-size:.95rem;color:var(--gc-ink);}
.gcb-finish-body p{margin:0;font-size:.84rem;color:var(--gc-mut);}
.gcb-finish-tag{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:700;color:var(--gc-blue);letter-spacing:.06em;text-transform:uppercase;}

/* ---------- QC / phases ---------- */
.gcb-qc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.gcb-qc-item{background:#fff;border:1px solid var(--gc-line);border-top:4px solid var(--gc-blue);border-radius:10px;padding:16px;}
.gcb-qc-item b{display:block;font-size:.92rem;color:var(--gc-ink);margin-bottom:6px;}
.gcb-qc-item p{margin:0;font-size:.84rem;color:var(--gc-mut);}
.gcb-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcb-phase{background:#fff;border:1px solid var(--gc-line);border-radius:12px;padding:22px;}
.gcb-phase h4{margin:0 0 6px;font-size:1rem;color:var(--gc-ink);}
.gcb-phase .gcb-phase-tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--gc-blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;}
.gcb-phase ul{margin:0;padding:0;list-style:none;}
.gcb-phase li{font-size:.86rem;color:var(--gc-mut);padding:3px 0 3px 18px;position:relative;}
.gcb-phase li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--gc-blue-lt);}

/* ---------- Quote your part ---------- */
.gcb-quote{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;}
.gcb-quote-list{background:#fff;border:1px solid var(--gc-line);border-radius:12px;padding:22px 26px;}
.gcb-quote-list ol{margin:0;padding-left:20px;}
.gcb-quote-list li{font-size:.94rem;color:var(--gc-ink);padding:6px 0;}
.gcb-quote-list li small{display:block;color:var(--gc-mut);font-size:.84rem;}
.gcb-quote-get{background:#eef3fc;border:1px solid #c9daf6;border-radius:12px;padding:22px 24px;}
.gcb-quote-get h4{margin:0 0 10px;font-size:.95rem;color:var(--gc-ink);}
.gcb-quote-get ul{margin:0;padding:0;list-style:none;}
.gcb-quote-get li{font-size:.9rem;color:#23324c;padding:5px 0 5px 22px;position:relative;}
.gcb-quote-get li::before{content:"✓";position:absolute;left:0;color:#1e9e4a;font-weight:700;}

/* ---------- Case study ---------- */
.gcb-case{border:1px solid var(--gc-line);border-radius:14px;overflow:hidden;background:#fff;}
.gcb-case-head{background:linear-gradient(120deg,#12151a,#232831);color:#fff;padding:18px 22px;font-weight:700;font-size:1.02rem;}
.gcb-case-body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gc-line);}
.gcb-case-cell{background:#fff;padding:18px 22px;}
.gcb-case-cell b{display:block;font-size:.9rem;color:var(--gc-ink);margin-bottom:6px;}
.gcb-case-cell p{margin:0;font-size:.88rem;color:var(--gc-mut);}
.gcb-case-cell table{width:100%;border-collapse:collapse;font-size:.9rem;}
.gcb-case-cell td{padding:6px 0;border-bottom:1px dashed var(--gc-line);color:#1c2026;}
.gcb-case-cell td:first-child{color:var(--gc-mut);font-weight:600;width:46%;}

/* ---------- Capability grid ---------- */
.gcb-cap{border:1px solid var(--gc-line);border-radius:14px;overflow:hidden;background:#fff;}
.gcb-cap-head{background:linear-gradient(120deg,#12151a,#232831);color:#fff;padding:18px 22px;font-weight:700;font-size:1.05rem;}
.gcb-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gc-line);}
.gcb-cap-cell{background:#fff;padding:16px 18px;}
.gcb-cap-cell b{display:block;font-size:.92rem;color:var(--gc-ink);margin-bottom:5px;}
.gcb-cap-cell span{font-size:.83rem;color:var(--gc-mut);}

/* ---------- Callout ---------- */
.gcb-callout{background:#eef3fc;border:1px solid #c9daf6;border-radius:12px;padding:18px 22px;font-size:.95rem;color:#23324c;margin-top:20px;}
.gcb-callout b{color:var(--gc-ink);}

/* ---------- FAQ ---------- */
.gcb-faq{border:1px solid var(--gc-line);border-radius:12px;overflow:hidden;}
.gcb-faq details{border-bottom:1px solid var(--gc-line);}
.gcb-faq details:last-child{border-bottom:none;}
.gcb-faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:.96rem;color:var(--gc-ink);list-style:none;position:relative;background:#fff;}
.gcb-faq summary::-webkit-details-marker{display:none;}
.gcb-faq summary::after{content:"+";position:absolute;right:18px;top:14px;font-size:1.2rem;color:var(--gc-blue);font-weight:700;}
.gcb-faq details[open] summary::after{content:"–";}
.gcb-faq details[open] summary{background:var(--gc-soft);}
.gcb-answer{padding:0 20px 16px;font-size:.92rem;color:var(--gc-mut);background:var(--gc-soft);}
.gcb-answer p{margin:0 0 8px;}
.gcb-answer a{color:var(--gc-blue);text-decoration:none;}

/* ---------- Related groups ---------- */
.gcb-rel-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.gcb-rel-group{background:#fff;border:1px solid var(--gc-line);border-radius:12px;padding:18px 20px;}
.gcb-rel-group h4{margin:0 0 12px;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gc-blue);}
.gcb-rel-links{display:flex;flex-wrap:wrap;gap:8px;}
.gcb-rel-links a{background:var(--gc-soft);border:1px solid var(--gc-line);border-radius:999px;padding:7px 14px;font-size:.84rem;color:var(--gc-ink);text-decoration:none;transition:border-color .15s,color .15s;}
.gcb-rel-links a:hover{border-color:var(--gc-blue);color:var(--gc-blue);}

/* ---------- Final CTA ---------- */
.gcb-final{background:linear-gradient(150deg,#12151a 0%,#1d222a 55%,#232831 100%);color:#fff;border-radius:18px;padding:52px 34px;text-align:center;}
.gcb-final h2{color:#fff;font-size:1.9rem;margin:0 0 14px;}
.gcb-final p{color:#c7ced8;max-width:760px;margin:0 auto 26px;}
.gcb-final .gcb-note{color:#8f99a8;margin-top:18px;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .gcb-hero .gcb-wrap{grid-template-columns:1fr;}
  .gcb-hero-visual{max-width:560px;}
  .gcb-custom6,.gcb-mats,.gcb-finishes,.gcb-cap-grid,.gcb-phases,.gcb-qc{grid-template-columns:repeat(2,1fr);}
  .gcb-proc{grid-template-columns:repeat(2,1fr);}
  .gcb-quote{grid-template-columns:1fr;}
  .gcb-case-body{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .gcb-section{padding:44px 0;}
  .gcb-hero-title{font-size:1.75rem;}
  .gcb-custom6,.gcb-mats,.gcb-finishes,.gcb-cap-grid,.gcb-phases,.gcb-qc,.gcb-proc,.gcb-rel-groups{grid-template-columns:1fr;}
  .gcb-hero{background:linear-gradient(160deg,#12151a,#232831);}
}