/* Unlock Integrations v9.1 polish: About and Work. Builds on v7-base.css and its shared tokens
   (--v7-h1/h2/h3, --v7-space(-tight), --v7-tile*); see design/v91-polish.md. Loads last on /about/ and /work/.
   Company-first voice; a visual in every section: icon tiles, big true numbers, one graded photo plus the
   Figge on About, real product captures on Work. Straight lines only (1px rules); no labels above headings. */

:where(.v7-about, .v7-work) :where(dl, dd, figure) { margin:0; }
:where(.v7-about, .v7-work) :where(h2, h3, p) { margin:0; }
:where(.v7-about, .v7-work) :where(ol, ul) { margin:0; padding:0; list-style:none; }
.unlock-site :is(.v7-about, .v7-work) h3 { font:var(--v7-h3); letter-spacing:-.02em; }

/* In-text links: underlined; a little invisible padding makes each one a 24px+ target without moving text. */
.unlock-site :is(.v7-about-body, .v7-work-body) :is(p, li) a:not(.v7-link) { padding-block:4px; color:var(--v7-fg); text-decoration:underline; text-decoration-color:var(--v7-accent); text-decoration-thickness:1px; text-underline-offset:4px; }
.unlock-site :is(.v7-about-body, .v7-work-body) :is(p, li) a:not(.v7-link):hover { text-decoration-thickness:2px; }
.unlock-site .v7-caption a { display:inline-block; padding-block:4px; }
.unlock-site :is(.v7-about-body, .v7-work-body) .v7-link { min-height:32px; }

/* Icon tile: green ~10% on paper, mint ~12% on dark. Radius and icon size come from the base tokens. */
.ag-tile { --tile:var(--v7-tile); display:inline-grid; place-items:center; flex:none; width:var(--tile); height:var(--tile);
  background:rgba(24,103,78,.1); color:var(--v7-green); }
:is(.v7-section--ink, .v7-section--slate, .ab-hero, .wk-hero) .ag-tile { background:rgba(133,237,197,.12); color:var(--v7-mint); }

/* Section openings: a heading and one short line */
.unlock-site :is(.ab-intro, .wk-intro, .ab-note, .ab-place__copy, .wk-case__head) h2 { color:var(--v7-fg); font:var(--v7-h2); letter-spacing:-.035em; word-spacing:.04em; }
.unlock-site :is(.ab-intro, .wk-intro, .ab-place__copy, .wk-case__head) > p { max-width:52ch; margin-top:18px; color:var(--v7-fg-2); font-size:clamp(17px, 1.3vw, 19px); line-height:1.6; }
:is(.ab-intro, .wk-intro) { max-width:40rem; margin-bottom:clamp(40px, 4.5vw, 64px); }
.ab-place__copy > .v7-link { margin-top:36px; }

/* ---------- Heroes (About: photo recedes on the right; Work: plain ink, the captures follow) ---------- */
.unlock-site :is(.ab-hero, .wk-hero) { position:relative; isolation:isolate; padding:36px 0 var(--v7-space-tight); background:var(--v7-ink); color:var(--v7-text); }
.unlock-site :is(.ab-hero, .wk-hero) .crumbs { margin:0 0 clamp(48px, 6vw, 96px); }
.unlock-site :is(.ab-hero, .wk-hero) .crumbs a { display:inline-block; padding-block:4px; margin-block:-4px; }
:is(.ab-hero__copy, .wk-hero__copy) { max-width:780px; }
.unlock-site :is(.ab-hero, .wk-hero) h1 { max-width:15em; color:var(--v7-text); font:var(--v7-h1); letter-spacing:-.04em; word-spacing:.05em; }
.unlock-site .ab-hero h1 { max-width:13em; }
.unlock-site .wk-hero h1 { max-width:11em; }
.unlock-site :is(.ab-hero__lede, .wk-hero__lede) { max-width:34em; margin-top:28px; color:var(--v7-text-2); font-size:clamp(18px, 1.4vw, 20.5px); line-height:1.6; letter-spacing:-.01em; }
.ab-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; margin-top:40px; }
.unlock-site .ab-hero__more { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--v7-mint); font:600 15px/1.3 var(--v7-sans); text-decoration:none; }
.ab-hero__more svg { width:16px; height:16px; transition:transform .25s var(--v7-ease); }
.ab-hero__more:hover svg { transform:translateX(3px); }
.ab-hero__more:hover { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }

