/* Unlock Integrations v7 "Linkwork": shared tokens and components. Loads after every v6 sheet and
   before the per-page v7 sheets. Spec: design/v7-direction.md. Only the foundation owner edits this. */

:root {
  --v7-ink:#0e1416; --v7-slate:#131b1d; --v7-panel:#18221f; --v7-line-dark:rgba(220,232,226,.13);
  --v7-paper:#f2f3ee; --v7-paper-2:#e8ece5; --v7-line-light:#d3dbd2;
  --v7-text:#f2f3ee; --v7-text-2:#c3cdc7; --v7-text-3:#8f9c96;
  --v7-ink-text:#142220; --v7-ink-2:#46574f; --v7-ink-3:#56645e;
  --v7-mint:#85edc5; --v7-green:#18674e;
  --v7-display:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v7-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v7-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --v7-r-control:4px; --v7-r-panel:10px;
  --v7-space:clamp(88px, 10vw, 148px);
  /* v9.1 shared scale: every family uses these instead of its own numbers. */
  --v7-space-tight:calc(var(--v7-space) * .62);
  --v7-h1:600 clamp(42px, 5.2vw, 68px)/1.04 var(--v7-display);
  --v7-h2:600 clamp(32px, 3.4vw, 52px)/1.08 var(--v7-display);
  --v7-h3:600 clamp(19px, 1.5vw, 22px)/1.3 var(--v7-display);
  --v7-tile:48px; --v7-tile-sm:40px; --v7-tile-lg:64px; --v7-tile-r:12px; --v7-tile-icon:22px;
  --v7-ease:cubic-bezier(.2,.7,.1,1);
  /* Context colours: dark by default; paper sections flip them. */
  --v7-fg:var(--v7-text); --v7-fg-2:var(--v7-text-2); --v7-fg-3:var(--v7-text-3);
  --v7-accent:var(--v7-mint); --v7-rule:var(--v7-line-dark); --v7-surface:var(--v7-panel);
}

/* Sections */
.v7-section { position:relative; padding-block:var(--v7-space); background:var(--v7-slate); color:var(--v7-fg); }
.v7-section--ink { background:var(--v7-ink); }
.v7-section--slate { background:var(--v7-slate); }
.v7-section--paper, .v7-section--paper-2, .v7-on-paper {
  --v7-fg:var(--v7-ink-text); --v7-fg-2:var(--v7-ink-2); --v7-fg-3:var(--v7-ink-3);
  --v7-accent:var(--v7-green); --v7-rule:var(--v7-line-light); --v7-surface:#fbfbf8; color:var(--v7-fg); }
.v7-section--paper { background:var(--v7-paper); }
.v7-section--paper-2 { background:var(--v7-paper-2); }
.v7-section--tight { padding-block:calc(var(--v7-space) * .62); }
.unlock-site .v7-section :is(h2, h3, h4) { color:var(--v7-fg); }
.unlock-site .v7-section p { color:var(--v7-fg-2); }

/* Section header */
.v7-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px 80px; align-items:end; margin-bottom:clamp(48px, 6vw, 88px); }
.v7-head > :only-child { grid-column:1 / -1; max-width:860px; }
.unlock-site .v7-head h2, .unlock-site .v7-h2 { margin:0; font:600 clamp(32px, 3.4vw, 52px)/1.08 var(--v7-display); letter-spacing:-.035em; text-wrap:balance; color:var(--v7-fg); }
.v7-head__aside { display:grid; gap:24px; justify-items:start; }
.unlock-site .v7-lede { margin:0; max-width:34em; color:var(--v7-fg-2); font-size:clamp(17px, 1.35vw, 19px); line-height:1.65; letter-spacing:-.01em; }

/* Small plain label (v8: use sparingly; most headings stand alone). No hooks, no mono. */
.unlock-site .v7-label { display:block; margin:0 0 16px; color:var(--v7-accent); font:600 14px/1.4 var(--v7-sans); letter-spacing:0; text-transform:none; }

/* Links. The old site-wide .text-link is light mint; on paper it must be the dark green. */
.unlock-site :is(.v7-section--paper, .v7-section--paper-2, .v7-on-paper, .faq) .text-link { color:var(--v7-green) !important; }

