/* GW audio design / Our Approach
   Page-specific stylesheet. Deploy as /css/gw/approach.css.
   Existing shared gwaudiodesign.css and site skin are preserved.
*/
.page-approach { --ap-ink:#242e38; --ap-muted:#606f7d; --ap-blue:#577b9f; --ap-line:#dce4ec; --ap-soft:#f5f8fa; }
.page-approach .gw-ap-intro { padding-top: 4.2rem !important; padding-bottom: 3.4rem !important; }
.page-approach .gw-ap-eyebrow { color:#6a87a3; font-size:.72rem; font-weight:700; letter-spacing:.12em; line-height:1.5; text-transform:uppercase; margin-bottom:1rem; }
.page-approach .gw-ap-display { font-size:clamp(2rem,3.9vw,3.4rem); font-weight:650; letter-spacing:-.045em; line-height:1.17; color:var(--ap-ink); margin-bottom:1.4rem; }
.page-approach .gw-ap-display span { color:var(--ap-blue); }
.page-approach .gw-ap-intro p:not(.gw-ap-eyebrow), .page-approach .gw-ap-copy { color:#52606e; font-size:1rem; line-height:1.86; }
.page-approach .gw-ap-intro .gw-ap-lead { font-size:1.16rem !important; font-weight:500; line-height:1.65 !important; color:#273746 !important; }
.page-approach .gw-ap-intro-panel { background:#253441; color:#fff; padding:1.8rem 1.9rem; border-top:4px solid #84a6c4; box-shadow:0 12px 34px rgba(30,49,63,.12); }
.page-approach .gw-ap-intro-panel > div { display:grid; grid-template-columns:2.6rem 1fr; column-gap:.65rem; padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,.14); }
.page-approach .gw-ap-intro-panel > div:last-child { border-bottom:none; }
.page-approach .gw-ap-panel-index { grid-row:span 2; font-size:.9rem; font-weight:700; color:#93bad6; }
.page-approach .gw-ap-intro-panel strong { font-size:1.04rem; line-height:1.25; }
.page-approach .gw-ap-intro-panel small { display:block; color:#c4d1db; margin-top:.45rem; font-size:.82rem; line-height:1.5; }
.page-approach .gw-ap-onpage { display:flex; flex-wrap:wrap; column-gap:1.7rem; row-gap:.7rem; border-top:1px solid var(--ap-line); padding-top:1.15rem; }
.page-approach .gw-ap-onpage a { color:#536e87; text-decoration:none; font-size:.84rem; font-weight:650; }
.page-approach .gw-ap-onpage a:hover, .page-approach .gw-ap-onpage a:focus-visible { text-decoration:underline; color:#2b5275; }
.page-approach .gw-ap-section { padding:5rem 0; scroll-margin-top:105px; }
.page-approach .gw-ap-tint { background:var(--ap-soft); }
.page-approach .gw-ap-title { font-size:clamp(1.65rem,2.5vw,2.35rem); font-weight:650; line-height:1.34; letter-spacing:-.035em; color:var(--ap-ink); margin:0 0 1.5rem; }
.page-approach .gw-ap-copy p { margin:0 0 1.3rem; }
.page-approach .gw-ap-copy strong { color:#2b3c4c; }
.page-approach .gw-ap-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#dbe4eb; border:1px solid #dbe4eb; margin-top:2.2rem !important; }
.page-approach .gw-ap-principles > div { background:#fff; padding:1.8rem 1.6rem; }
.page-approach .gw-ap-principles span { color:#7b9ab7; font-size:.78rem; font-weight:700; }
.page-approach .gw-ap-principles strong { color:var(--ap-ink); display:block; margin:.7rem 0; font-size:1.05rem; }
.page-approach .gw-ap-principles p { color:var(--ap-muted); margin:0; font-size:.88rem; line-height:1.7; }
.page-approach .gw-ap-cycle { padding:1.7rem; border:1px solid var(--ap-line); background:#fff; }
.page-approach .gw-ap-cycle-caption { color:#61788e; text-transform:uppercase; font-weight:700; font-size:.72rem; letter-spacing:.09em; margin-bottom:1.3rem; }
.page-approach .gw-ap-cycle-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; }
.page-approach .gw-ap-cycle-steps > div { background:#edf3f8; border-top:3px solid #81a3bf; padding:1.1rem .8rem 1.15rem; min-width:0; position:relative; }
.page-approach .gw-ap-cycle-steps > div:not(:last-child)::after { content:'›'; position:absolute; color:#6483a1; font-size:1.55rem; right:-.51rem; top:44%; line-height:1; z-index:2; font-weight:700; }
.page-approach .gw-ap-cycle-steps span { display:block; color:#7192b0; font-size:.74rem; font-weight:700; }
.page-approach .gw-ap-cycle-steps strong { display:block; color:#273a4b; font-size:.99rem; margin:.4rem 0; }
.page-approach .gw-ap-cycle-steps small { display:block; color:#627487; font-size:.73rem; line-height:1.5; }
.page-approach .gw-ap-cycle-note, .page-approach .gw-ap-diagram-caption { color:#71808b; font-size:.74rem; line-height:1.65; margin:1rem 0 0; }
.page-approach .gw-ap-support-note { font-size:.88rem; line-height:1.7; color:#6b7884; }
.page-approach .gw-ap-support-note a { color:#527a9c; text-decoration:underline; }
.page-approach .gw-ap-status { display:inline-flex; align-items:center; gap:.45rem; border:1px solid #cad9e6; background:#f2f7fb; color:#4f6f8a; padding:.48rem .72rem; font-size:.73rem; line-height:1.2; font-weight:650; letter-spacing:.02em; margin-bottom:1.6rem; }
.page-approach .gw-ap-status-dot { width:7px; height:7px; border-radius:50%; background:#7294b1; }
.page-approach .gw-ap-architecture { background:#f5f8fa; border:1px solid #e0e8ee; padding:1.7rem; text-align:center; color:#253948; }
.page-approach .gw-ap-architecture-top, .page-approach .gw-ap-architecture-middle, .page-approach .gw-ap-architecture-bottom { background:#fff; border:1px solid #d7e2eb; padding:1rem .6rem; font-weight:700; font-size:.92rem; }
.page-approach .gw-ap-architecture-top { border-top:3px solid #7597b3; }
.page-approach .gw-ap-architecture-middle { background:#e9f0f6; }
.page-approach .gw-ap-architecture-bottom { background:#2b4355; color:white; border-color:#2b4355; }
.page-approach .gw-ap-architecture small { display:block; font-size:.7rem; font-weight:400; line-height:1.5; margin-top:.45rem; color:#62788a; }
.page-approach .gw-ap-architecture-bottom small { color:#dbe6ee; }
.page-approach .gw-ap-arrow { height:22px; width:1px; background:#94a9ba; margin:0 auto; position:relative; }
.page-approach .gw-ap-arrow::after { content:''; position:absolute; bottom:0; left:-3px; width:7px; height:7px; border-right:1px solid #94a9ba; border-bottom:1px solid #94a9ba; transform:rotate(45deg); }
.page-approach .gw-ap-architecture-pair { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.page-approach .gw-ap-architecture-pair > div { padding:1rem .45rem; background:#eef4f8; border:1px solid #d8e3eb; }
.page-approach .gw-ap-architecture-pair strong { display:block; font-size:.85rem; }
.page-approach .gw-ap-usecase { background:#fff; border:1px solid #dde6ed; border-top:3px solid #90abc3; padding:2rem; }
.page-approach .gw-ap-usecase h3 { font-size:1.3rem; font-weight:650; color:var(--ap-ink); line-height:1.4; margin-bottom:1rem; }
.page-approach .gw-ap-usecase p:not(.gw-ap-eyebrow) { color:#586977; font-size:.95rem; line-height:1.8; }
.page-approach .gw-ap-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.6rem; margin:1.9rem 0; }
.page-approach .gw-ap-control-grid > div { border-left:3px solid #8caac2; padding:.2rem 0 .2rem 1.05rem; }
.page-approach .gw-ap-control-grid strong { display:block; font-size:.95rem; line-height:1.4; color:#293d4f; }
.page-approach .gw-ap-control-grid span { display:block; font-size:.85rem; color:#6a7885; line-height:1.6; margin-top:.35rem; }
.page-approach .gw-ap-client-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.page-approach .gw-ap-client-values > div { background:#fff; border-top:3px solid #8eabc4; padding:1.35rem 1.15rem; }
.page-approach .gw-ap-client-values strong { display:block; color:#2b4050; font-size:.92rem; margin-bottom:.5rem; }
.page-approach .gw-ap-client-values span { display:block; color:#697987; font-size:.83rem; line-height:1.65; }
.page-approach .gw-ap-closing { padding:2.05rem; background:#273947; color:#e2eaf0; display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.page-approach .gw-ap-closing h3 { color:#fff; font-size:1.38rem; font-weight:650; }
.page-approach .gw-ap-closing p { max-width:660px; font-size:.92rem; line-height:1.8; color:#d3dfe7; }
.page-approach .gw-ap-cta-actions { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; }
.page-approach .gw-ap-text-link { font-size:.84rem; color:#cde0f0; text-decoration:none; }
.page-approach .gw-ap-text-link:hover { color:#fff; text-decoration:underline; }
@media(max-width:991px) {
  .page-approach .gw-ap-section { padding:3.7rem 0; }
  .page-approach .gw-ap-cycle-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-approach .gw-ap-cycle-steps > div:nth-child(2)::after { display:none; }
  .page-approach .gw-ap-client-values { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
  .page-approach .gw-ap-intro { padding-top:3rem !important; }
  .page-approach .gw-ap-principles { grid-template-columns:1fr; }
  .page-approach .gw-ap-control-grid { grid-template-columns:1fr; }
  .page-approach .gw-ap-closing { flex-direction:column; align-items:flex-start; padding:1.5rem; }
  .page-approach .gw-ap-title { margin-bottom:.8rem; }
}
@media(max-width:480px) {
  .page-approach .gw-ap-cycle { padding:1rem; }
  .page-approach .gw-ap-cycle-steps { gap:.5rem; }
  .page-approach .gw-ap-cycle-steps > div { padding:.9rem .5rem; }
  .page-approach .gw-ap-architecture { padding:1rem; }
  .page-approach .gw-ap-client-values { grid-template-columns:1fr; }
  .page-approach .gw-ap-onpage { column-gap:1.2rem; }
}
@media(prefers-reduced-motion:reduce) { .page-approach * { scroll-behavior:auto !important; } }