/* Work hero: the copy, and an index of what's on the page (straight rules, arrows point down). */
.wk-hero__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px clamp(48px, 7vw, 112px); align-items:end; }
.wk-hero__index { width:100%; max-width:440px; justify-self:end; }
.unlock-site .wk-hero__index ul { border-top:1px solid rgba(220,232,226,.2); }
.wk-hero__index li { border-bottom:1px solid rgba(220,232,226,.2); }
.unlock-site .wk-hero__index a { display:flex; align-items:center; gap:14px; min-height:72px; padding:12px 0; color:var(--v7-text-2); font:400 14.5px/1.4 var(--v7-sans); text-decoration:none; transition:color .2s; }
.wk-hero__index a > span:not(.ag-tile) { display:grid; gap:2px; flex:1 1 auto; }
.wk-hero__index strong { color:var(--v7-text); font:500 17px/1.3 var(--v7-sans); letter-spacing:-.01em; transition:color .2s; }
.wk-hero__index .ag-tile { --tile:var(--v7-tile-sm); }
.wk-hero__index a > svg { flex:none; width:18px; height:18px; color:var(--v7-mint); transform:rotate(90deg); transition:transform .25s var(--v7-ease); }
.unlock-site .wk-hero__index a:hover strong, .unlock-site .wk-hero__index a:focus-visible strong { color:var(--v7-mint); }
.wk-hero__index a:hover > svg, .wk-hero__index a:focus-visible > svg { transform:rotate(90deg) translateX(3px); }
.unlock-site .wk-case__head p a { white-space:nowrap; }
/* With no hero photo, a single straight rule closes the Work hero against the first product band. */
.unlock-site .wk-hero:not(.has-photo) { border-bottom:1px solid var(--v7-line-dark); }

/* ---------- Shared: photo split, icon items ---------- */
.ab-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px clamp(48px, 6vw, 104px); align-items:stretch; }
.ab-split__photo { min-height:min(500px, 56vh); }
.ab-split__photo img { position:absolute; inset:0; }

.ab-items li, .wk-feats li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:start; }
.ab-items .ag-tile, .wk-feats .ag-tile { grid-row:span 2; }
.unlock-site :is(.ab-items, .wk-feats) h3 { padding-top:2px; color:var(--v7-fg); }
.unlock-site :is(.ab-items, .wk-feats) p { margin-top:5px; color:var(--v7-fg-2); font-size:15.5px; line-height:1.55; }
.unlock-site .ab-items--compact { display:grid; gap:28px; max-width:30rem; margin-top:clamp(32px, 3.5vw, 44px); }

/* ---------- About: how we work with people (four values, then one pointer to /process/) ---------- */
.unlock-site .ab-values { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; }
.ab-values li { padding-top:28px; border-top:1px solid var(--v7-rule); }
.unlock-site .ab-values h3 { margin-top:20px; color:var(--v7-fg); }
.unlock-site .ab-values p { margin-top:8px; max-width:30ch; color:var(--v7-fg-2); font-size:15.5px; line-height:1.55; }
.unlock-site .ab-pointer { margin-top:clamp(40px, 4.5vw, 56px); }

/* ---------- About: numbers band ---------- */
.ab-numbers.v7-section { padding-block:var(--v7-space-tight); }
.ab-numbers__list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
.ab-numbers__list li { display:grid; align-content:start; gap:12px; padding:4px clamp(16px, 2.4vw, 40px); border-left:1px solid var(--v7-rule); }
.ab-numbers__list li:first-child { padding-left:0; border-left:0; }
.ab-numbers__list strong { color:var(--v7-mint); font:600 clamp(52px, 6vw, 88px)/1 var(--v7-display); letter-spacing:-.045em; }
.ab-numbers__list span { max-width:18ch; color:var(--v7-text-2); font-size:16px; line-height:1.45; }