.unlock-site .v7-link { display:inline-flex; align-items:center; gap:10px; padding-bottom:6px; border-bottom:1px solid currentColor;
  color:var(--v7-accent) !important; font:600 15px/1.2 var(--v7-sans); text-decoration:none; }
.v7-link svg { width:16px; height:16px; transition:transform .25s var(--v7-ease); }
.v7-link:hover svg, .v7-link:focus-visible svg { transform:translateX(3px); }

/* Rows: full-width list items divided by rules; a link line draws along the bottom on hover. */
.v7-rows { margin:0; padding:0; list-style:none; border-top:1px solid var(--v7-rule); }
.v7-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 40px; align-items:center;
  padding:28px 0; border-bottom:1px solid var(--v7-rule); color:inherit; text-decoration:none; }
.v7-row::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--v7-accent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--v7-ease); }
a.v7-row:hover::after, a.v7-row:focus-visible::after, .v7-row:has(a:hover)::after { transform:none; }
.v7-row__arrow { width:20px; height:20px; color:var(--v7-accent); transition:transform .25s var(--v7-ease); }
a.v7-row:hover .v7-row__arrow { transform:translateX(3px); }

/* Ruled grids instead of boxed cards */
.v7-grid-2, .v7-grid-3, .v7-grid-4 { display:grid; gap:40px 0; }
.v7-grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.v7-grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.v7-grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
:is(.v7-grid-2, .v7-grid-3, .v7-grid-4) > * { padding:0 clamp(20px, 2.4vw, 36px); border-left:1px solid var(--v7-rule); }
:is(.v7-grid-2, .v7-grid-3, .v7-grid-4) > :first-child { padding-left:0; border-left:0; }

