@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Special+Elite&display=swap');

:root {
  --j-paper: #f3efe7;
  --j-paper-deep: #e9e2d6;
  --j-ink: #252822;
  --j-quiet: #6e7067;
  --j-line: rgba(37,40,34,.18);
  --j-ochre: #9e855d;
  --j-ochre-deep: #786442;
  --j-sage: #a4c1b6;
  --j-blush: #dca29f;
  --j-display: "Figtree", sans-serif;
  --j-mono: "IBM Plex Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--j-paper); }
body.portfolio-body { margin:0; background:var(--j-paper); color:var(--j-ink); font-family:var(--j-display); -webkit-font-smoothing:antialiased; }
.portfolio-body a { color:inherit; }
.portfolio-body button { font:inherit; }
.portfolio-body img { display:block; max-width:100%; }
.portfolio-body ::selection { color:var(--j-ink); background:var(--j-sage); }
.portfolio-body :focus-visible { outline:2px solid var(--j-ochre-deep); outline-offset:4px; }
.p-shell { width:min(100% - 64px, 1320px); margin-inline:auto; }
.p-header { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--j-line); position:relative; z-index:10; }
.p-logo { display:inline-flex; align-items:center; text-decoration:none; }
.p-logo img { width:auto; height:40px; }
.p-nav { display:flex; align-items:center; gap:clamp(20px,3vw,44px); }
.p-nav a { font-size:12px; font-weight:700; text-decoration:none; letter-spacing:.035em; }
.p-nav a:not(.p-nav-contact):hover { color:var(--j-ochre-deep); }
.p-nav-contact { display:flex; align-items:center; gap:10px; border:1px solid var(--j-ink); padding:12px 17px; }
.p-nav-contact span { font-size:16px; transition:transform .2s ease; }
.p-nav-contact:hover span { transform:translateX(3px); }
.p-menu-toggle { display:none; background:none; border:0; color:var(--j-ink); padding:10px; cursor:pointer; }
.p-menu-toggle span { display:block; width:25px; height:1px; background:currentColor; margin:6px 0; }
.p-mobile-menu { display:none; }
.p-footer { background:#292d27; color:var(--j-paper); padding:54px 0 28px; }
.p-footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:48px; padding-bottom:46px; }
.p-footer-logo img { width:110px; filter:brightness(0) invert(1); }
.p-footer-tag { color:rgba(243,239,231,.62); font-size:13px; line-height:1.65; margin:18px 0 0; }
.p-footer-links { display:flex; gap:clamp(26px,5vw,74px); }
.p-footer-col { display:grid; gap:13px; align-content:start; }
.p-footer-col a,.p-footer-col span { color:var(--j-paper); text-decoration:none; font-size:12px; }
.p-footer-col a:hover { color:var(--j-sage); }
.p-footer-bottom { border-top:1px solid rgba(243,239,231,.18); padding-top:17px; display:flex; justify-content:space-between; color:rgba(243,239,231,.55); font:10px var(--j-mono); letter-spacing:.04em; }
.eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.13em; font:500 10px var(--j-mono); color:var(--j-quiet); }
.eyebrow::before { content:""; display:inline-block; height:1px; width:23px; background:currentColor; }
.p-link-arrow { display:inline-flex; align-items:center; gap:14px; font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; padding:0 0 9px; }
.p-link-arrow span { transition:transform .2s ease; }
.p-link-arrow:hover span { transform:translateX(4px); }

