/* N · Framer — a 1:1 copy of James's published Framer site (wild-palette-430926.framer.app). Every size, offset,
   font and colour below is Framer's own layout rule or a value measured from the live page at each breakpoint:
   Desktop ≥1660, Laptop 1440–1659, Tablet 810–1439, Phone <810. Semantics and accessibility follow Summer. */
:root{--bg:#141414;--ink:#fff;--body:#d6d6d6;--mute:#a8a8a8;--line:rgba(255,255,255,.12);--panel:#262626;--accent:#FF9231;--cream:#F7F1E8;
  --sans:'Google Sans','Inter',system-ui,sans-serif;--serif:'Playfair Display',Georgia,serif;--display:var(--sans);--max:none;
  --cs-title-font:600 clamp(40px,5vw,72px)/1.04 var(--serif);--cs-title-ls:-.02em}
html{background:var(--bg);scroll-padding-top:24px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.2 var(--sans);overflow-x:clip}
#app{overflow:clip}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{border-radius:999px;background:var(--cream);color:#141414;font-weight:700}
.accent{color:var(--accent)}
p,h1,h2,h3,ul{margin:0}

/* ---------- header: Glow's floating bar (mark + Meanjin time, pill nav), glass once the page scrolls ---------- */
.top{position:fixed;z-index:50;top:clamp(10px,1.4vw,18px);left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 6px 6px 14px;border-radius:18px;transition:background-color .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
.top.is-solid{background:rgba(20,20,20,.6);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.top-l{display:flex;align-items:center;gap:18px;min-width:0}
.logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);text-decoration:none}
.logo-img{display:block;width:23px;height:auto;aspect-ratio:1.1039;object-fit:contain}
.logo-t{font:italic 700 17px/1 var(--sans);letter-spacing:-.09em;white-space:pre}
.top-time{font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--body);white-space:nowrap}
.top-nav{display:flex;align-items:center;gap:2px;padding:5px;border-radius:14px;background:rgba(20,20,20,.35);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.top.is-solid .top-nav{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.top-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none;transition:background-color .3s cubic-bezier(.22,1,.36,1)}
.top-nav a:hover,.top-nav a[aria-current]{background:rgba(255,255,255,.12)}
.top-nav .top-cta{margin-left:4px;background:var(--cream);color:#141414}
.top-nav .top-cta:hover,.top-nav .top-cta[aria-current]{background:#fff}
.top a:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
@media (max-width:860px){.top{top:10px;left:10px;right:10px}}
@media (max-width:600px){.top-time{display:none}.top-nav a{padding:0 10px;font-size:13px}}
@media (max-width:359px){.top{padding-left:8px}.top-nav{padding:3px}.top-nav a{padding:0 8px}}
@media (forced-colors:active){.top-nav a[aria-current]{text-decoration:underline}}

/* ---------- hero: a framed field of coloured light, the name across the bottom ---------- */
.hero{height:calc(100svh / var(--z,1));min-height:640px}
.hx-panel{position:relative;isolation:isolate;height:100%;overflow:hidden;background:var(--bg)}
/* the light: N's indigo, magenta and orange, blurred into one another, drifting slowly */
.hx-light{position:absolute;inset:-12%;z-index:-3;filter:blur(clamp(40px,6vw,110px)) saturate(1.25)}
.hx-light i{position:absolute;border-radius:50%}
.hx-light .b1{left:-14%;top:-22%;width:46%;height:62%;background:#2c37b8;opacity:.75;animation:hx-d1 28s ease-in-out infinite alternate}
.hx-light .b2{left:32%;top:-14%;width:40%;height:58%;background:#c0215f;opacity:.8;animation:hx-d2 34s ease-in-out infinite alternate}
.hx-light .b3{right:-12%;top:-26%;width:52%;height:72%;background:#f0661e;opacity:.9;animation:hx-d3 30s ease-in-out infinite alternate}
.hx-light .b4{right:8%;top:30%;width:30%;height:34%;background:#6e2593;opacity:.4}
@keyframes hx-d1{to{transform:translate(8%,6%) scale(1.08)}}@keyframes hx-d2{to{transform:translate(-10%,-6%) scale(.92)}}@keyframes hx-d3{to{transform:translate(-6%,10%) scale(1.06)}}
.motion-paused .hx-light i{animation-play-state:paused}
/* grain, and a fall to near-black under the name so the type always reads */
.hx-panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:180px;opacity:.14;mix-blend-mode:overlay;pointer-events:none;-webkit-mask-image:linear-gradient(#000 45%,transparent 90%);mask-image:linear-gradient(#000 45%,transparent 90%)}
/* the colour lives in the upper half and falls to the page black, so the hero runs straight into the cards */
.hx-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,20,.55),rgba(20,20,20,.15) 18%,transparent 32%,rgba(20,20,20,.45) 52%,rgba(20,20,20,.88) 74%,var(--bg) 94%);pointer-events:none}
/* the river, as linework lit by the colour underneath */
.hx-art{position:absolute;z-index:-2;top:2%;right:-10%;width:max(112%,1100px);aspect-ratio:1473/509;mix-blend-mode:soft-light;opacity:.9}
.hx-art>div{height:100%}
/* tagline, top centre */
.hx-tag{position:absolute;top:clamp(84px,11vh,120px);left:50%;width:min(46ch,calc(100% - 48px));translate:-50% 0;text-align:center;font:400 clamp(16px,1.35vw,21px)/1.4 var(--sans);color:#f4efe6;text-wrap:balance}
.hx-tag em{font:italic 500 1.1em/1 var(--serif);color:#fff}
.hx-tag span{color:#cdeef1}
.hx-tag{text-shadow:0 1px 14px rgba(11,9,16,.55)}
/* the meeting place, small, like a mark at the edge of the frame */
.hx-sigil{position:absolute;right:clamp(16px,2vw,30px);top:50%;width:clamp(34px,3vw,52px);aspect-ratio:74/59;translate:0 -50%;rotate:152deg;opacity:.95}
.hx-sigil svg{display:block;width:100%;height:100%;overflow:visible}
/* the name: tight grotesk + italic serif, filling the width */
.hx-bottom{position:absolute;left:clamp(14px,1.8vw,28px);right:clamp(14px,1.8vw,28px);bottom:clamp(14px,1.6vw,24px)}
.hx-h{display:flex;align-items:baseline;gap:.06em;white-space:nowrap;font-size:min(380px,calc((100vw - 2 * clamp(8px,1.2vw,18px) - 2 * clamp(14px,1.8vw,28px)) / 5.02));line-height:.92;color:#f4efe6;
  background:linear-gradient(100deg,#f7f1e8 28%,#e9f4f1 60%,#c9eef0 86%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hx-first{margin-left:-.055em;font:500 1em/.92 'Inter Tight','Google Sans',sans-serif;letter-spacing:-.065em}
.hx-last{padding-right:.08em;font:italic 400 1.02em/.92 var(--serif);letter-spacing:-.045em}
.hx-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(10px,1.4vw,20px);padding-top:clamp(10px,1.2vw,16px);border-top:1px solid rgba(247,241,232,.18)}
.hx-status{font:500 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#d9d1c6}
.hx-status i{font:italic 500 1.15em/1 var(--serif);letter-spacing:0;text-transform:none}
.hx-pill{flex:none;width:168px;padding:0 14px;box-shadow:0 2px 10px rgba(20,17,15,.35)}
.hx-pill:focus-visible{box-shadow:0 0 0 3px var(--accent),0 0 0 6px rgba(255,255,255,.9)}
@media (max-width:809px){
  .hero{height:100svh;min-height:600px}

  .hx-art{top:14%;right:-70%;width:280%}
  .hx-tag{top:96px;left:20px;width:auto;right:20px;translate:none;text-align:left}
  .hx-sigil{top:auto;bottom:calc(100% - 92px);right:20px;display:none}
  .hx-h{flex-direction:column;align-items:flex-start;gap:0;font-size:min(30vw,150px)}
  .hx-row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.hx-light i{animation:none}}
@media (forced-colors:active){.hx-h{background:none;-webkit-text-fill-color:CanvasText}.hx-light,.hx-sigil{display:none}}

/* ---------- page body ---------- */
.page{display:flex;flex-direction:column;align-items:flex-start;gap:40px;width:1660px;max-width:100%;padding:56px 79px 56px 80px}
.projects{display:flex;flex-direction:column;align-items:flex-start;gap:80px;padding:40px 0}
.grp{display:flex;flex-direction:column;align-items:flex-start;gap:25px}
.sec-row{display:flex;align-items:center;gap:16px}
.sec-h{font:600 36px/43.2px var(--sans);letter-spacing:-.03px;white-space:pre}
.dots{display:flex;align-items:center;gap:8px;padding-top:5px}
.dots i{display:block;width:18px;height:18px;border-radius:50%;background:var(--accent)}
.about-sec{display:flex;flex-direction:column;gap:40px;padding:40px 0}
.about-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:25px;padding:0 3px}
.duo{display:flex;align-items:center;gap:28px}

/* tag pill, as on the project cards */
.tag{display:grid;place-items:center;flex:none;width:110px;height:18px;border-radius:119.39px 124.88px 97.43px 122.13px;background:#fff;font:italic 700 8px/10px var(--sans);white-space:nowrap}

/* ---------- About me (Framer component, hover animates the collage) ---------- */
.ab{position:relative;flex:none;width:1054px;height:527px;overflow:clip;border-radius:16px 16px 0;background:#30398C;color:#fff}
.ab-in{position:absolute;inset:0;border-radius:23.33px}
.ab-pics{position:absolute;width:490px;height:460px;top:calc(48.3871% - 230px);right:67px}
.ab-pics>*,.ab-pics img,.ab-p2b{position:absolute;transition:left .45s var(--spring),top .45s var(--spring),right .45s var(--spring),bottom .45s var(--spring),width .45s var(--spring),height .45s var(--spring),rotate .45s var(--spring),translate .45s var(--spring)}
.ab-pics img{display:block}
.ab-p1{width:129px;height:150px;top:0;right:0}
.ab-p1i{width:103px;height:auto;aspect-ratio:.785714;top:9px;left:13px;rotate:12deg;border-radius:14px;object-fit:fill}
.ab-p2{width:66px;height:67px;top:153px;left:33px}
.ab-p2b{width:54px;height:55px;top:6px;left:6px;rotate:-15deg;border-radius:11px;background:var(--cream)}
.ab-p2i{width:27px;height:40px;top:8px;left:13px;object-fit:cover}
.ab-p3{width:139px;height:159px;bottom:0;left:0}
.ab-p3i{width:106px;height:auto;aspect-ratio:.785714;top:12px;left:16px;rotate:-16deg;border-radius:12px;object-fit:fill}
.ab-p4{width:67px;height:68px;top:39px;left:34px}
.ab-p4 svg{display:block;width:100%;height:100%}
.ab-me{width:389px;height:auto;aspect-ratio:.935096;top:54%;left:53%;translate:-50% -50%;object-fit:cover}
.ab-copy{position:absolute;top:33px;left:42px;display:flex;flex-direction:column;align-items:flex-start;gap:16.4672px;width:424px}
.ab .tag{color:#30398C}
.ab-4k{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.ab-h{width:424px;font:500 54px/47.52px var(--serif);letter-spacing:-.08em}
.ab-i7{display:flex;flex-direction:column;align-items:flex-start;gap:19px;width:100%}
.ab-text,.ab-roles{font:400 18px/.99 var(--sans)}
.ab-text{width:424px}
.ab-text p+p{margin-top:.99em}
.ab-roles{width:390px;padding:0;list-style:none}
.ab-roles li{position:relative;padding-left:1.286em}
.ab-roles li::before{content:'•';position:absolute;left:0;top:0}
.ab b{font-weight:700}

/* ---------- Let's Yarn ---------- */
.yn{position:relative;flex:none;width:420px;align-self:stretch;overflow:clip;border-radius:17px;background:#824331;color:#fff}
.yn-in{position:absolute;top:31px;left:42px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:min-content}
.yn-tagrow{display:flex;align-items:center;gap:10px;width:271px}
.yn .tag{color:#824331;font-size:8.23px}
.yn-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:296px}
.yn-3z{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%}
.yn-h{width:207px;font:500 54px/47.52px var(--serif);letter-spacing:-.08em}
.yn-t{width:262px;font:400 18px/19.8px var(--sans)}
.yn-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:min-content;padding:0;list-style:none}
.yn-a{display:flex;align-items:flex-start;gap:10px;color:#fff;text-decoration:none;font:400 24px/28.8px var(--serif);white-space:pre}
.yn-a:hover .yn-l{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.yn-a:focus-visible{outline-color:#fff}
.yn-arrow{display:block;flex:none;width:45px;aspect-ratio:1.39394}
.yn-arrow svg{display:block;width:100%;height:100%}
.yn-r1,.yn-r2,.yn-r3{position:absolute;pointer-events:none}
.yn-r1{width:118px;height:114px;bottom:-30px;right:-31px}
.yn-r2{width:76px;height:126px;top:3px;left:445px}
.yn-r3{width:193px;height:314px;top:234px;left:-94px}
.yn-r1 svg,.yn-r2 svg,.yn-r3 svg,.ft-art svg{display:block;width:100%;height:100%}

/* ---------- footer ---------- */
.ft{display:flex;justify-content:center;align-items:flex-start;padding:56px 0 56px 80px}
.ft-main{position:relative;flex:1 0 0;width:1px;display:flex;gap:20px}
.ft-in{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:75%;max-width:1600px}
.ft-sign{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:212px;height:42px}
.ft-thanks{font:500 24px/21.12px var(--serif);letter-spacing:-1.92px;color:var(--cream);white-space:pre}
.ft-built{font:400 12px/14.4px var(--serif);color:#C8BFB3;white-space:pre}
.ft-ack{width:599px;font:400 12px/14.4px var(--serif);color:#fff}
.ft-art{position:absolute;z-index:1;width:208px;top:-123px;bottom:-116px;right:-67px;rotate:191deg;pointer-events:none}

/* ---------- hover: desktop and laptop, as on Framer ---------- */
@media (hover:hover) and (min-width:1660px){
  .ab:hover .ab-p1{top:-10px;right:-60px}
  .ab:hover .ab-p1i{top:10px;left:-20px;width:118px;rotate:25deg}
  .ab:hover .ab-p2{width:87px;height:88px;top:138px;left:-4px}
  .ab:hover .ab-p2b{width:71px;height:72px;top:8px;left:8px;rotate:-28deg}
  .ab:hover .ab-p2i{width:36px;height:53px;top:11px;left:17px}
  .ab:hover .ab-p3{bottom:-10px;left:-40px}
  .ab:hover .ab-p3i{width:119px;top:-4px;left:47%;translate:-50% 0;rotate:-24deg}
  .ab:hover .ab-p4{width:82px;height:83px;top:0;left:6px;rotate:8deg}
  .ab:hover .ab-me{width:360px;top:53%}
}

/* ---------- Laptop 1440–1659 ---------- */
@media (min-width:1440px) and (max-width:1659px){
  .page{width:1440px;padding:56px 80px}
  .projects,.about-sec,.about-wrap,.duo{align-self:stretch}
  .ab{width:873px;border-radius:16px 16px 15px}
  .ab-pics{width:372px;height:349px;top:calc(47.6281% - 174.565px)}
  .ab-p1{width:98px;height:114px}
  .ab-p1i{width:78px;top:7px;left:10px;border-radius:10.63px}
  .ab-p2{width:50px;height:51px;top:116px;left:25px}
  .ab-p2b{width:41px;height:42px;top:5px;left:5px;border-radius:8.35px}
  .ab-p2i{width:20px;height:30px;top:6px;left:10px}
  .ab-p3{width:106px;height:121px}
  .ab-p3i{width:81px;top:50%;left:45%;translate:-50% -50%;border-radius:9.11px}
  .ab-p4{width:51px;height:52px;top:30px;left:26px}
  .ab-me{width:295px}
  .ab-copy{width:358px}
  .ab-4k{width:98%}
  .ab-h{width:354px}
  .ab-text{width:311px}
  .ab-roles{width:353px}
  .ab-text,.ab-roles{font-size:14px}
  .yn{flex:1 0 0;width:1px}
  .ft-art{top:-89px;bottom:-110px;right:-43px}
}
@media (hover:hover) and (min-width:1440px) and (max-width:1659px){
  .ab:hover .ab-p1i{top:-22px;left:26px;width:93px;rotate:20deg}
  .ab:hover .ab-p2{left:-1px;rotate:-26deg}
  .ab:hover .ab-p2b{width:57px;height:58px;top:-9px;left:-13px}
  .ab:hover .ab-p2i{width:28px;height:42px;top:8px;left:14px}
  .ab:hover .ab-p3i{width:98px;top:-4px;left:-46px;translate:0 0;rotate:-25deg}
  .ab:hover .ab-p4{width:79px;height:79px;top:-3px;left:-16px;rotate:-22deg}
  .ab:hover .ab-me{width:279px;left:50%}
  .ab:hover .ab-roles{width:307px}
}

/* ---------- Let's Yarn below desktop (Framer "Variant 2") ---------- */
@media (max-width:1659px){
  .yn-in{top:32px;left:50%;translate:-50% 0}
  .yn-h{font-size:44px;line-height:38.72px;letter-spacing:-3.52px}
  .yn-t{font-size:14px;line-height:15.4px}
  .yn-links,.yn-links li:first-child,.yn-links li:first-child .yn-a{width:100%}
  .yn-l{display:flex;align-items:center;align-self:stretch}
}

/* ---------- header, About card: tablet and phone ---------- */
@media (max-width:1439px){
  /* Framer's tablet About row collapses to zero height on the live site; its phone cards are used here. */
  .ab{width:360px;height:822px}
  .ab-in{inset:auto;left:48%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:min-content;border-radius:10.12px}
  .ab-pics{position:relative;order:1;width:286px;height:269px;top:auto;right:auto}
  .ab-p1{width:75px;height:88px}
  .ab-p1i{width:60px;top:5px;left:7px;border-radius:8.18px}
  .ab-p2{width:39px;height:39px;top:89px;left:19px}
  .ab-p2b{width:32px;height:32px;top:4px;left:4px;border-radius:6.43px}
  .ab-p2i{width:16px;height:23px;top:5px;left:8px}
  .ab-p3{width:81px;height:93px}
  .ab-p3i{width:62px;top:7px;left:10px;border-radius:7.01px}
  .ab-p4{width:39px;height:40px;top:23px;left:20px}
  .ab-me{width:227px}
  .ab-copy{position:relative;order:0;top:auto;left:auto;width:min-content}
  .ab-4k{width:min-content}
  .ab-i7{align-self:stretch;width:auto}
  .ab-h{width:284px}
  .ab-text{width:250px}
  .ab-roles{width:233px}
  .ab-text,.ab-roles{font-size:14px}
  .yn{width:360px}
}

/* ---------- Tablet 810–1439 ---------- */
@media (min-width:810px) and (max-width:1439px){
  .page{width:100%;padding:56px 30px}
  .dots{padding:5px 0 2px}
  .projects,.about-sec{align-self:stretch}
  .ft{overflow:clip;padding:56px 30px}
  .ft-in{width:387px}
  .ft-ack{width:100%}
}

/* ---------- Phone <810 ---------- */
@media (max-width:809px){
  .page{width:100%;align-items:center;padding:56px 20px}
  .projects,.grp,.about-wrap{align-items:center}
  .sec-h{font-size:27px;line-height:28.62px;letter-spacing:-.02px}
  .dots{gap:4px}
  .dots i{width:13px;height:13px}
  /* heading rows are 370 wide around the 360 cards, as on Framer; the personal one is 350 */
  .sec-row{width:370px}
  .sec-row-n{width:350px}
  .grp-personal{align-items:flex-start}
  .duo{flex-direction:column;width:360px}
  .ab,.yn{width:100%}
  .yn{height:527px;align-self:auto}
  .ft{align-items:center;min-height:317px;padding:20px 0 56px}
  .ft-main{flex:none;justify-content:center;align-items:center;width:min(309px,calc(100% - 32px))}
  .ft-in{flex:1 0 0;width:1px;min-width:100px}
  .ft-sign{align-items:center;width:100%;height:auto;min-height:42px}
  .ft-ack{width:100%;text-align:center}
  .ft-art{top:auto;right:auto;height:330px;bottom:-284px;left:calc(50% - 104px);rotate:-90deg}
}
@media (max-width:389px){.projects,.grp,.about-sec,.about-wrap{align-self:stretch;width:auto;min-width:0}.sec-row,.sec-row-n,.duo{width:100%;max-width:360px}.pc-grid{width:100%}.ab{height:calc(822px * var(--s,1))}.yn{height:calc(527px * var(--s,1))}.ab-in,.yn-in{scale:var(--s,1)}.yn-in{transform-origin:50% 0;top:calc(32px * var(--s,1))}}

/* ---------- case studies (Framer /nbn, /site-search, /gyg-2) ----------
   Framer's case breakpoints: desktop ≥1400, tablet 810–1399, phone <810. The row is the CaseStudyNav rail,
   13px gap, the case column, 13px gap and Framer's invisible balancing box, centred. Measured from the live pages;
   search and GYG use nbn's responsive rules (the live search page shows its phone layout at every size, and GYG
   its desktop layout). */
.page-case{--rail:202px;--col:925px;--rx:92px}
.page-case[data-project=search]{--rail:247px;--col:906px;--rx:0px}
.page-case[data-project=gyg]{--rail:224px;--rx:41px}
@media (min-width:1660px){.page-case[data-project=nbn]{--rail:325px}}
.cm{display:flex;flex-direction:column;align-items:center}
.ci{display:flex;align-items:flex-start;justify-content:center;gap:13px;max-width:1600px}
.page-case[data-project=gyg] .ci{width:75%}
.cn{position:sticky;top:0;z-index:1;flex:none;width:var(--rail);padding-top:52px}
.cc{flex:none;width:var(--col);min-width:0}
.page-case[data-project=gyg] .cc{flex:1 0 0;width:1px}
.cx{flex:none;width:var(--rx)}
.page-case[data-project=search] .cx{display:none}

/* CaseStudyNav, desktop rail */
.cn-rail{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font:500 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.cn-rail a{align-self:stretch;color:#948A7F;text-decoration:none;overflow-wrap:break-word;transition:color .25s ease,transform .25s ease}
.cn-rail a:not(.on):hover{color:#EDE6DA}
.cn-rail a.on{color:#FF9231;transform:translateX(2px)}
.cn-rail .cn-back{align-self:flex-start;margin-bottom:12px;font-size:12px;white-space:nowrap}

/* header block */
.ch-cover{position:relative;margin:0;border-radius:20px;overflow:hidden}
.ch-cover img{display:block;width:100%;height:auto;object-fit:contain}
.ch-motion{position:absolute;right:16px;bottom:16px}
.ch-hero{display:flex;flex-direction:column;gap:33px;padding:35px 0 40px}
.ch-main{display:flex;flex-direction:column;gap:22px;width:90%}
.ch-facts{display:flex;align-items:stretch}
.ch-disc{min-height:200px;padding:44px 16px 24px;border:1px solid rgba(200,191,179,.4);border-radius:18px;background:#242424;color:var(--cream)}
.ch-disc-h{margin-bottom:23px;font:600 16px/20.8px var(--sans)}
.ch-disc p{font:400 16px/23.2px var(--sans)}

/* sections */
.cs-sec{padding:56px 0;scroll-margin-top:130px}
.cs-sec:focus{outline:none}
.page-case .cs-label{margin:0 0 8px;font:600 13px/15.6px var(--sans);letter-spacing:.005em;text-transform:uppercase;color:var(--accent)}
.page-case .cs-h{margin:0 0 20px;font:600 36px/43.2px var(--sans);letter-spacing:-.03px;color:#fff;text-wrap:pretty}
.page-case .cs-sub{margin:7px 0 0;font:600 36px/43.2px var(--sans);letter-spacing:-.03px;color:#fff}
.page-case .cs-flow{display:flex;flex-direction:column;gap:20px;min-width:0}
.page-case .cs-flow>*{margin:0}
.page-case .cs-flow>:is(.cs-fig,.jw-media-group,.jw-media-pair,.jw-search-demo){margin-top:7px}
.page-case .cs-flow>.cs-fig+.cs-fig{margin-top:0}
.page-case .cs-p,.page-case .cs-list{max-width:98%;font:400 18px/27px var(--sans);letter-spacing:-.03em;color:#C8BFB3}
.page-case .cs-list{padding-left:23px}
.page-case .cs-list li{margin:0}
.page-case .cs-flow>.cs-fig+.cs-sub{margin-top:7px}
.page-case .jw-media-group>.jw-media-card:not(.is-tall):not(.is-compact) .jw-showcase{aspect-ratio:453.5/465;min-height:0}
.page-case .jw-media-group>.jw-media-card.is-compact .jw-showcase{aspect-ratio:453.5/232;min-height:0}
.page-case .cs-fig{padding:0;border:0;background:none;overflow:hidden}
/* the text descriptions stay for screen readers; Framer shows none */
.page-case .jw-media-details{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Framer's solution-preview panels */
.page-case .jw-media-group,.page-case .jw-media-pair{gap:18px}
.page-case .jw-media-card.is-tall .jw-showcase{background:#0a0a0a}
.page-case .jw-showcase{padding:31px;border-radius:18px}
.page-case .jw-showcase figcaption{font:400 12px/14.4px var(--sans);color:#B1B1B1}
/* a label directly before a figure becomes the figure's panel caption, as on Framer */
.page-case .cs-fig.is-panel{position:relative;display:flex;justify-content:center;aspect-ratio:925/534;padding:41px 0 0;background:#121212}
.page-case .cs-fig.is-panel figcaption{position:absolute;left:44px;top:35px;font:400 12px/14.4px var(--sans);color:#B1B1B1}
.page-case .cs-fig.is-panel img{width:21.5%;height:auto;border-radius:18px;align-self:flex-start}
/* two-column sections (nbn User needs): copy left, image right */
.page-case .cs-sec.is-split{display:grid;grid-template-columns:446px 446px;column-gap:33px;align-items:start}
.page-case .cs-sec.is-split>.cs-label,.page-case .cs-sec.is-split>.cs-h{grid-column:1}
.page-case .cs-sec.is-split .cs-flow{display:contents}
.page-case .cs-sec.is-split .cs-flow>:not(.cs-fig){grid-column:1;margin-bottom:20px}
.page-case .cs-sec.is-split .cs-flow>.cs-fig{grid-column:2;grid-row:1 / span 20;margin:0;border-radius:0}
.page-case .cs-sec.is-split .cs-p,.page-case .cs-sec.is-split .cs-list{max-width:none}
.page-case .cs-cap{font:600 13px/15.6px var(--sans);letter-spacing:.005em;color:var(--cream)}
.page-case .cs-fig,.page-case .cs-fig img,.page-case .cs-fig video{border-radius:18px}
.page-case .cs-fig img,.page-case .cs-fig video{display:block;width:100%;height:auto}
.page-case .jw-showcase{border-radius:18px}
.page-case .cs-quote-text{color:var(--accent)}

/* CaseStudyNav below 1400px: the floating button and panel, ported from the component */
.cn-m{display:none}
.cn-scrim{position:fixed;inset:0;z-index:2147480000;background:rgba(12,10,7,.66);opacity:0;transition:opacity .532s ease}
.cn-panel{position:fixed;right:18px;bottom:88px;z-index:2147480001;display:flex;flex-direction:column;width:216px;padding:14px 8px;border:1px solid rgba(200,191,179,.14);border-radius:18px;background:#211C15;transform-origin:100% 100%;transform:scale(.72) translateY(10px);opacity:0;transition:transform .76s cubic-bezier(.34,1.3,.5,1),opacity .342s ease}
.cn-panel a{display:block;padding:9px 12px;border-radius:10px;font:500 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:right;text-decoration:none;color:#948A7F;overflow-wrap:break-word;opacity:0;transform:translateX(8px);transition:opacity .304s ease,transform .418s cubic-bezier(.34,1.3,.5,1),color .2s ease}
.cn-panel a.on{color:#FF9231}
.cn-panel a:focus-visible{outline-offset:-2px}
.cn-fab{position:fixed;right:18px;bottom:20px;z-index:2147480002;display:grid;place-items:center;width:58px;height:58px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cn-fab:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}
.cn-blob{position:absolute;inset:0;width:100%;height:100%;fill:#FF9231;transition:transform .76s cubic-bezier(.34,1.3,.5,1)}
.cn-icon{position:relative;width:26px;height:26px;overflow:visible}
.cn-icon g{transform-origin:3.895px 4.635px;transition:transform .76s cubic-bezier(.34,1.3,.5,1)}
.cn-icon path{fill:none;stroke:#241202;stroke-width:.9;stroke-linecap:round}
.cn-m.is-open .cn-scrim{opacity:1}
.cn-m.is-open .cn-panel{transform:scale(1);opacity:1}
.cn-m.is-open .cn-panel a{opacity:1;transform:none}
.cn-m.is-open .cn-blob{transform:rotate(-18deg) scale(1.04)}
.cn-m.is-open .cn-l0{transform:translate(0,2.14px) rotate(40deg)}
.cn-m.is-open .cn-l1{transform:scaleX(0)}
.cn-m.is-open .cn-l2{transform:translate(0,-2px) rotate(-40deg)}
.cn-m.is-open .cn-panel a:nth-child(1){transition-delay:.266s}.cn-m.is-open .cn-panel a:nth-child(2){transition-delay:.301s}
.cn-m.is-open .cn-panel a:nth-child(3){transition-delay:.336s}.cn-m.is-open .cn-panel a:nth-child(4){transition-delay:.371s}
.cn-m.is-open .cn-panel a:nth-child(5){transition-delay:.406s}.cn-m.is-open .cn-panel a:nth-child(6){transition-delay:.441s}
.cn-m.is-open .cn-panel a:nth-child(7){transition-delay:.476s}.cn-m.is-open .cn-panel a:nth-child(8){transition-delay:.511s}
.cn-m.is-open .cn-panel a:nth-child(9){transition-delay:.546s}.cn-m.is-open .cn-panel a:nth-child(10){transition-delay:.581s}

/* tablet 810–1399 */
@media (max-width:1399px){
  .page-case .cs-sec.is-split{display:block}
  .page-case .cs-sec.is-split .cs-flow{display:flex}
  .page-case .cs-sec.is-split .cs-flow>*{margin-bottom:0}
  .cn,.cx{display:none}
  .cn-m{display:block}
  .ci{display:block;width:100%;max-width:none}
  .page-case[data-project=gyg] .ci{width:100%}
  .cc,.page-case[data-project=gyg] .cc{width:auto;padding:0 30px}
  .page-case[data-project=search] .cc{max-width:810px;margin:0 auto}
  .ch-main{width:100%}
  .ch-facts{flex-direction:column;gap:30px}
}
/* phone <810 */
@media (max-width:809px){
  .ch-cover{margin:0 -30px;border-radius:0}
  .ch-cover img{aspect-ratio:1;object-fit:contain}
  .ch-main{gap:32px}
}
@media (max-width:389px){.cc,.page-case[data-project=gyg] .cc{padding:0 20px}.ch-cover{margin:0 -20px}}
@media (prefers-reduced-motion:reduce){.cn-m *,.cn-rail a{transition-duration:.01ms!important;transition-delay:0s!important}}
@media (forced-colors:active){.cn-blob{fill:ButtonText}.cn-icon path{stroke:ButtonFace}.cn-panel{border-color:CanvasText}}

@media (prefers-reduced-motion:reduce){.ab-pics>*,.ab-pics img,.ab-p2b{transition:none}}
@media (forced-colors:active){.hx-bars i,.dots i{background:CanvasText}.hx-o{color:CanvasText}.hx-mark{display:none}.tag{border:1px solid CanvasText}.ab,.yn{border:2px solid CanvasText}}

@media (max-width:389px){
  .sec-row{gap:10px}
  .sec-h{min-width:0;white-space:normal;text-wrap:pretty}
  .dots{flex:none}
}
.page-case{font-variation-settings:"opsz" 18}
.page-case .cs-fig img,.page-case .cs-fig video{max-height:none}
@media (max-width:809px){.page-case .cs-fig.is-panel img{width:27.3%}}
.page-case .cs-fig.is-padded{padding:24px;background:#FCFBFA}
.page-case .cs-fig.is-padded img{border-radius:0}
@media (max-width:809px){.page-case .cs-fig.is-padded{padding:12px}}
/* the floating bar sits over the case page, so the layout starts below it */
.cm{padding-top:88px}
.cn{top:88px;padding-top:0}
.cs-sec{scroll-margin-top:110px}

/* ---------- case text formatted like Summer (/v3/l case pages), in N's colours ---------- */
.page-case{--mute:#b8ada0;--line:rgba(255,255,255,.14)}
.ch-hero{gap:0;padding:40px 0 0}
.ch-main{width:100%;gap:0}
.ch-title{display:block}
.ch-company{margin-bottom:18px;font:700 14px/1 var(--sans);color:var(--accent)}
.ch-h1{max-width:18ch;margin-bottom:22px;font:700 clamp(40px,5.6vw,76px)/.98 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:pretty}
.ch-lead{max-width:none;font:400 clamp(18px,1.5vw,21px)/1.5 var(--sans);color:var(--mute);text-wrap:pretty}
.ch-motion{right:16px;bottom:16px}
/* one four-column grid: the details between two rules, the figures underneath, column for column */
.ch-facts{display:block;margin-top:clamp(40px,5vw,72px)}
.ch-meta,.ch-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.ch-meta{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ch-meta>div{padding:22px 20px 24px 0}
.ch-meta dt{margin-bottom:12px;font:500 13px/1 var(--sans);color:var(--mute)}
.ch-meta dd{margin:0;font:400 15px/1.55 var(--sans);color:var(--ink)}
.ch-stats{padding:44px 0}
.ch-stats>div{padding-right:20px}
.ch-stats dt{font:600 clamp(40px,4.6vw,60px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)}
.ch-stats dd{max-width:22ch;margin:10px 0 0;font:400 14px/1.4 var(--sans);color:var(--mute)}
.ch-disc{min-height:0;margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#1d1d1d;color:var(--body)}
.ch-disc-h{margin:0 0 18px;font:600 15px/1.4 var(--sans);color:var(--ink)}
.ch-disc p{font:400 17px/1.6 var(--sans)}
/* sections */
.cs-sec{padding:0 0 72px}
.cs-sec:first-of-type{padding-top:96px}
.page-case .cs-label{margin:0 0 16px;font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.page-case .cs-h{margin:0 0 22px;font:600 clamp(26px,2.4vw,34px)/1.18 var(--sans);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.page-case .cs-sub{margin:20px 0 0;font:600 clamp(26px,2.4vw,34px)/1.18 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.page-case .cs-flow{gap:16px}
.page-case .cs-flow>:is(.cs-fig,.jw-media-group,.jw-media-pair,.jw-search-demo){margin-top:8px}
.page-case .cs-p,.page-case .cs-list{max-width:none;font:400 17px/1.7 var(--sans);letter-spacing:0;color:var(--body);text-wrap:pretty}
.page-case .cs-list{padding-left:26px;list-style:disc}
.page-case ol.cs-list{list-style:decimal}
.page-case .cs-list li+li{margin-top:2px}
.page-case .cs-cap{font:500 13px/1.4 var(--sans);color:var(--mute)}
.page-case .cs-fig.is-panel figcaption,.page-case .jw-showcase figcaption{color:var(--mute)}
.page-case .cs-sec.is-split .cs-flow>:not(.cs-fig){margin-bottom:16px}
@media (max-width:900px){
  .ch-meta,.ch-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-meta>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ch-meta>div:nth-child(2n){padding-left:0}
  .ch-stats{row-gap:24px}
  .cs-sec:first-of-type{padding-top:64px}
}

/* ---------- Summer's fonts: Bricolage Grotesque for display, Inter for reading ---------- */
:root{--display:'Bricolage Grotesque','Google Sans',sans-serif;--read:'Inter','Google Sans',system-ui,sans-serif}
/* hero: the name all bold, one face; the tagline larger, solid white, Inter */
.hx-first,.hx-last{margin:0;padding:0;font:800 1em/.9 var(--display);letter-spacing:-.05em}
.hx-first{margin-left:-.04em}
.hx-h{gap:.22em}
.hx-tag{font:500 clamp(17px,1.5vw,23px)/1.45 var(--read);color:#fff;text-shadow:0 1px 18px rgba(11,9,16,.7)}
.hx-tag em{font:700 1em/1 var(--display);font-style:normal;color:#ffc08a}
.hx-tag span{color:#fff;font-weight:700}
.hx-status{font:500 14px/1.5 var(--read);letter-spacing:0;text-transform:none;color:#ece5dc}
.hx-status i{font:italic 600 1em/1 var(--read)}

/* ---------- About, laid out like Summer (dark surface) ---------- */
.about-sec,.contact{align-self:stretch}
.about-wrap{align-items:stretch}
.ac{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,64px);align-items:center;padding:14px clamp(14px,4vw,56px) 14px 14px;border-radius:32px;background:#1f1c1a;box-shadow:inset 0 0 0 1px rgba(255,240,230,.08)}
.ac-pic{position:relative;align-self:stretch;min-height:100%;border-radius:22px;overflow:hidden;background:#2b2622}
.ac-pic img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;object-position:50% 30%}
.stickers{position:absolute;left:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;padding:0;list-style:none}
.stickers li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;background:#fff;color:#1c1917;font:700 clamp(13px,1.1vw,15px)/1 var(--display);box-shadow:0 8px 18px -8px rgba(0,0,0,.6);animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i) * -1.7s)}
.stickers li:nth-child(1){rotate:-5deg}.stickers li:nth-child(2){rotate:3deg;margin-left:18px}.stickers li:nth-child(3){rotate:-2deg;margin-left:6px}
.stickers li span{font-size:1.25em;line-height:1}
@keyframes bob{50%{translate:0 -5px}}
.motion-paused .stickers li{animation-play-state:paused}
.ac-copy{padding:clamp(20px,3vw,40px) 0}
.k{display:inline-block;font:700 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.about-name{margin:14px 0 24px;font:800 clamp(42px,5vw,76px)/.95 var(--display);letter-spacing:-.045em;color:#fff}
.about-name span{color:var(--accent)}
.about-p{max-width:58ch;margin-bottom:14px;font:400 17px/1.65 var(--read);color:#d9d2c8}
.about-p strong{font-weight:700;color:#fff}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:26px 0 0;padding:0;list-style:none}
.roles li{display:flex;align-items:center;gap:12px;font:400 15px/1.35 var(--display);color:#f4efe6}
.roles strong{font-weight:700}
.ring{flex:none;width:24px;height:24px;fill:var(--accent)}

/* ---------- Let's Yarn, Summer's sunset card ---------- */
.contact{margin-top:clamp(16px,3vw,40px)}
.contact-card{position:relative;overflow:hidden;isolation:isolate;border-radius:40px 32px 44px 36px;padding:clamp(40px,6vw,96px) clamp(24px,5vw,80px);background:radial-gradient(34% 48% at 98% 2%,rgba(184,86,47,.7),rgba(184,86,47,0) 100%),linear-gradient(110deg,#d33b4d 0%,#d0443d 50%,#c9502b 100%);color:#fff}
.contact-card::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:180px;opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.contact-art{position:absolute;z-index:-1;top:0;bottom:0;right:0;width:52%;color:rgba(255,255,255,.12);-webkit-mask-image:linear-gradient(90deg,transparent,#000 50%);mask-image:linear-gradient(90deg,transparent,#000 50%)}
.contact-art .jw-art{width:100%;height:100%}
.contact-h{margin:0 0 22px;font:800 clamp(64px,12vw,210px)/.84 var(--display);letter-spacing:-.05em}
.bounce{display:inline-block}
.bounce span{display:inline-block;transform-origin:50% 100%}
.contact-h.hop .bounce span{animation:hop .75s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 55ms) both}
.contact-card:hover .bounce span{animation:hop2 .6s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 40ms) both}
@keyframes hop{0%{transform:translateY(.3em) scale(.9);opacity:0}60%{transform:translateY(-.1em) rotate(-3deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes hop2{0%,100%{transform:none}45%{transform:translateY(-.14em) rotate(-4deg)}}
.motion-paused .bounce span{animation:none!important;opacity:1}
.contact-t{max-width:30ch;font:700 clamp(20px,1.75vw,26px)/1.35 var(--display);color:#fff}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.blob{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;font:700 16px/1 var(--display);text-decoration:none;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.blob:hover{transform:translateY(-1px)}
.blob-cream{background:#fff4e8;color:#23110a;box-shadow:0 2px 10px rgba(35,17,10,.3)}
.blob:focus-visible{outline:none;box-shadow:0 0 0 3px #23110a,0 0 0 6px #fff}
@media (max-width:900px){
  .ac{grid-template-columns:1fr;padding:12px 12px 4px}
  .ac-pic img{min-height:0;aspect-ratio:662/708}
  .ac-copy{padding:8px clamp(10px,3vw,20px) 24px}
}
@media (max-width:560px){.roles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.stickers li,.bounce span{animation:none!important}.blob{transition:none}}
@media (forced-colors:active){.ac,.contact-card{border:2px solid CanvasText}.ring{fill:CanvasText}}

/* ---------- wide monitors (2K / 31"+): the 1660 column is centred, and the hero type, the bar and the footer
   all start on the card column. Edges use % of the layout width (scrollbar excluded) so they land exactly. ---------- */
.page{margin-inline:auto}
.hx-first{margin-left:0}
@media (min-width:810px){.hx-bottom{left:30px;right:30px}.hx-h{font-size:calc((100vw - 75px) / 5.08)}}
@media (min-width:1440px){
  .hx-bottom{left:max(80px,calc((100% - 1440px) / 2 + 80px));right:max(80px,calc((100% - 1440px) / 2 + 80px))}
  .hx-h{font-size:calc(1278px / 5.01)}
  .top{left:max(60px,calc((100% - 1440px) / 2 + 60px));right:max(60px,calc((100% - 1440px) / 2 + 60px))}
  .ft{padding-left:max(80px,calc((100% - 1440px) / 2 + 80px));padding-right:max(0px,calc((100% - 1440px) / 2))}
}
@media (min-width:1660px){
  .hx-bottom{left:max(80px,calc((100% - 1660px) / 2 + 80px));right:max(80px,calc((100% - 1660px) / 2 + 80px))}
  .hx-h{font-size:calc(1508px / 5.01)}
  .top{left:max(60px,calc((100% - 1660px) / 2 + 60px));right:max(60px,calc((100% - 1660px) / 2 + 60px))}
  .ft{padding-left:max(80px,calc((100% - 1660px) / 2 + 80px));padding-right:max(0px,calc((100% - 1660px) / 2))}
}

/* ---------- one palette, one family (after the references) ----------
   The project cards carry the colour; everything around them is quiet. One warm near-black, one cream ink, one
   ember accent (the hero light, the Let's Yarn glow and the small highlights all come from it), and one type
   family: Inter Tight for display, Inter for reading. */
:root{--bg:#0e0d0c;--ink:#f4efe6;--body:#cfc7bc;--mute:#9d958a;--panel:#1a1816;--line:rgba(244,239,230,.1);--accent:#FF9231;--cream:#f4efe6;
  --display:'Inter Tight','Inter',system-ui,sans-serif;--read:'Inter',system-ui,sans-serif;--sans:var(--read);--serif:var(--display)}
.top.is-solid{background:rgba(14,13,12,.62)}
.top-nav{background:rgba(14,13,12,.38)}
.top-nav .top-cta,.skip{color:var(--bg)}
/* hero: a single ember field, top right, falling to the page black */
.hx-light{filter:blur(clamp(50px,7vw,130px))}
.hx-light .b1{left:-10%;top:-30%;width:50%;height:60%;background:#3a170b;opacity:.9}
.hx-light .b2{left:30%;top:-24%;width:46%;height:62%;background:#b5400f;opacity:.75}
.hx-light .b3{right:-14%;top:-28%;width:54%;height:76%;background:#ff8a2a;opacity:.85}
.hx-light .b4{right:14%;top:22%;width:26%;height:30%;background:#ffc27a;opacity:.35}
.hx-panel::after{background:linear-gradient(180deg,rgba(14,13,12,.5),rgba(14,13,12,.1) 20%,transparent 34%,rgba(14,13,12,.5) 54%,rgba(14,13,12,.9) 74%,var(--bg) 94%)}
.hx-h{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);gap:.2em}
.hx-first,.hx-last{font:700 1em/.9 var(--display);letter-spacing:-.06em}
.hx-tag{font:400 clamp(17px,1.5vw,23px)/1.45 var(--read);color:rgba(244,239,230,.72);text-shadow:0 1px 18px rgba(14,13,12,.6)}
.hx-tag em{font:600 1em/1 var(--read);color:var(--ink)}
.hx-tag span{font-weight:500;color:var(--ink)}
.hx-row{border-top-color:var(--line)}
.hx-status{color:var(--body)}
/* headings and footer in the same family */
.sec-h{font:600 36px/1.2 var(--display);letter-spacing:-.03em}
.ft-thanks{font:600 24px/1.1 var(--display);letter-spacing:-.03em}
.ft-built,.ft-ack{font:400 12px/1.5 var(--read);color:var(--mute)}
/* About: a plain raised panel */
.ac{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.ac-pic{background:#24211e}
.k{font-family:var(--read)}
.about-name,.contact-h{font-weight:700;letter-spacing:-.055em;color:var(--ink)}
.about-p{color:var(--body)}
.about-p strong,.roles li{color:var(--ink)}
.stickers li{background:var(--ink);color:var(--bg);font-family:var(--read);font-weight:600}
/* Let's Yarn: the hero's ember again, rising from the corner of a dark panel, so the page opens and closes on it */
.contact-card{background:radial-gradient(60% 90% at 100% 100%,rgba(255,138,42,.55),rgba(181,64,15,.25) 45%,transparent 75%),var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.contact-art{color:rgba(255,194,122,.14)}
.contact-t{font:500 clamp(19px,1.6vw,24px)/1.4 var(--read);color:var(--body)}
.blob{font-family:var(--read);font-weight:600}
.blob-cream{background:var(--ink);color:var(--bg);box-shadow:none}
.blob:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
/* case pages: the same tokens */
.page-case{--mute:#a69d92}
.ch-h1,.cs-h,.cs-sub{font-family:var(--display)!important;letter-spacing:-.035em}
/* the project cards keep their own Framer type: they're laid out to Google Sans and Playfair metrics */
.pc-grid{--sans:'Google Sans','Inter',system-ui,sans-serif}

/* ---------- footer: a big sign-off, the site and contact links, the Acknowledgement of Country in its own panel,
   then a quiet base line. Edges sit on the same column as the hero name and the cards. ---------- */
.fx{--edge:20px;margin-top:clamp(72px,9vw,140px);padding:0 var(--edge) clamp(24px,3vw,40px)}
@media (min-width:810px){.fx{--edge:30px}}
@media (min-width:1440px){.fx{--edge:max(80px,calc((100% - 1440px) / 2 + 80px))}}
@media (min-width:1660px){.fx{--edge:max(80px,calc((100% - 1660px) / 2 + 80px))}}
.fx-in{display:grid;gap:clamp(40px,5vw,72px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.fx-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:end}
.fx-thanks{max-width:9ch;font:700 clamp(48px,7.4vw,120px)/.9 var(--display);letter-spacing:-.055em;color:var(--ink);text-wrap:balance}
.fx-thanks span{color:var(--accent)}
.fx-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fx-k{margin:0 0 16px;font:600 12px/1 var(--read);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fx-list{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;padding:0;list-style:none}
.fx-list a{font:500 clamp(17px,1.4vw,20px)/1.2 var(--read);color:var(--ink);text-decoration:none;text-underline-offset:.2em;transition:color .2s ease}
.fx-list a:hover{color:var(--accent);text-decoration:underline}
.fx a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.fx-ack{position:relative;overflow:hidden;isolation:isolate;padding:clamp(24px,3vw,40px) clamp(24px,16vw,240px) clamp(24px,3vw,40px) clamp(24px,3vw,40px);border-radius:24px;background:radial-gradient(70% 140% at 100% 50%,rgba(255,138,42,.14),transparent 70%),var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.fx-ack .fx-k{color:var(--accent)}
.fx-ack p{max-width:62ch;font:400 clamp(15px,1.15vw,17px)/1.6 var(--read);color:var(--body)}
.fx-art{position:absolute;z-index:-1;right:clamp(-40px,-2vw,-10px);top:50%;width:clamp(120px,12vw,180px);aspect-ratio:193/314;translate:0 -50%;rotate:100deg}
.fx-art svg{display:block;width:100%;height:100%}
.fx-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;font:400 13px/1.4 var(--read);color:var(--mute)}
.fx-base a{color:var(--ink);text-decoration:none}
.fx-base a:hover{color:var(--accent)}
@media (max-width:809px){
  .fx-top{grid-template-columns:1fr;gap:36px}
  .fx-ack{padding-right:clamp(24px,3vw,40px)}
  .fx-art{opacity:.5}
  .fx-base{flex-direction:column;align-items:flex-start}
}
/* Acknowledgement: black on black, a hairline and the river artwork, no glow */
.fx-ack{background:#121110;box-shadow:inset 0 0 0 1px rgba(244,239,230,.07)}
.fx-ack .fx-k{color:var(--mute)}
.fx-ack p{color:var(--ink)}
.fx-art{opacity:.55}

/* hero: the tagline and status sit under the name (no top tagline, no side mark) */
.hx-row{align-items:flex-end;gap:clamp(20px,4vw,64px)}
.hx-bottom .hx-tag{position:static;top:auto;left:auto;width:auto;max-width:44ch;translate:none;text-align:left;font-size:clamp(17px,1.45vw,22px);text-wrap:pretty;color:rgba(244,239,230,.7)}
.hx-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none;max-width:30ch;text-align:right}
@media (max-width:809px){
  .hx-row{flex-direction:column;align-items:flex-start;gap:20px}
  .hx-side{align-items:flex-start;max-width:none;text-align:left}
}
/* About and Let's Yarn: a fainter edge */
.ac,.contact-card{box-shadow:inset 0 0 0 1px rgba(244,239,230,.05)}
/* the tagline and status read as one block on the left; the motion control sits level with its middle */
.hx-row{align-items:center}
.hx-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.hx-copy .hx-status{color:var(--mute)}
.hx-pill{flex:none}
@media (max-width:809px){.hx-row{align-items:flex-start}}
/* the name in capitals; caps need a touch more tracking than lowercase */
.hx-h{text-transform:uppercase}
.hx-first,.hx-last{letter-spacing:-.045em;line-height:.86}
/* role markers: an odd-shaped dot from the artwork, each turned a little differently */
.roles .dot{flex:none;width:13px;height:13px;margin:0 5px;fill:var(--accent);rotate:var(--r,0deg)}
.about-name{margin-top:0}
@media (forced-colors:active){.roles .dot{fill:CanvasText}}
/* Acknowledgement: back to the plain black-on-black panel (no artwork), with grey text on the black */
.fx-ack{padding:clamp(24px,3vw,40px);border-radius:24px;background:#121110;box-shadow:inset 0 0 0 1px rgba(244,239,230,.07)}
.fx-ack .fx-k{margin:0 0 16px;font-size:12px;letter-spacing:.08em;color:#8f887e}
.fx-ack p{max-width:62ch;font:400 clamp(15px,1.15vw,17px)/1.6 var(--read);color:#aaa298}

/* ---------- darker overall: the ochre stays in the hero light and the Let's Yarn glow; everything else drops
   towards black (page #080707, panels a step up), with the body text a little greyer to match ---------- */
:root{--bg:#080707;--panel:#121110;--line:rgba(244,239,230,.08);--body:#bdb5aa;--mute:#8f877d}
.top.is-solid{background:rgba(8,7,7,.66)}
.top-nav{background:rgba(8,7,7,.4)}
.hx-panel::after{background:linear-gradient(180deg,rgba(8,7,7,.55),rgba(8,7,7,.12) 20%,transparent 34%,rgba(8,7,7,.55) 54%,rgba(8,7,7,.92) 74%,var(--bg) 94%)}
.ac-pic{background:#1a1816}
.ac,.contact-card{box-shadow:inset 0 0 0 1px rgba(244,239,230,.045)}
.contact-card{background:radial-gradient(60% 90% at 100% 100%,rgba(255,138,42,.5),rgba(181,64,15,.22) 45%,transparent 75%),var(--panel)}
.fx-ack{background:#0e0d0c;box-shadow:inset 0 0 0 1px rgba(244,239,230,.06)}
/* Acknowledgement: dark on dark, the panel a hair off the page and the words a dim grey (still 4.5:1 or more) */
.fx-ack{background:#0c0b0a;box-shadow:inset 0 0 0 1px rgba(244,239,230,.04)}
.fx-ack .fx-k{color:#857d73}
.fx-ack p{color:#9a9288}
/* Acknowledgement: a well darker than the page, no outline */
.fx-ack{background:#020202;box-shadow:none}