/* Business pages: site navigation, the one-page homepage (hero, clients, projects, services) and Contact.
   Loaded after /style.css on every page. Uses the tokens defined there. */

/* Second Brain colour (gold). Light values here, dark values below */
:root { --gold: #8A6410; --gold-soft: #F6ECCF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #E6C36A; --gold-soft: #332B17; } }
:root[data-theme="dark"] { --gold: #E6C36A; --gold-soft: #332B17; }

/* Site navigation: three items, always visible, no script */
.site-nav { display: flex; align-items: center; gap: 1.25rem; font-size: .97rem; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav .btn-nav { padding: .5rem 1rem; font-size: .92rem; color: var(--accent-ink); }
.site-nav .btn-nav:hover { color: var(--accent-ink); }
.site-nav .btn-nav[aria-current="page"] { color: var(--accent-ink); }
@media (max-width: 460px) {
  .brand-name { display: none; }
  .site-nav { gap: .5rem .6rem; font-size: .84rem; flex-wrap: wrap; }
  .site-nav .btn-nav { padding: .45rem .65rem; font-size: .84rem; white-space: nowrap; }
}

/* In-page links (#projects, #clients) land with a little room above the heading */
.home .sec { scroll-margin-top: 1.5rem; }
.home .hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 16ch; }

/* Clients/Companies: a bulleted list in two columns of four (one column on small phones) */
.client-list { columns: 2; column-gap: 3rem; max-width: 40rem; margin: 0; padding-left: 1.25rem; }
.client-list li { break-inside: avoid; padding: .3rem 0; font-size: 1.05rem; }
.client-list li::marker { color: var(--accent); }

/* Projects: the last two cards sit behind a native show-more toggle (no script) */
.more-projects summary { display: inline-block; list-style: none; cursor: pointer; font-weight: 600; color: var(--accent); }
.more-projects summary::-webkit-details-marker { display: none; }
.more-projects summary:hover { text-decoration: underline; }
.more-projects .when-open, .more-projects[open] .when-closed { display: none; }
.more-projects[open] .when-open { display: inline; }
.more-projects > .plist { margin-top: 1rem; }

/* Services */
.sec-intro { margin: 0; max-width: 42rem; color: var(--muted); }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.offer h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; margin: 0; }
.offer p { margin: 0; color: var(--muted); font-size: .97rem; }

/* Inner pages */
.page-head { display: flex; flex-direction: column; gap: 1rem; padding-top: clamp(1rem, 4vw, 2.5rem); }
.page-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.04; letter-spacing: -.03em; margin: 0; }
.page-head .lede { max-width: 40rem; }

/* Project cards */
.plist { display: flex; flex-direction: column; gap: 1rem; }
.pcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem; border-radius: 1.1rem; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.pcard:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }
.pcard > img { width: 4rem; height: 4rem; border-radius: 22%; box-shadow: 0 1px 2px rgba(20, 30, 25, .12), 0 6px 16px rgba(20, 30, 25, .08); }
.pcard-body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.pcard-top { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.pcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em; margin: 0; }
.pcard p { margin: 0; color: var(--muted); max-width: 44rem; }
.pcard .project-cta { align-self: flex-start; margin-top: .3rem; text-decoration: none; }
.glyph { width: 4rem; height: 4rem; border-radius: 22%; display: grid; place-items: center; background: var(--soft); }
.glyph svg { width: 2.5rem; height: 2.5rem; }
.glyph .s { fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.glyph .f { fill: var(--c); }
.glyph .f2 { fill: var(--c); opacity: .35; }
.g-green { --c: var(--accent); background: var(--soft); }
.g-blue { --c: var(--blue); background: color-mix(in srgb, var(--blue) 14%, var(--surface)); }
.g-life { --c: var(--life); background: var(--life-soft); }
.g-scout { --c: var(--scout); background: var(--scout-soft); }
.g-gold { --c: var(--gold); background: var(--gold-soft); }
.g-grey { --c: var(--muted); background: color-mix(in srgb, var(--muted) 14%, var(--surface)); }

/* Status pill (only the two prototypes carry one) */
.pill { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; padding: .25rem .65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.pill.proto { color: var(--life); background: var(--life-soft); }

/* Contact */
.contact { max-width: 36rem; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.2rem; padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field input, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: .7rem; padding: .7rem .85rem; width: 100%; }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }
.form-card .btn { align-self: flex-start; cursor: pointer; font: inherit; font-weight: 600; }
/* The contact form's spam trap: off-screen for people (a bot filling it in is sent nowhere), not display: none, which some bots skip. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer with secondary links */
.site-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.25rem; }
.site-foot nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-foot a { text-decoration: none; color: var(--muted); }
.site-foot a:hover { color: var(--blue); }

@media (max-width: 860px) {
  .offers { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .pcard { grid-template-columns: 1fr; }
  .client-list { columns: 1; }
}