/* Panels, photos, captions, code */
.v7-panel { padding:clamp(24px, 3vw, 40px); border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); }
.v7-photo { position:relative; margin:0; overflow:hidden; isolation:isolate; border-radius:var(--v7-r-panel); background:var(--v7-ink); }
.v7-photo img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(.8) contrast(1.08) brightness(.74); }
.v7-photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(180deg, rgba(14,20,22,0) 55%, rgba(14,20,22,.45) 100%), #1f6b55; mix-blend-mode:color; opacity:.5; }
.v7-photo::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(14,20,22,0) 50%, rgba(14,20,22,.42) 100%); }
.unlock-site .v7-caption { margin:12px 0 0; color:var(--v7-fg-3); font:400 13px/1.55 var(--v7-sans); letter-spacing:0; }
.v7-caption a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.unlock-site .v7-code { margin:0; padding:20px 22px; overflow:auto; border:1px solid var(--v7-line-dark); border-radius:var(--v7-r-panel);
  background:var(--v7-ink); color:#cfe0d8; font:400 13px/1.75 var(--v7-mono); white-space:pre; tab-size:2; }
.v7-code .k { color:#85edc5; } .v7-code .s { color:#e6d48a; } .v7-code .c { color:#6f8179; }

/* Link line: an SVG connector that draws once when revealed. Paths need pathLength="1". */
.v7-linkline { display:block; overflow:visible; color:var(--v7-accent); }
.v7-linkline path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:butt; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* v8: connector lines are retired site-wide. */
.v7-linkline { display:none !important; }

/* ---------- Site-wide refinements owned by the foundation ---------- */

/* Tight display tracking closes word gaps; open them slightly. */
.unlock-site :is(.v7-head h2, .v7-h2, .v7-cta h2, .faq .h2, .page-head h1, .cap-hero h1) { word-spacing:.04em; }

.unlock-site .crumbs, .unlock-site .crumbs a { font:500 13.5px/1.4 var(--v7-sans); letter-spacing:0; }

/* Interior heroes: the photo recedes. Graded toward slate/mint, darker, further right. */
.has-photo .photo-backdrop { --photo-start:46%; background:var(--v7-ink); }
.has-photo .photo-backdrop::before { filter:grayscale(.75) contrast(1.06) brightness(calc(var(--photo-bright, 1) * .58)); opacity:.9;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%); mask-image:linear-gradient(90deg, transparent 0, #000 34%); }
.has-photo .photo-backdrop::after { background:
  linear-gradient(90deg, var(--v7-ink) 0, var(--v7-ink) var(--photo-start), rgba(14,20,22,.78) calc(var(--photo-start) + 10%), rgba(14,20,22,.5) 100%),
  linear-gradient(180deg, rgba(14,20,22,.55) 0, rgba(14,20,22,0) 30%, rgba(14,20,22,0) 60%, rgba(14,20,22,.85) 100%),
  linear-gradient(120deg, rgba(24,103,78,0) 50%, rgba(24,103,78,.32) 100%); }
.has-photo.agency-about-hero, .has-photo.agency-work-hero, .has-photo.cap-hero, .has-photo.page-head, .has-photo.not-found { background:var(--v7-ink); }
@media (max-width:860px) {
  .has-photo .photo-backdrop::before { -webkit-mask-image:none; mask-image:none; opacity:.55; }
  .has-photo .photo-backdrop::after { background:linear-gradient(180deg, rgba(14,20,22,.86) 0, rgba(14,20,22,.92) 55%, var(--v7-ink) 100%); }
}

/* FAQ (un_faq): ruled rows, display-weight questions, a plus that becomes a minus. */
.unlock-site .faq { background:var(--v7-paper); padding-block:var(--v7-space); }
.unlock-site .faq .faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px 80px; align-items:start; }
.unlock-site .faq .eyebrow { display:none; }
.unlock-site .faq .h2 { margin-top:0; color:var(--v7-ink-text); font:600 clamp(32px, 3.4vw, 52px)/1.08 var(--v7-display); letter-spacing:-.035em; }
.unlock-site .faq .lede { color:var(--v7-ink-2); }
.unlock-site .faq-list { border-top:1px solid var(--v7-line-light); }
.unlock-site .faq-list details { border-top:0; border-bottom:1px solid var(--v7-line-light); }
.unlock-site .faq-list summary { display:flex; justify-content:space-between; gap:24px; padding:26px 0; cursor:pointer; list-style:none;
  color:var(--v7-ink-text); font:600 clamp(17px, 1.4vw, 20px)/1.4 var(--v7-display); letter-spacing:-.015em; }
.unlock-site .faq-list summary::-webkit-details-marker { display:none; }
.unlock-site .faq-list summary span { position:relative; flex:none; width:18px; height:18px; margin-top:4px; }
.unlock-site .faq-list summary span::before, .unlock-site .faq-list summary span::after { content:""; position:absolute; left:0; top:8px; width:18px; height:1.5px; background:var(--v7-green); transition:transform .3s var(--v7-ease); }
.unlock-site .faq-list summary span::after { transform:rotate(90deg); }
.unlock-site .faq-list details[open] summary span::after { transform:rotate(0); }
.unlock-site .faq-list details p { max-width:40em; margin:0; padding:0 48px 28px 0; color:var(--v7-ink-2); font-size:16.5px; line-height:1.75; }

/* Closing call to action (site.php .v7-cta) */
.v7-cta { position:relative; overflow:hidden; padding-block:clamp(96px, 11vw, 160px); background:var(--v7-ink); color:var(--v7-text); }
.v7-cta__grid { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:40px 80px; align-items:end; }
.unlock-site .v7-cta h2 { margin:0; max-width:15ch; color:var(--v7-text); font:600 clamp(40px, 5vw, 80px)/1.02 var(--v7-display); letter-spacing:-.045em; text-wrap:balance; }
.unlock-site .v7-cta p:not(.v7-label):not(.v7-cta__meta) { margin:24px 0 0; max-width:30em; color:var(--v7-text-2); font-size:clamp(17px, 1.35vw, 19px); line-height:1.65; }
.v7-cta__actions { display:grid; gap:22px; justify-items:start; padding-bottom:8px; }
.unlock-site .v7-cta__meta { margin:0 !important; color:var(--v7-text-3) !important; font:400 14px/1.6 var(--v7-sans) !important; }
.v7-cta__mark { position:absolute; right:-40px; top:50%; width:clamp(260px, 30vw, 440px); height:auto; translate:0 -50%; color:var(--v7-mint); opacity:.07; pointer-events:none; }

/* Footer: quieter, with the mono voice for small print. */
.unlock-site .site-footer { background:var(--v7-ink); border-top:1px solid var(--v7-line-dark); }
.unlock-site .site-footer h3 { color:var(--v7-text-3); font:600 14px/1.4 var(--v7-sans); letter-spacing:0; text-transform:none; }

/* ---------- v9.1 polish (foundation) ---------- */

/* Headings never end on one stranded word; paragraphs avoid short last lines. */
.unlock-site :is(h1, h2, h3) { text-wrap:balance; }
.unlock-site main p { text-wrap:pretty; }

/* Focus: the mint ring disappears on light surfaces, so every paper surface uses the dark green (≥3:1). */
.unlock-site :is(.v7-section--paper, .v7-section--paper-2, .v7-on-paper, .faq, .v7c-next, .v7l-head, .v7l-article, .v7l-more, .sv-card) :focus-visible { outline-color:var(--v7-green); }

/* One button size in page content and the closing call to action (the header keeps its compact one). */
.unlock-site :is(main, .v7-cta) .btn { font-size:15px; padding:14px 22px; min-height:48px; }

/* Icon tiles: one shape everywhere. Families set --tile only for the small (40) or feature (64) sizes. */
.unlock-site :is(.cx-ico, .pg-tile, .ag-tile, .hm-tile) { border-radius:var(--v7-tile-r); }
.unlock-site :is(.cx-ico, .pg-tile, .ag-tile, .hm-tile) svg { width:var(--v7-tile-icon); height:var(--v7-tile-icon); }

/* Small links get a comfortable target without changing how they look. */
.unlock-site .v7-link { padding-top:6px; }
.unlock-site .faq .lede .text-link { display:inline-block; padding-block:4px; }
.unlock-site .footer-legal :is(a, button), .unlock-site .footer-tools :is(a, button) { display:inline-flex; align-items:center; min-height:32px; }

/* Desktop nav spacing (moved here from the retired expertise-v1.css). */
@media (min-width:1001px) { .site-nav { gap:24px; } .site-nav .btn { margin-left:0; } }
/* Six links plus the button: keep every label and the logo on one line down to the mobile menu. */
.unlock-site .site-nav a, .unlock-site .site-header .logo { white-space:nowrap; }
@media (min-width:861px) and (max-width:1060px) {
  .unlock-site .site-nav { gap:18px; font-size:13px; }
  .unlock-site .site-nav .btn { margin-left:0; padding:10px 14px; }
  .unlock-site .site-header .logo { font-size:.92em; }
}

/* Mobile menu: a full-height sheet, not a dropdown with the page showing underneath. */
@media (max-width:860px) {
  .unlock-site .site-nav { height:calc(100svh - 76px - var(--top)); max-height:none; padding-bottom:max(24px, env(safe-area-inset-bottom)); background:var(--v7-ink); border-bottom:0; }
  html:has(.site-header.menu-open) { overflow:hidden; }
}
@media (max-width:700px) {
  .unlock-site .site-nav { height:calc(100svh - 64px - var(--top)); }
}

@media (max-width:1100px) {
  .v7-grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .v7-grid-4 > :nth-child(3) { padding-left:0; border-left:0; }
}
@media (max-width:860px) {
  .v7-head, .unlock-site .faq .faq-grid, .v7-cta__grid { grid-template-columns:minmax(0,1fr); }
  .v7-grid-2, .v7-grid-3 { grid-template-columns:minmax(0,1fr); gap:0; }
  :is(.v7-grid-2, .v7-grid-3) > * { padding:28px 0; border-left:0; border-top:1px solid var(--v7-rule); }
  :is(.v7-grid-2, .v7-grid-3) > :first-child { border-top:0; padding-top:0; }
  .v7-cta__mark { right:-80px; top:auto; bottom:-60px; translate:none; }
}
@media (max-width:600px) {
  .v7-grid-4 { grid-template-columns:minmax(0,1fr); gap:0; }
  .v7-grid-4 > * { padding:24px 0 !important; border-left:0 !important; border-top:1px solid var(--v7-rule); }
  .v7-grid-4 > :first-child { border-top:0; padding-top:0 !important; }
  .v7-row { padding:22px 0; }
  .unlock-site .faq-list details p { padding-right:0; }
}
@media print { .v7-cta__mark, .v7-linkline { display:none; } }