/* NAAL Work page - reproduces Portfolio.html reference */
/* Reference Wrap is content-box: max-width 1240 applies to the CONTENT, so the
element measures 1240 + 2x32 padding = 1304. It was 1240 here, which pulled
64px out of every band on this page. */
.wk-wrap{max-width:1304px;margin:0 auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
.wk-grid-wrap{padding-bottom:112px}
.wk-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:48px}
/* Reference: border var(--border-default) #D9D9D6, colour var(--text-secondary)
#5A5954. The previous rgba(22,22,22,.12) border and #5c5c57 text were both
approximations. */
/* The theme's button reset forces line-height:21px and white-space:nowrap; the
reference has neither, and the 21px line box made every chip 4.2px
taller (36.4 -> 40.6), pushing the whole grid down. */
.wk-filter{font-family:var(--naal-sans);font-size:14px;font-weight:500;line-height:normal;white-space:normal;padding:9px 20px;border-radius:999px;cursor:pointer;border:1px solid #D9D9D6;background:transparent;color:#5A5954;transition:all 200ms ease}
.wk-filter.active{border-color:#161616;background:#161616;color:#fff}
.wk-masonry{column-count:3;column-gap:22px}
.wk-item{break-inside:avoid;margin-bottom:22px}
/* Reference sets an explicit aspect-ratio per tile and crops with
object-fit:cover; the tiles were sizing to the images natural height instead,
and the placeholder was --border-default rather than --surface-stone. */
.wk-tile{position:relative;border-radius:16px;overflow:hidden;background:#F7F5F2}
.wk-tile.wk-r43{aspect-ratio:4/3}
.wk-tile.wk-r45{aspect-ratio:4/5}
.wk-tile.wk-r11{aspect-ratio:1/1}
.wk-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms cubic-bezier(0.2,0,0,1)}
.wk-tile:hover img{transform:scale(1.05)}
.wk-tag-row{position:absolute;left:16px;bottom:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
.wk-label{background:#F7F5F2;color:#161616;font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px}
.wk-cat{font-family:var(--naal-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(22,22,22,.55);padding:5px 10px;border-radius:8px;backdrop-filter:blur(6px)}
/* CTA band - this page uses the full-bleed flex row, not the boxed CTA. */
.wk-cta{background:#161616;color:#fff}
.wk-cta .wk-wrap{padding-top:96px;padding-bottom:96px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.wk-cta h2{font-family:var(--naal-serif);font-weight:500;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.015em;margin:0;max-width:640px}
/* Reference Button size="lg" onDark: 16px/500, 15px 28px padding, line-height 1,
1px transparent border, box-sizing border-box, 140ms --motion-hover. */
.wk-cta .wk-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-sizing:border-box;background:#B99146;color:#161616;font-family:var(--naal-sans);font-weight:500;font-size:16px;line-height:1;padding:15px 28px;border:1px solid transparent;border-radius:999px;text-decoration:none;transition:background-color 140ms cubic-bezier(0.2,0,0,1),color 140ms cubic-bezier(0.2,0,0,1)}
.wk-cta .wk-cta-btn:hover{background:#DBC28C}
.wk-cta .wk-cta-btn:active{transform:translateY(0.5px)}
.wk-hidden{display:none!important}
/* Reference site.css has ONE breakpoint and .pf goes straight from 3 columns to
1 at 860 - there is no 2-column step, no 600px step, and the CTA row relies on
flex-wrap rather than switching to a column. All three were invented. */
@media (max-width:860px){.wk-masonry{column-count:1}}
/* ---------- Work hero ----------
Reference h1: max-width 1020, centred, display:inline-block (load-bearing -
the parent line-box strut reserves descender space a block h1 never creates).
Reference lede: max-width 620, centred, no bottom margin. */
#about-hero h1{display:inline-block;max-width:1020px;margin-left:auto;margin-right:auto;font-family:var(--naal-serif)}
#about-hero .elementor-widget-text-editor p{max-width:620px;margin-left:auto;margin-right:auto;margin-bottom:0}
#about-hero .naal-eyebrow .elementor-heading-title{font-family:var(--naal-mono)}
/* Elementor's kit `.elementor-kit-5 a{color:#0E3B36}` is (0,1,1) and beat the
single-class .wk-cta-btn, painting the label forest green instead of carbon. */
/* Bottom CTA: contained panel, matching the Expertise CTA's outer treatment.
The carbon block used to be full-bleed with square corners, so it ran edge to
edge and its bottom sat flush on the footer. Constraining it to the content
column turns it into an inset panel; the breathing room around it (32px sides,
128px before the footer) lives on the Elementor container so it stays editable.
Content is untouched and simply reflows inside the narrower panel. */
.wk-cta{max-width:1240px;margin-inline:auto;border-radius:32px}
/* Bottom CTA written block: same containment as the About CTA - a centred
column capped at 720px, rather than a heading and button pushed to opposite
ends of the panel. align-items:center on .wk-wrap already centres the
children once the axis is vertical. Copy, button, type, colours, hover, the
24px gap and the panel's own 96/32 padding are untouched. */
.wk-cta .wk-wrap{flex-direction:column;justify-content:center;text-align:center}
.wk-cta h2{max-width:720px;font-size:clamp(32px,4.4vw,56px)}
/* Work tile captions - DELIBERATE DEVIATION from the reference, approved by client 2026-08-24.
Matches the Home portfolio treatment: bottom scrim + typography instead of chips, so the
photography leads. Paint only: .wk-tag-row is position:absolute, so tiles, masonry, filters,
CTA, footer and page height are unchanged (verified by toggle test). */
.wk-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(15,15,15,0.72),rgba(15,15,15,0));pointer-events:none}
.wk-tag-row{z-index:2}
.wk-tile .wk-label{background:transparent;color:#fff;padding:0;border-radius:0;font-size:15px;font-weight:500}
.wk-tile .wk-cat{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;color:rgba(255,255,255,0.72)}
/* ---------- Work pagination (Work-scoped) ----------
Reuses the Insights pager visual language 1:1 but under .wk-pager so that
insights.css and the Insights page are untouched. Added 2026-08-24. */
.wk-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:48px}
.wk-pager .wk-pager-nums{display:flex;align-items:center;gap:8px}
.wk-pager .wk-pager-num{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;box-sizing:border-box;border:1px solid #D9D9D6;border-radius:999px;font-family:var(--naal-mono);font-size:12px;letter-spacing:.1em;color:#5A5954;text-decoration:none;transition:color 140ms cubic-bezier(.2,0,0,1),border-color 140ms cubic-bezier(.2,0,0,1)}
.wk-pager .wk-pager-num:hover{color:#9C7734;border-color:#9C7734}
.wk-pager .wk-pager-num.is-current{background:#161616;border-color:#161616;color:#fff}
.wk-pager .wk-pager-edge{display:inline-flex;align-items:center;gap:8px;font-family:var(--naal-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#161616;text-decoration:none;transition:color 140ms cubic-bezier(.2,0,0,1)}
.wk-pager .wk-pager-edge:hover{color:#9C7734}
.wk-pager .wk-pager-edge svg{transition:transform 320ms cubic-bezier(.2,0,0,1)}
.wk-pager .wk-pager-prev svg{transform:rotate(180deg)}
.wk-pager .wk-pager-next:hover svg{transform:translateX(5px)}
.wk-pager .wk-pager-prev:hover svg{transform:rotate(180deg) translateX(5px)}
.wk-pager .wk-pager-edge.is-disabled{color:#D9D9D6;pointer-events:none}