.cap-hub { background: var(--paper); }
.cap-hub-hero { padding: 155px 0 82px; overflow: hidden; background: radial-gradient(circle at 78% 34%, rgba(255, 167, 38, .19), transparent 28%), linear-gradient(145deg, var(--paper), #f3e5d5); }
.cap-hub-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(430px, 1.05fr); align-items: center; gap: clamp(48px, 7vw, 100px); }
.cap-hub-hero h1 { max-width: 680px; margin-bottom: 27px; font-size: clamp(3.7rem, 6.8vw, 6.65rem); letter-spacing: -.06em; line-height: .93; }
.cap-hub-hero h1 em { color: var(--sun-deep); font-weight: 400; }
.cap-hub-hero-grid > div > p:not(.eyebrow) { max-width: 650px; color: var(--earth-soft); font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.33rem); line-height: 1.65; }
.cap-hub-actions { display: flex; flex-wrap: wrap; gap: 11px; margin: 31px 0 26px; }
.cap-hub-hero ul { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cap-hub-hero li { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 30px; padding: 7px 11px; color: var(--earth-soft); background: rgba(255, 254, 253, .64); font-size: .68rem; font-weight: 750; }
.cap-hub-hero li span { color: var(--sun-deep); }
.cap-hub-hero figure { position: relative; margin: 0; }
.cap-hub-hero figure::before { content: ""; position: absolute; z-index: 0; inset: -22px 38px 28px -22px; border: 1px solid rgba(93, 64, 55, .17); border-radius: 54% 46% 48% 52% / 48% 54% 46% 52%; transform: rotate(-2deg); }
.cap-hub-hero figure::after { content: "✦"; position: absolute; right: -18px; bottom: 9%; display: grid; width: 74px; height: 74px; place-items: center; border-radius: 50%; color: var(--earth); background: var(--sun); box-shadow: 0 17px 38px rgba(93, 64, 55, .2); font-family: var(--serif); font-size: 1.4rem; }
.cap-hub-hero figure img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1.12; border-radius: 52% 48% 50% 50% / 45% 55% 45% 55%; object-fit: cover; box-shadow: 0 32px 90px rgba(70, 43, 32, .18); }

.cap-hub-nav { position: sticky; z-index: 20; top: 0; border-top: 1px solid rgba(93, 64, 55, .1); border-bottom: 1px solid var(--line); background: rgba(255, 250, 242, .94); backdrop-filter: blur(14px); }
.cap-hub-nav .container { display: flex; justify-content: center; gap: clamp(18px, 4vw, 47px); overflow-x: auto; scrollbar-width: none; }
.cap-hub-nav .container::-webkit-scrollbar { display: none; }
.cap-hub-nav a { flex: 0 0 auto; padding: 17px 0 15px; color: var(--earth-soft); font-size: .66rem; font-weight: 800; letter-spacing: .05em; }
.cap-hub-nav a:hover { color: var(--earth); }

.cap-hub-intro { padding: 115px 0 105px; background: var(--white); }
.cap-hub-reading { max-width: 850px; }
.cap-hub-reading h2 { margin-bottom: 37px; font-size: clamp(2.9rem, 5vw, 5rem); }
.cap-hub-reading > p:not(.eyebrow) { color: #624f47; font-family: var(--serif); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.82; }
.cap-hub-reading aside { display: grid; grid-template-columns: 52px 1fr; gap: 21px; margin-top: 42px; padding: 27px 29px; border: 1px solid rgba(255, 167, 38, .32); border-radius: 8px; background: var(--sun-soft); }
.cap-hub-reading aside > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: white; background: var(--sun-deep); font-family: var(--serif); }
.cap-hub-reading aside p { margin: 0; color: var(--earth); font-family: var(--serif); font-size: 1.02rem; }

