/* =========================================================
   OPAL COLLECTIVE — Inner pages
   Extends css/style.css (homepage). Uses the same tokens.
   ========================================================= */

/* ---------- Page hero (re-uses .hero look from the homepage) ---------- */
.phero{padding-bottom:clamp(46px,5.5vw,78px)}
.phero .hero-grid{align-items:center}
.phero h1{margin-top:18px;font-size:clamp(2.3rem,4.3vw,3.9rem);text-wrap:balance}
.phero .hero-sub + .hero-sub{margin-top:14px}
.phero .hero-media{height:clamp(340px,46vh,440px)}
.phero .hm-main.full{width:100%}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.62)}
.crumbs a{transition:color .25s}.crumbs a:hover{color:var(--mint)}
.crumbs .sep{opacity:.45}.crumbs b{color:#fff;font-weight:700}
.pchip{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:.82rem;font-weight:700}
.pchip .i{width:16px;height:16px;color:var(--teal)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;font-size:.9rem;color:var(--mint)}
.hero-badge .pb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(168,221,208,.12)}
.hero-badge .pb .i{width:17px;height:17px}
.hero-badge + h1{margin-top:14px}

/* ---------- Section heads / splits ---------- */
.sh{max-width:760px;margin-bottom:clamp(25px,2.6vw,30px)}
.sh .h2{margin-top:16px}
.sh .lead{margin-top:14px;max-width:62ch}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.split>*{min-width:0}
.split .h2{margin-top:16px}
.split .lead{margin-top:16px}
.split .lead + .lead{margin-top:12px}
.stk{display:grid;gap:20px}
.note-line{margin-top:20px;padding-left:18px;border-left:3px solid var(--mint);font-weight:600;color:var(--ink);max-width:52ch}