/* Work index: one real project, with room left for the next one. */
.work-hero { padding:clamp(68px,10vw,142px) 0 clamp(67px,8vw,112px); display:grid; grid-template-columns:1.12fr .88fr; align-items:end; gap:8vw; }
.work-hero h1 { font-size:clamp(72px,12.4vw,174px); line-height:.78; letter-spacing:-.095em; font-weight:600; margin:40px 0 0; max-width:830px; }
.work-hero h1 em { color:var(--j-ochre); font-style:normal; }
.work-intro { max-width:390px; padding-bottom:6px; }
.work-intro p { font-size:clamp(16px,1.6vw,20px); line-height:1.65; margin:0 0 28px; }
.work-intro .intro-note { color:var(--j-quiet); font-size:12px; line-height:1.7; max-width:320px; }
.work-feature { display:grid; grid-template-columns:1fr 1.03fr; background:var(--j-paper-deep); min-height:570px; text-decoration:none; position:relative; overflow:hidden; }
.work-feature-visual { position:relative; min-height:480px; overflow:hidden; background:#b8b3a6; }
.work-feature-visual img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.work-feature:hover .work-feature-visual img { transform:scale(1.035); }
.work-feature-visual::after { content:""; inset:0; position:absolute; background:linear-gradient(180deg,transparent 50%,rgba(35,36,30,.24)); }
.work-feature-stamp { position:absolute; top:24px; left:24px; z-index:1; display:inline-flex; background:var(--j-paper); padding:10px 13px; font:10px var(--j-mono); text-transform:uppercase; letter-spacing:.09em; }
.work-feature-brand { position:absolute; left:8%; right:8%; bottom:13%; z-index:1; padding:22px 25px; background:#252822; }
.work-feature-brand img { position:relative; inset:auto; width:100%; height:auto; object-fit:contain; filter:none; }
.work-feature-copy { padding:clamp(35px,6vw,82px); display:flex; flex-direction:column; justify-content:space-between; min-height:570px; }
.work-feature-meta { display:flex; justify-content:space-between; font:10px var(--j-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--j-quiet); }
.work-feature-copy h2 { font-size:clamp(42px,6.3vw,82px); line-height:.9; letter-spacing:-.075em; font-weight:600; margin:44px 0 22px; max-width:500px; }
.work-feature-copy h2 em { font-family:"Special Elite",serif; font-size:.76em; font-weight:400; color:var(--j-ochre-deep); letter-spacing:-.035em; }
.work-feature-copy p { max-width:420px; color:#565a51; font-size:15px; line-height:1.75; margin:0; }
.work-feature-bottom { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-top:46px; }
.work-tags { display:flex; flex-wrap:wrap; gap:8px; }
.work-tags span { border:1px solid var(--j-line); border-radius:100px; padding:8px 11px; color:#565a51; font:9px var(--j-mono); }
.work-feature-go { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border:1px solid var(--j-ink); font-size:19px; transition:background .2s,color .2s,transform .2s; }
.work-feature:hover .work-feature-go { background:var(--j-ink); color:var(--j-paper); transform:rotate(45deg); }
.work-after { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:clamp(90px,14vw,180px) 0; align-items:start; }
.work-after h2 { font-size:clamp(38px,5vw,64px); line-height:.98; letter-spacing:-.07em; margin:22px 0 0; max-width:500px; }
.work-after p { max-width:360px; color:var(--j-quiet); font-size:14px; line-height:1.8; margin:42px 0 0 auto; }
.work-after p strong { color:var(--j-ink); font-weight:600; }
.work-rule { border-top:1px solid var(--j-line); }

/* Noosa Headz case study */
.case-hero { position:relative; padding:clamp(68px,9vw,124px) 0 0; }
.case-headline { display:grid; grid-template-columns:1fr minmax(220px, .44fr); gap:5vw; align-items:end; }
.case-heading h1 { font-size:clamp(74px,13vw,176px); line-height:.76; letter-spacing:-.105em; margin:35px 0 0; font-weight:600; }
.case-heading h1 span { display:block; color:var(--j-ochre); }
.case-heading .case-logo-heading { width:min(100%, 781px); line-height:1; letter-spacing:normal; }
.case-heading .case-logo-heading img { display:block; width:100%; height:auto; filter:brightness(0) saturate(100%); }
.case-deck { padding:0 0 7px; max-width:340px; }
.case-deck p { font-size:16px; line-height:1.7; margin:0 0 25px; }
.case-deck .eyebrow { margin-bottom:15px; }
.case-hero-art { margin:clamp(52px,8vw,100px) 0 0; position:relative; height:clamp(320px,58vw,730px); overflow:hidden; background:#d2c9b8; }
.case-hero-art > img { width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.case-hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(29,31,27,.26),transparent 68%); pointer-events:none; }
.case-hero-art-caption { position:absolute; z-index:1; left:clamp(22px,5vw,70px); bottom:clamp(20px,5vw,62px); color:white; font:10px var(--j-mono); text-transform:uppercase; letter-spacing:.12em; }
.case-index { position:absolute; right:clamp(20px,5vw,70px); top:clamp(20px,5vw,60px); z-index:1; color:white; font:10px var(--j-mono); letter-spacing:.12em; }
.case-quickfacts { display:grid; grid-template-columns:1fr 1fr 1.4fr; border-bottom:1px solid var(--j-line); }
.fact { padding:22px 18px 22px 0; border-right:1px solid var(--j-line); }
.fact + .fact { padding-left:24px; }
.fact:last-child { border:0; }
.fact-label { display:block; color:var(--j-quiet); text-transform:uppercase; letter-spacing:.11em; font:9px var(--j-mono); margin-bottom:10px; }
.fact-value { font-size:13px; line-height:1.55; }
.case-section { padding:clamp(86px,12vw,158px) 0; }
.case-intro { display:grid; grid-template-columns:1fr; }
.case-intro h2 { font-size:clamp(36px,5.1vw,68px); line-height:.98; letter-spacing:-.07em; margin:0; max-width:470px; }
.case-intro h2 em { font-family:"Special Elite",serif; color:var(--j-ochre-deep); font-style:normal; font-weight:400; }
.case-client-quote { margin:32px 0 0; max-width:420px; border-left:1px solid var(--j-ochre); padding-left:18px; }
.case-client-quote p { margin:0; color:var(--j-ink); font:400 clamp(18px,2vw,24px)/1.5 "Special Elite",serif; }
.case-client-quote cite { display:block; margin:18px 0 0; color:var(--j-quiet); font:10px var(--j-mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.case-intro-copy { max-width:570px; margin:0 auto; }
.case-intro-copy p { font-size:16px; line-height:1.9; color:#555950; margin:0 0 20px; }
.case-intro-copy p:first-child { color:var(--j-ink); font-size:19px; line-height:1.65; }
.case-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,9vw,125px); align-items:center; }
.case-split-art { min-height:490px; position:relative; background:#d5d0c4; overflow:hidden; }
.case-split-art img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.case-split-copy h2 { font-size:clamp(40px,5vw,68px); line-height:.93; letter-spacing:-.075em; margin:20px 0 25px; }
.case-split-copy p { color:#555950; font-size:15px; line-height:1.85; max-width:465px; }
.case-split-copy .eyebrow { margin-bottom:25px; }
.case-dark-band { background:#292d27; color:var(--j-paper); padding:clamp(72px,10vw,128px) 0; position:relative; overflow:hidden; }
.case-dark-inner { display:grid; grid-template-columns:.75fr 1.25fr; gap:9vw; align-items:start; }
.case-dark-band .eyebrow { color:var(--j-sage); }
.case-dark-band h2 { font-size:clamp(40px,6vw,78px); line-height:.92; letter-spacing:-.08em; margin:24px 0 0; }
.case-dark-copy p { color:rgba(243,239,231,.74); font-size:15px; line-height:1.85; max-width:540px; margin:0 0 22px; }
.case-dark-copy p:last-child { margin-bottom:0; }
.brand-board { margin-top:clamp(50px,8vw,92px); display:grid; grid-template-columns:1.25fr .75fr; min-height:340px; }
.brand-board-logo { background:#272922; border:1px solid rgba(243,239,231,.2); padding:clamp(30px,7vw,90px); display:flex; flex-direction:column; justify-content:space-between; }
.brand-board-logo img { width:100%; max-width:700px; align-self:center; }
.brand-board-logo small,.brand-board-type small { font:9px var(--j-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(243,239,231,.6); }
.brand-board-type { background:var(--j-paper-deep); color:var(--j-ink); display:flex; flex-direction:column; justify-content:space-between; padding:30px; }
.brand-board-type .specimen { font:clamp(43px,6vw,78px)/.9 "Special Elite",serif; color:#786442; letter-spacing:-.055em; }
.brand-board-type .type-caption { font:10px var(--j-mono); color:#686a61; text-transform:uppercase; letter-spacing:.1em; line-height:1.7; }
.palette-row { display:flex; margin-top:16px; gap:8px; }
.palette-chip { height:48px; flex:1; position:relative; }
.palette-chip span { position:absolute; left:0; top:55px; color:rgba(243,239,231,.6); font:8px var(--j-mono); white-space:nowrap; }
.palette-chip:nth-child(1) { background:#ebe5db; }.palette-chip:nth-child(2) { background:#9e855d; }.palette-chip:nth-child(3) { background:#dcd6cb; }.palette-chip:nth-child(4) { background:#a4c1b6; }.palette-chip:nth-child(5) { background:#dca29f; }
.brand-board { margin-bottom:70px; }
.palette-row { margin-bottom:12px; }
.case-product { background:#d7d1c5; }
.product-layout { display:grid; grid-template-columns:1fr .85fr; gap:9vw; align-items:center; }
.product-art { position:relative; aspect-ratio:1; min-height:0; overflow:hidden; background:#a4c1b6; }
.product-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.product-copy h2 { font-size:clamp(40px,5.4vw,72px); line-height:.9; letter-spacing:-.075em; margin:20px 0 24px; }
.product-copy p { color:#555950; line-height:1.85; font-size:15px; }
.product-copy .product-note { border-top:1px solid var(--j-line); padding-top:18px; margin-top:28px; font:10px/1.8 var(--j-mono); text-transform:uppercase; letter-spacing:.07em; color:var(--j-quiet); }
.preview-section { background:#dcd6cb; padding:clamp(76px,10vw,130px) 0; }
.preview-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:34px; }
.preview-heading h2 { font-size:clamp(40px,6vw,78px); line-height:.9; letter-spacing:-.08em; margin:20px 0 0; }
.preview-heading p { max-width:330px; color:#5c6057; font-size:13px; line-height:1.75; margin:0; }
.preview-shell { background:#f7f5ef; border:1px solid rgba(37,40,34,.2); box-shadow:0 18px 50px rgba(55,52,43,.12); }
.preview-browserbar { min-height:54px; border-bottom:1px solid var(--j-line); display:flex; align-items:center; padding:0 16px; gap:14px; }
.preview-dots { display:flex; gap:5px; }
.preview-dots i { width:7px; height:7px; border-radius:50%; background:#c7c1b6; }
.preview-url { background:#e9e6df; border-radius:3px; color:#676960; padding:7px 12px; font:9px var(--j-mono); flex:1; text-align:center; }
.preview-external { font-size:11px; font-weight:700; text-decoration:none; white-space:nowrap; }
.preview-iframe-wrap { height:clamp(430px,65vw,720px); background:#ebe5db; position:relative; }
.preview-iframe-wrap iframe { width:100%; height:100%; border:0; background:#ebe5db; }
.preview-fallback { display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; padding:32px; background:var(--j-paper); z-index:1; }
.preview-fallback.is-visible { display:flex; }
.preview-fallback p { max-width:420px; line-height:1.7; color:var(--j-quiet); }
.preview-fallback a { display:inline-block; margin-top:12px; }
.preview-note { font:9px/1.7 var(--j-mono); letter-spacing:.045em; color:#62655c; margin:13px 0 0; }
.case-end { padding:clamp(90px,14vw,175px) 0; display:grid; grid-template-columns:1fr auto; align-items:end; gap:32px; }
.case-end h2 { font-size:clamp(44px,7.7vw,100px); line-height:.86; letter-spacing:-.09em; margin:20px 0 0; max-width:780px; }
.case-end .p-link-arrow { margin-bottom:8px; white-space:nowrap; }
.sticky-preview-link { position:fixed; right:24px; bottom:24px; z-index:8; text-decoration:none; color:var(--j-paper); background:#292d27; display:flex; align-items:center; gap:13px; padding:14px 18px; font-size:11px; font-weight:700; box-shadow:0 8px 26px rgba(37,40,34,.2); }
.sticky-preview-link span { font-size:16px; }
.portfolio-body .sticky-preview-link { color:var(--j-paper); }
.sticky-preview-link:hover { background:var(--j-ochre-deep); }

.reveal-ready [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
@media (max-width:800px) {
 .p-shell { width:min(100% - 40px, 680px); }
 .p-header { height:72px; }
 .p-nav { display:none; }
 .p-menu-toggle { display:block; }
 .p-mobile-menu { display:flex; position:absolute; top:72px; left:0; right:0; background:var(--j-paper); border-bottom:1px solid var(--j-line); padding:10px 20px 22px; flex-direction:column; gap:0; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
 .p-mobile-menu { visibility:hidden; }
 .p-mobile-menu.is-open { opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
 .p-mobile-menu a { text-decoration:none; padding:14px 0; border-bottom:1px solid var(--j-line); font-size:14px; font-weight:600; }
 .p-mobile-menu a:last-child { border:0; }
 .work-hero { grid-template-columns:1fr; gap:34px; padding-top:78px; }
 .work-hero h1 { margin-top:30px; font-size:clamp(76px,19vw,136px); }
 .work-intro { max-width:500px; }
 .work-intro p { font-size:17px; }
 .work-feature { grid-template-columns:1fr; }
 .work-feature-visual { min-height:clamp(330px,70vw,540px); }
 .work-feature-copy { min-height:390px; padding:32px; }
 .work-feature-copy h2 { margin:42px 0 18px; }
 .work-after { grid-template-columns:1fr; gap:18px; padding:100px 0; }
 .work-after p { margin:14px 0 0; }
 .case-headline { grid-template-columns:1fr; gap:34px; }
 .case-heading h1 { font-size:clamp(75px,18vw,138px); }
 .case-deck { max-width:470px; }
 .case-hero-art { height:clamp(380px,78vw,620px); }
 .case-quickfacts { grid-template-columns:1fr 1fr; }
 .fact:nth-child(2) { border-right:0; }
 .fact:last-child { grid-column:1/-1; border-top:1px solid var(--j-line); padding:18px 0; }
 .case-intro,.case-dark-inner { grid-template-columns:1fr; gap:34px; }
 .case-split,.product-layout { grid-template-columns:1fr; }
 .case-split-art { min-height:clamp(340px,80vw,550px); }
 .brand-board { grid-template-columns:1fr; }
 .brand-board-logo { min-height:270px; }
 .brand-board-type { min-height:230px; }
 .product-art { min-height:0; }
 .preview-heading { align-items:start; flex-direction:column; }
 .preview-iframe-wrap { height:65vh; min-height:480px; }
 .case-end { grid-template-columns:1fr; align-items:start; }
 .case-end .p-link-arrow { margin-top:10px; }
}
@media (max-width:520px) {
 .p-shell { width:calc(100% - 36px); }
 .p-footer-top { flex-direction:column; padding-bottom:34px; }
 .p-footer-links { width:100%; justify-content:space-between; }
 .p-footer-bottom { gap:14px; flex-direction:column; }
 .work-feature-copy { min-height:420px; padding:26px 22px; }
 .work-feature-bottom { align-items:center; }
 .work-tags { gap:6px; }
 .work-tags span { padding:7px 8px; font-size:8px; }
 .fact { padding-right:10px; }
 .fact + .fact { padding-left:14px; }
 .case-hero-art { height:420px; }
 .case-section { padding:78px 0; }
 .palette-chip { height:34px; }
 .palette-chip span { font-size:7px; }
 .preview-browserbar { gap:9px; padding:0 9px; }
 .preview-url { font-size:7px; padding:7px 5px; }
 .preview-external { font-size:10px; }
 .sticky-preview-link { right:12px; bottom:12px; padding:12px 14px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
 [data-reveal] { opacity:1; transform:none; }
}