.cap-hub-fog { padding: 110px 0 120px; border-top: 1px solid var(--line); }
.cap-hub-fog .split-heading > p { margin: 0; color: var(--earth-soft); }
.cap-fog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cap-fog-grid article { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; padding: clamp(26px, 4vw, 43px); background: var(--white); }
.cap-fog-grid article > span { display: inline-grid; width: 38px; height: 38px; place-items: center; margin-bottom: 42px; border-radius: 50%; color: var(--earth); background: var(--sun-soft); font-family: var(--serif); }
.cap-fog-grid article h3 { margin-bottom: 17px; font-size: clamp(1.75rem, 2.8vw, 2.45rem); }
.cap-fog-grid article p { color: var(--earth-soft); font-size: .82rem; line-height: 1.75; }
.cap-fog-grid article strong { display: block; margin: 27px 0 7px; color: var(--sun-deep); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
.cap-fog-grid article strong + p { margin: 0; color: var(--earth); font-family: var(--serif); font-size: .95rem; }

.cap-hub-method { padding: 120px 0; color: rgba(255,255,255,.75); background: #30221e; }
.cap-hub-method-grid { display: grid; grid-template-columns: minmax(270px, .65fr) minmax(0, 1.35fr); gap: clamp(65px, 10vw, 150px); }
.cap-method-sticky { position: sticky; top: 95px; align-self: start; }
.cap-method-sticky h2 { margin-bottom: 27px; color: white; font-size: clamp(3.2rem, 5.5vw, 5.5rem); letter-spacing: -.055em; }
.cap-method-sticky > p:last-child { max-width: 330px; color: rgba(255,255,255,.56); }
.cap-method-steps article { display: grid; grid-template-columns: 54px 1fr; gap: 25px; padding: 7px 0 51px; border-bottom: 1px solid rgba(255,255,255,.14); }
.cap-method-steps article + article { padding-top: 48px; }
.cap-method-steps article > span { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--sun); font-family: var(--serif); }
.cap-method-steps small { color: var(--sun); font-size: .56rem; font-weight: 900; letter-spacing: .13em; }
.cap-method-steps h3 { margin: 8px 0 20px; color: white; font-size: clamp(2rem, 3vw, 2.8rem); }
.cap-method-steps p { color: rgba(255,255,255,.62); font-size: .8rem; line-height: 1.8; }

.cap-hub-library { padding: 120px 0; background: var(--white); }
.cap-hub-library .split-heading > p { margin: 0; color: var(--earth-soft); }
.cap-paths { border-top: 1px solid var(--line); }
.cap-paths > a { display: grid; grid-template-columns: 58px minmax(0, 1fr) 30px; align-items: center; gap: 25px; padding: 29px 10px; border-bottom: 1px solid var(--line); color: var(--earth); transition: padding .25s ease, background .25s ease; }
.cap-paths > a:hover { padding-inline: 24px; background: var(--paper); }
.cap-paths > a > span { color: var(--sun-deep); font-family: var(--serif); font-size: 1rem; }
.cap-paths small { color: var(--sun-deep); font-size: .53rem; font-weight: 900; letter-spacing: .11em; }
.cap-paths h3 { margin: 8px 0 6px; font-size: clamp(1.65rem, 3vw, 2.45rem); }
.cap-paths p { max-width: 760px; margin: 0; color: var(--earth-soft); font-size: .72rem; }
.cap-paths b { color: var(--sun-deep); font-size: 1.25rem; }

.cap-hub-tools { padding: 115px 0; color: rgba(255,255,255,.7); background: linear-gradient(135deg, #5d4037, #3f2a25); }
.cap-hub-tools > .container { display: grid; grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(55px, 8vw, 110px); }
.cap-hub-tools h2 { color: white; font-size: clamp(2.8rem, 4.6vw, 4.65rem); }
.cap-hub-tools > .container > div:first-child > p:last-child { color: rgba(255,255,255,.56); }
.cap-tool-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.cap-tool-cards a { display: flex; align-items: flex-start; flex-direction: column; min-height: 340px; padding: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: white; background: rgba(255,255,255,.075); transition: transform .25s ease, background .25s ease; }
.cap-tool-cards a:hover { transform: translateY(-5px); background: rgba(255,255,255,.11); }
.cap-tool-cards a > span { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: auto; border-radius: 50%; color: var(--earth); background: var(--sun); font-family: var(--serif); }
.cap-tool-cards small { margin-top: 38px; color: var(--sun); font-size: .54rem; font-weight: 900; letter-spacing: .12em; }
.cap-tool-cards h3 { margin: 9px 0 13px; color: white; font-size: 2rem; }
.cap-tool-cards p { color: rgba(255,255,255,.57); font-size: .72rem; }
.cap-tool-cards strong { margin-top: 14px; font-size: .68rem; }

.cap-hub-faq { padding: 120px 0; background: var(--paper); }
.cap-hub-faq-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: clamp(60px, 9vw, 130px); }
.cap-hub-faq h2 { font-size: clamp(2.8rem, 4.6vw, 4.7rem); }
.cap-hub-faq-grid > div:first-child > p:last-child { color: var(--earth-soft); }
.cap-hub-faq details { border-top: 1px solid var(--line); }
.cap-hub-faq details:last-child { border-bottom: 1px solid var(--line); }
.cap-hub-faq summary { display: grid; grid-template-columns: 1fr 25px; gap: 20px; padding: 24px 0; color: var(--earth); cursor: pointer; font-family: var(--serif); font-size: 1.08rem; line-height: 1.35; }
.cap-hub-faq summary::marker { content: ""; }
.cap-hub-faq summary span { color: var(--sun-deep); font-family: var(--sans); }
.cap-hub-faq details p { margin: 0 35px 25px 0; color: var(--earth-soft); font-size: .76rem; line-height: 1.75; }

@media (max-width: 1000px) {
  .cap-hub-hero-grid, .cap-hub-method-grid, .cap-hub-tools > .container, .cap-hub-faq-grid { grid-template-columns: 1fr; }
  .cap-hub-hero-grid { gap: 70px; }
  .cap-hub-hero figure { width: min(660px, 92%); margin-inline: auto; }
  .cap-method-sticky { position: static; }
  .cap-method-sticky > p:last-child { max-width: 560px; }
  .cap-hub-tools > .container { align-items: start; }
}

@media (max-width: 700px) {
  .cap-hub-hero { padding: 125px 0 68px; }
  .cap-hub-hero h1 { font-size: clamp(3.3rem, 15vw, 4.7rem); }
  .cap-hub-actions { align-items: stretch; flex-direction: column; }
  .cap-hub-actions .button { width: 100%; }
  .cap-hub-hero ul { align-items: stretch; flex-direction: column; }
  .cap-hub-hero figure::after { right: -8px; width: 57px; height: 57px; }
  .cap-hub-nav .container { justify-content: flex-start; }
  .cap-hub-intro, .cap-hub-fog, .cap-hub-method, .cap-hub-library, .cap-hub-tools, .cap-hub-faq { padding: 78px 0; }
  .cap-hub-reading aside, .cap-method-steps article { grid-template-columns: 1fr; }
  .cap-fog-grid, .cap-tool-cards { grid-template-columns: 1fr; }
  .cap-fog-grid article > span { margin-bottom: 27px; }
  .cap-paths > a { grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; padding-inline: 0; }
  .cap-paths > a:hover { padding-inline: 8px; }
  .cap-tool-cards a { min-height: 310px; }
}