/* ---------- About: the owner (photo + signed note, then his background on one straight rule) ---------- */
.ab-note { align-self:center; max-width:34rem; }
.unlock-site .ab-note .ab-note__hi { margin-top:28px; color:var(--v7-fg); font-size:clamp(20px, 1.7vw, 24px); line-height:1.5; letter-spacing:-.015em; }
.unlock-site .ab-note p:not(.ab-note__hi):not(.ab-note__sign) { margin-top:18px; color:var(--v7-fg-2); font-size:17px; line-height:1.7; }
.unlock-site .ab-note .ab-note__sign { display:grid; gap:2px; margin-top:28px; padding-top:22px; border-top:1px solid var(--v7-rule); color:var(--v7-fg-3); font-size:14px; line-height:1.4; }
.ab-note__sign span { color:var(--v7-fg); font:var(--v7-h3); letter-spacing:-.02em; }

.unlock-site .ab-timeline { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; margin-top:clamp(64px, 7vw, 104px); }
.ab-timeline::before { content:""; position:absolute; top:calc(var(--v7-tile-lg) / 2); left:32px; right:0; height:1px; background:#b9c6bb; }
.ab-timeline li { position:relative; padding-right:clamp(0px, 2vw, 32px); }
.ab-timeline .ag-tile { --tile:var(--v7-tile-lg); position:relative; background:color-mix(in srgb, var(--v7-green) 10%, var(--v7-paper-2)); box-shadow:0 0 0 10px var(--v7-paper-2); }
.ab-timeline li:last-child .ag-tile { background:var(--v7-green); color:var(--v7-paper); }
.unlock-site .ab-timeline .ab-timeline__when { margin-top:28px; color:var(--v7-green); font:600 clamp(26px, 2.4vw, 34px)/1.1 var(--v7-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.unlock-site .ab-timeline h3 { margin-top:10px; color:var(--v7-fg); }
.unlock-site .ab-timeline li > p:not(.ab-timeline__when) { max-width:30ch; margin-top:8px; color:var(--v7-fg-2); font-size:15.5px; line-height:1.6; }
.unlock-site .ab-cert { display:flex; align-items:center; gap:16px; margin-top:clamp(48px, 5vw, 72px); padding-top:28px; border-top:1px solid var(--v7-line-light); color:var(--v7-fg-2); font-size:15.5px; line-height:1.55; }
.ab-cert strong { color:var(--v7-fg); font-weight:600; }

/* ---------- About: where we are ---------- */
.ab-place__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px clamp(48px, 6vw, 104px); align-items:center; }
.ab-place__photo { aspect-ratio:3 / 2; }
.unlock-site .ab-place__credit { margin-top:12px; }

/* ---------- Work: products ---------- */
.wk-case__head { max-width:44rem; margin-bottom:clamp(36px, 4vw, 56px); }
.wk-case__grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:40px clamp(40px, 5vw, 80px); align-items:center; }
.wk-case--abode .wk-case__grid { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
.wk-case--abode .wk-capture { order:2; }
.wk-capture__frame { overflow:hidden; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); box-shadow:0 30px 60px -36px rgba(14,20,22,.5); }
.wk-case--sfx .wk-capture__frame { background:var(--v7-ink); box-shadow:none; }
.wk-capture picture, .wk-capture img { display:block; width:100%; height:auto; }
.wk-feats { display:grid; gap:26px; }
.unlock-site .wk-stack { margin-top:30px; padding-top:20px; border-top:1px solid var(--v7-rule); color:var(--v7-fg-3); font-size:14px; line-height:1.55; }

/* ---------- Work: engineering tools (icon cards; the page's one large-tile row) ---------- */
.wk-tools__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.wk-tool { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(28px, 3vw, 40px); border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-panel); }
.wk-tool > .ag-tile { --tile:var(--v7-tile-lg); }
.unlock-site .wk-tool h3 { margin-top:24px; color:var(--v7-fg); }
.unlock-site .wk-tool > p { margin-top:10px; max-width:36em; color:var(--v7-fg-2); font-size:16.5px; line-height:1.6; }
.unlock-site .wk-checks { display:grid; gap:12px; align-self:stretch; margin:26px 0 30px; padding-top:24px; border-top:1px solid var(--v7-rule); }
.wk-checks li { display:flex; align-items:center; gap:14px; color:var(--v7-fg); font-size:15.5px; line-height:1.4; }
.wk-checks .ag-tile { --tile:var(--v7-tile-sm); }
.wk-tool > .v7-link { margin-top:auto; }