/* ---------- Check-list cards ---------- */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.chk{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px)}
.chk h3{font-size:clamp(1.25rem,2vw,1.5rem);margin-bottom:12px}
.chk li{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);color:var(--text);line-height:1.5}
.chk li:first-child{border-top:0}
.ck{width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;flex:none;margin-top:1px}
.ck .i{width:13px;height:13px;stroke-width:3}
.chk.dark{background:var(--forest);border-color:var(--forest);color:rgba(255,255,255,.75)}
.chk.dark h3{color:#fff}.chk.dark li{border-color:var(--line-d);color:rgba(255,255,255,.78)}
.chk.sand{background:var(--sand-l);border-color:transparent}

/* ---------- Icon cards ---------- */
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,255px),1fr));gap:14px}
.icard{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 24px;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.icard:hover{transform:translateY(-5px);box-shadow:0 26px 44px -30px rgba(20,33,29,.35);border-color:rgba(20,33,29,.22)}
.icard .ic{width:46px;height:46px;border-radius:14px;background:var(--mint-l);color:var(--ink);display:grid;place-items:center;margin-bottom:16px}
.icard h3{font-size:1.1rem;line-height:1.3;letter-spacing:-.02em}
.icard p{margin-top:8px;font-size:.95rem}
.icard .num{position:absolute;right:20px;top:18px;font:italic 1.5rem var(--serif);color:var(--mauve)}

/* ---------- Quote band ---------- */
.qband{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:var(--sand-l);padding:clamp(32px,5.5vw,72px);display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,48px);align-items:start}
.qband .qm{font:italic clamp(5rem,10vw,9rem)/.7 var(--serif);color:var(--mauve);opacity:.55}
.qband blockquote{margin:0;font:400 clamp(1.6rem,3.1vw,2.7rem)/1.25 var(--serif);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.qband cite{display:block;margin-top:18px;font:700 .82rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rose);font-style:normal}
.qband.dark{background:var(--forest)}.qband.dark blockquote{color:#fff}.qband.dark .qm{color:var(--mint)}.qband.dark cite{color:var(--mint)}

/* ---------- Step cards ---------- */
.steps-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stepc{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.stepc figure{aspect-ratio:16/10;overflow:hidden;background:var(--sand-l)}
.stepc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.stepc:hover img{transform:scale(1.05)}
.stepc .body{padding:22px 24px 28px}
.stepc .sn{position:absolute;left:16px;top:16px;min-width:44px;height:44px;padding:0 12px;border-radius:999px;background:var(--forest);color:var(--mint);display:grid;place-items:center;font:italic 1.35rem var(--serif)}
.stepc h3{font-size:1.25rem;margin-bottom:8px}
.stepc p{font-size:.97rem}
.stepc .note{margin-top:10px;font-size:.9rem;color:var(--muted)}
.stepc.go{background:var(--forest);border-color:var(--forest);color:rgba(255,255,255,.72);justify-content:center;padding:clamp(26px,3vw,40px);gap:14px}
.stepc.go h3{color:#fff;font:400 clamp(1.7rem,2.6vw,2.3rem)/1.15 var(--serif);letter-spacing:-.01em}
.stepc.go .btn{margin-top:8px;align-self:flex-start}

/* mini steps strip (service pages) */
.mini{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:m;border-top:1px solid var(--line)}
.mini li{position:relative;padding:22px 18px 8px 0;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.3;font-size: 15px;}
.mini li::before{counter-increment:m;content:"0" counter(m);display:block;font:italic 1.9rem var(--serif);color:var(--mauve);margin-bottom:6px}
.mini li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:36px;background:var(--mint)}

/* ---------- Ways-to-work chips ---------- */
.ways{display:flex;flex-wrap:wrap;gap:10px}
.ways li{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}
.ways li .ck{width:22px;height:22px}

/* ---------- Service cards ---------- */
.ogrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.ocard{grid-column:span 2;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.ocard:nth-child(n+4){grid-column:span 3}
.ogrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ogrid.four .ocard,.ogrid.four .ocard:nth-child(n+4){grid-column:auto}
.ocard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(20,33,29,.45)}
.ocard figure{aspect-ratio:16/10;overflow:hidden;background:var(--sand-l)}
.ocard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ocard:hover img{transform:scale(1.06)}
.ocard .body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.ocard .tag{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;color:var(--teal);letter-spacing:.02em}
.ocard .tag .i{width:16px;height:16px}
.ocard h3{font-size:1.25rem;line-height:1.25}
.ocard p{font-size:.95rem}
.ocard .more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.ocard .more .bi{width:34px;height:34px;border-radius:50%;background:var(--mint);display:grid;place-items:center;transition:transform .45s var(--ease)}
.ocard .more .i{width:16px;height:16px;stroke-width:2.2}
.ocard:hover .more .bi{transform:translateX(4px)}

/* ---------- CTA band (sends people to Contact) ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:var(--forest);color:#fff;padding:clamp(34px,6vw,80px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:center}
.cta::before{content:"";position:absolute;z-index:-1;width:min(720px,110vw);aspect-ratio:1;right:-14%;top:-60%;background:radial-gradient(closest-side,rgba(168,221,208,.3),rgba(168,221,208,0) 70%)}
.cta::after{content:"";position:absolute;z-index:-1;width:min(560px,100vw);aspect-ratio:1;left:-12%;bottom:-70%;background:radial-gradient(closest-side,rgba(154,127,138,.34),rgba(154,127,138,0) 70%)}
.cta>*{min-width:0}
.cta h2{color:#fff;font-size:clamp(2rem,3.8vw,3.3rem);text-wrap:balance}
.cta h2 .it{color:var(--mint)}
.cta p{margin-top:14px;color:rgba(255,255,255,.72);max-width:52ch}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.cta .btn-glass{--f:#fff}

/* ---------- Why block ---------- */
.why2{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.why2>*{min-width:0}
.why2 .h2{margin-top:16px}
.why2 p + p{margin-top:14px}
.why2 .big{margin-top:22px;font:400 clamp(1.45rem,2.4vw,2.1rem)/1.3 var(--serif);color:var(--ink);text-wrap:balance}

/* ---------- Page-specific tweaks ---------- */
.sec.tight{padding-top:clamp(40px,5vw,64px)}
.sec.band{background:var(--paper)}
.contact-sec{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(60px,7vw,90px)}
.plan-sec{padding-top:clamp(46px,5vw,70px)}
.res-page{padding-top:clamp(46px,5vw,70px)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split,.why2,.cta{grid-template-columns:1fr}
  .cta-btns{justify-content:flex-start}
  .steps-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ogrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ocard,.ocard:nth-child(n+4){grid-column:auto}
  .ogrid:not(.four) .ocard:last-child{grid-column:1/-1}
  .ogrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phero .hero-media{height:400px}
}
@media (max-width:640px){
  .steps-g,.ogrid,.ogrid.four{grid-template-columns:1fr}
  .ogrid:not(.four) .ocard:last-child{grid-column:auto}
  .mini{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qband{grid-template-columns:1fr}
  .qband .qm{font-size:4.5rem}
  .phero .hero-media{height:330px}
  .cta-btns .btn{width:100%}
  .ways li{font-size:.9rem}
  .chk-grid{grid-template-columns:1fr}
  .crumbs{font-size:.8rem}
}

/* ---------- Fixes ---------- */
.crumbs{margin-bottom:20px}
.wiz-nav .btn{max-width:100%}
@media (max-width:480px){
  .wiz-nav{flex-wrap:wrap}
  .wiz-nav .wiz-count{order:3;width:100%;text-align:center}
  .wiz-nav .btn{flex:1 1 auto;min-width:0}
}