/* hehe.software — services, locations, guides and their hubs (same quiet system as home) */

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: calc(var(--bar-h) + clamp(28px, 6vh, 64px)) var(--gutter) 0; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); transition: color .2s ease; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--ink); }

/* ---------- hero ---------- */
.s-hero { padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(36px, 5vw, 72px); }
.s-hero__kicker { margin: 0 0 clamp(16px, 2vw, 26px); color: var(--ink-2); }
.s-hero__title { margin: 0; max-width: 16ch; font: 400 clamp(52px, 8.4vw, 150px)/.92 var(--sans); letter-spacing: -.058em; }
.s-hero__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(28px, 4vw, 56px); }
.s-hero__lede { grid-column: 1 / span 6; margin: 0; max-width: 48ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--ink-2); }
.s-hero__cta { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
@media (max-width: 860px) { .s-hero__lede, .s-hero__cta { grid-column: 1 / -1; } .s-hero__cta { margin-top: 22px; } }

.s-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 0 var(--gutter); border-top: 1px solid var(--line); }
.s-facts div { padding: 16px 0 20px; border-bottom: 1px solid var(--line); }
.s-facts dt { margin: 0 0 8px; color: var(--ink-3); }
.s-facts dd { margin: 0; font-size: clamp(16px, 1.2vw, 19px); letter-spacing: -.02em; }
@media (max-width: 860px) { .s-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.s-media { position: relative; margin: clamp(28px, 4vw, 56px) var(--gutter) 0; aspect-ratio: 21 / 8; border-radius: var(--radius); overflow: hidden; background: #15141c; }
.s-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .s-media { aspect-ratio: 16 / 10; } }

/* ---------- body: numbered sections ---------- */
.s-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: clamp(80px, 10vw, 160px) var(--gutter) clamp(40px, 5vw, 80px); }
.s-body__intro { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--bar-h) + 24px); }
.s-body__intro h2 { margin: 0 0 16px; font: 400 clamp(32px, 3.4vw, 56px)/1 var(--sans); letter-spacing: -.05em; }
.s-body__intro p { margin: 0; max-width: 32ch; color: var(--ink-2); }
.s-body__list { grid-column: 6 / span 7; display: grid; gap: clamp(40px, 4.4vw, 64px); }
.s-sec { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.s-sec__n { margin: .6em 0 0; color: var(--ink-3); }
.s-sec h3 { margin: 0 0 14px; font: 400 clamp(25px, 2.2vw, 36px)/1.06 var(--sans); letter-spacing: -.04em; }
.s-sec p { margin: 0 0 1em; max-width: 62ch; color: var(--ink-2); font-size: clamp(16px, 1.15vw, 18px); }
.s-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 62ch; }
.s-sec li { position: relative; padding-left: 22px; font-size: clamp(16px, 1.12vw, 18px); }
.s-sec li::before { content: ""; position: absolute; left: 0; top: .68em; width: 10px; height: 1.5px; background: var(--ink); }
.s-sec table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 15px; }
.s-sec th, .s-sec td { text-align: left; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.s-sec th { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.s-sec .table-wrap { overflow-x: auto; }
@media (max-width: 860px) {
  .s-body__intro, .s-body__list { grid-column: 1 / -1; }
  .s-body__intro { position: relative; top: 0; margin-bottom: 44px; }
}

/* ---------- article (guides) ---------- */
.g-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 var(--gutter); padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.g-article { max-width: 760px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(40px, 5vw, 80px); }
.g-article h2 { margin: 2.2em 0 .6em; font: 400 clamp(28px, 2.6vw, 42px)/1.05 var(--sans); letter-spacing: -.045em; }
.g-article h2:first-child { margin-top: 0; }
.g-article p, .g-article li { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.65; color: #23232e; }
.g-article p { margin: 0 0 1.1em; }
.g-article ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.g-article li { margin-bottom: .4em; }
.g-article table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: 15px; }
.g-article th, .g-article td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.g-article th { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.g-article .table-wrap { overflow-x: auto; }
.g-sources { margin-top: 3em; padding-top: 20px; border-top: 1px solid var(--line); }
.g-sources h2 { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.g-sources ol { padding-left: 1.2em; margin: 0; }
.g-sources li { font-size: 15px; color: var(--ink-2); }
.g-sources a { border-bottom: 1px solid var(--line); }

/* ---------- ways to work ---------- */
.s-ways { padding: clamp(40px, 6vw, 90px) var(--gutter); }
.s-ways h2, .s-proof h2, .s-faq h2, .s-links h2 { margin: 0 0 clamp(20px, 2.6vw, 36px); font: 400 clamp(34px, 4vw, 68px)/1 var(--sans); letter-spacing: -.05em; }
.s-ways ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.s-ways li { padding: clamp(18px, 1.8vw, 26px); border-radius: var(--radius); background: #fff; display: grid; gap: 10px; align-content: start; }
.s-ways b { font: 400 clamp(20px, 1.6vw, 26px)/1.1 var(--sans); letter-spacing: -.035em; }
.s-ways span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 960px) { .s-ways ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .s-ways ul { grid-template-columns: 1fr; } }

/* ---------- our own products ---------- */
.s-proof { padding: clamp(40px, 6vw, 90px) var(--gutter); }
.s-proof > p { margin: -12px 0 clamp(24px, 3vw, 40px); max-width: 52ch; color: var(--ink-2); }
.s-proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.s-proof a { display: block; }
.s-proof figure { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: #15141c; }
.s-proof img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.s-proof a:hover img { transform: scale(1.04); }
.s-proof p { margin: 12px 0 0; font: 400 clamp(20px, 1.7vw, 26px)/1.1 var(--sans); letter-spacing: -.035em; }
.s-proof small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 14px; letter-spacing: 0; }
@media (max-width: 760px) { .s-proof ul { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.s-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: clamp(60px, 8vw, 120px) var(--gutter); }
.s-faq h2 { grid-column: 1 / span 4; }
.s-faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.s-faq details { border-bottom: 1px solid var(--line); }
.s-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0;
  font: 400 clamp(19px, 1.5vw, 24px)/1.25 var(--sans); letter-spacing: -.03em;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 18px; transition: transform .4s var(--ease-out); }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq details p { margin: 0 0 22px; max-width: 64ch; color: var(--ink-2); font-size: clamp(16px, 1.15vw, 18px); }
@media (max-width: 860px) { .s-faq h2, .s-faq__list { grid-column: 1 / -1; } }

/* ---------- link lists (related, services grid, locations) ---------- */
.s-links { padding: clamp(40px, 6vw, 90px) var(--gutter); }
.s-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s-links a { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; transition: background .25s ease, color .25s ease; }
.s-links a::after { content: "→"; color: var(--ink-3); transition: color .25s ease; }
.s-links a:hover { background: var(--ink); color: #fff; }
.s-links a:hover::after { color: var(--accent); }

/* ---------- call to action ---------- */
.s-cta { margin: clamp(40px, 6vw, 90px) var(--gutter) 0; padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 64px); border-radius: var(--radius); background: var(--ink); color: #fff; }
.s-cta h2 { margin: 0 0 18px; max-width: 14ch; font: 400 clamp(44px, 7vw, 120px)/.92 var(--sans); letter-spacing: -.058em; }
.s-cta p { margin: 0 0 28px; max-width: 46ch; color: rgba(255, 255, 255, .66); font-size: clamp(16px, 1.25vw, 19px); }
.s-cta .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.s-cta .pill:not(.pill--dark) { background: #fff; }
.s-cta .pill--accent { background: var(--accent); color: var(--ink); }
.s-cta .pill--accent i { background: var(--ink); }

/* ---------- hubs ---------- */
.h-hero { padding: calc(var(--bar-h) + clamp(48px, 9vh, 120px)) var(--gutter) clamp(40px, 6vw, 90px); }
.h-hero h1 { margin: 0; font: 400 clamp(64px, 12vw, 220px)/.86 var(--sans); letter-spacing: -.065em; }
.h-hero p { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 52ch; font-size: clamp(17px, 1.35vw, 21px); color: var(--ink-2); }
.h-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: clamp(28px, 3vw, 44px) var(--gutter); border-top: 1px solid var(--line); margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
.h-group__head { grid-column: 1 / span 4; }
.h-group__head h2 { margin: 0 0 8px; font: 400 clamp(28px, 2.6vw, 44px)/1 var(--sans); letter-spacing: -.045em; }
.h-group__head p { margin: 0; max-width: 30ch; color: var(--ink-2); }
.h-group ul { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; }
.h-group li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.h-group li:last-child a { border-bottom: 0; }
.h-group li b { font: 400 clamp(20px, 1.8vw, 28px)/1.15 var(--sans); letter-spacing: -.035em; transition: letter-spacing .5s var(--ease-out); }
.h-group li span { color: var(--ink-3); font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.h-group li a:hover b { letter-spacing: -.02em; }
@media (max-width: 860px) { .h-group__head, .h-group ul { grid-column: 1 / -1; } .h-group ul { margin-top: 18px; } .h-group li span { display: none; } }