/* ---------- Work: related services (icon cards) ---------- */
.wk-cards { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; }
.unlock-site .v7-work-body .wk-cards li > a { display:flex; flex-direction:column; height:100%; padding:24px 22px; border:1px solid var(--v7-rule); border-radius:var(--v7-r-panel); background:var(--v7-surface); color:var(--v7-fg); text-decoration:none; transition:border-color .2s, transform .25s var(--v7-ease); }
.unlock-site .v7-work-body .wk-cards li > a:hover, .unlock-site .v7-work-body .wk-cards li > a:focus-visible { border-color:var(--v7-green); transform:translateY(-2px); }
.unlock-site .wk-cards h3 { margin-top:20px; }
.unlock-site .wk-cards p { margin-top:6px; color:var(--v7-fg-2); font-size:15px; line-height:1.55; }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .wk-hero__grid { grid-template-columns:minmax(0,1fr); }
  .wk-hero__index { max-width:560px; justify-self:start; }
  .wk-cards { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .unlock-site .ab-values { grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px 32px; }
}
@media (max-width:960px) {
  .wk-case__grid, .wk-case--abode .wk-case__grid { grid-template-columns:minmax(0,1fr); }
  .wk-case--abode .wk-capture { order:0; }
  .wk-feats { grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 32px; }
}
@media (max-width:860px) {
  .ab-split, .ab-place__grid, .wk-tools__grid { grid-template-columns:minmax(0,1fr); }
  .ab-split__photo { min-height:0; aspect-ratio:16 / 10; }
  .ab-split__photo img { position:static; }
  .unlock-site .ab-timeline { grid-template-columns:minmax(0,1fr); gap:40px; }
  .ab-timeline::before { top:32px; bottom:32px; left:32px; right:auto; width:1px; height:auto; }
  .ab-timeline li { min-height:var(--v7-tile-lg); padding:0 0 0 92px; }
  .ab-timeline .ag-tile { position:absolute; left:0; top:0; }
  .unlock-site .ab-timeline .ab-timeline__when { margin-top:4px; }
}
@media (max-width:600px) {
  .unlock-site :is(.ab-hero, .wk-hero) { padding-top:24px; }
  .unlock-site :is(.ab-hero, .wk-hero) .crumbs { margin-bottom:40px; }
  .unlock-site .ab-values, .wk-feats, .wk-cards { grid-template-columns:minmax(0,1fr); }
  .unlock-site .ab-values { gap:0; }
  .ab-values li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; padding:22px 0; }
  .ab-values .ag-tile { grid-row:span 2; }
  .unlock-site .ab-values h3 { margin-top:2px; }
  .ab-numbers__list { grid-template-columns:minmax(0,1fr); gap:28px; }
  .ab-numbers__list li, .ab-numbers__list li:first-child { grid-template-columns:5.5ch minmax(0,1fr); align-items:center; gap:20px; padding:0; border-left:0; }
  .ab-numbers__list strong { font-size:clamp(44px, 13vw, 56px); }
  .unlock-site .ab-cert { align-items:flex-start; }
  .unlock-site .v7-work-body .wk-cards li > a { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:start; padding:20px; }
  .wk-cards .ag-tile { grid-row:span 2; }
  .unlock-site .wk-cards h3 { margin-top:2px; }
}
@media (prefers-reduced-motion:reduce) {
  .unlock-site .wk-cards a, .ab-hero__more svg, .wk-hero__index a > svg { transition:none; }
  .unlock-site .wk-cards a:hover { transform:none; }
}
html.motion-off .wk-cards a:hover { transform:none; }