/* =====================================================================
   Fondu — site stylesheet
   Rebuilt from the Monica Ellis Framer template, measured at 1440 × 900
   (desktop) and 375 × 812 (phone). Comments give the measured values.
   ===================================================================== */

/* Poppins (Open Font Licence, Indian Type Foundry). Type tuned for it on 27 Oct 2026: sizes ~5% down (Poppins is 3% taller, 11% wider
   than Switzer), display tracking tightened to -.035/-.04em, small-text tracking loosened to -.015em, tight headings at line-height 1.05
   for its deeper descenders. Switzer-era values: src/css/site.switzer-sizes.css.bak. Weights 400, 500, 600, 700, converted from the TTFs on Youssef's Mac.
   Switzer (the template's face) stays in fonts/ for comparison; switch --font back to use it. */
@font-face{font-family:"Poppins";src:url(../fonts/poppins-200.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}   /* v17: Extra Light and Light, used only by a post that sets bodyWeight (a test; the files are the full TTFs, to be converted to WOFF2 if kept) */
@font-face{font-family:"Poppins";src:url(../fonts/poppins-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(../fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PP Frama";src:url(../fonts/ppframa-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}   /* capitals only, subset for the Rookie sliding text */

/* ---------- Grid tokens ----------
   20px outer margin (15px on phones). The second column starts at 58.64% of
   the content width (x ≈ 841 at 1440); the ethos column at 25.36% (x ≈ 375). */
:root{
  --bg:#000;
  --fg:#fff;
  --line:rgba(255,255,255,.2);
  --muted:rgba(255,255,255,.5);
  --surface:#111;                 /* media boxes before their image arrives */
  --placeholder:#999;
  --pill:rgba(0,0,0,.5);          /* the Case Studies view switch */
  --font:"Poppins","Helvetica Neue",Arial,sans-serif;
  --m:20px;
  --cw:calc(100vw - 2 * var(--m));      /* content width */
  --c2:calc(var(--cw) * .5864);         /* second column, offset from the content edge */
  --ce:calc(var(--cw) * .2536);         /* ethos column, offset from the content edge */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-sine:cubic-bezier(.12,0,.39,0);
  --ease-out-sine:cubic-bezier(.61,1,.88,1);
  color-scheme:dark;
}
/* Light mode, from Youssef's reference: white page, #e5e5e5 lines, muted text at 20% black, black type and logo */
html[data-theme="light"]{--bg:#fff;--fg:#000;--line:#e5e5e5;--muted:rgba(0,0,0,.5);--surface:#f2f2f2;--placeholder:#aaa;--pill:rgba(255,255,255,.65);color-scheme:light}
html[data-theme="light"] .cl-name{opacity:.2}
html[data-theme="light"] .cl-name.on{opacity:1}   /* v45: the lit name was stuck grey in light mode (the rule above is more specific than .cl-name.on) */
html[data-theme="light"] .label .disc,html[data-theme="light"] .label .yr,html[data-theme="light"] .credit span:last-child{opacity:.35}
html[data-theme="light"] .links a span,html[data-theme="light"] .wcard .cap span:last-child{opacity:.3}
html[data-theme="light"] .f-col .head{opacity:.45}
html.theming body,html.theming .rule,html.theming .field,html.theming .wk-toggle,html.theming .stat,html.theming .credit,html.theming .cs-row{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
*{box-sizing:border-box}
html{background:var(--bg)}   /* no CSS smooth scrolling: a page swap must land at the top instantly in every browser; in-page links glide via script */
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:600;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,video{max-width:100%}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t14{font-size:13px;letter-spacing:-.015em;line-height:1.3}
.t12{font-size:12px;letter-spacing:-.01em;line-height:1.36}
.t14-label{font-size:13px;font-weight:500;letter-spacing:.01em;line-height:13px;text-transform:uppercase}
.h3{margin:0;font-size:38px;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.h2{margin:0;font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1}
.col2{margin-left:var(--c2)}

/* Entrance timing. Cold load: the statement starts 0.6s in. After an in-page swap the template shows the
   new page at once and the title rises 0.7s later (measured frame by frame on a real click). */
:root{--enter:1.4s;--enter-sub:1.35s;--enter-wk:1.4s;--enter-num:1.3s;--enter-cs:1.64s;--enter-jp:1.8s}   /* v35, measured on the template (1440 x 900): a new page holds for about 1.4s, then titles rise (project titles 1.7s, journal post titles 1.8s) */
html.swapped{--enter:1.4s;--enter-sub:1.35s;--enter-wk:1.4s;--enter-num:1.3s;--enter-cs:1.64s;--enter-jp:1.8s}   /* the template starts a swapped page on the same schedule as a first load (v35: re-measured; earlier values were about a second too early) */
html.swapped .scroll-hint{animation-delay:calc(var(--enter) + .6s);animation-duration:1.9s}   /* home after a swap: title 1.4s, "Scroll to explore" and the pictures 2.0s (template) */
html.swapped .works{animation-delay:calc(var(--enter) + .6s);animation-duration:1.2s}

/* ---------- Header (fixed, 48px) ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:48px;display:flex;align-items:center}
.nav .wrap{position:relative;width:100%;height:18px}
.roll{position:absolute;left:max(var(--m),env(safe-area-inset-left,0px));top:0;height:18px;overflow:hidden}
.roll span{display:block;height:18px}
.logo{height:10px;width:auto;margin-top:4px;display:block}
.logo-light{display:none}
html[data-theme="light"] .logo-dark{display:none}
html[data-theme="light"] .logo-light{display:block}
/* Right-hand header group: the theme slider, then Contact (or the scroll percentage) */
.hdr-right{position:absolute;right:max(var(--m),env(safe-area-inset-right,0px));top:0;height:18px;display:flex;align-items:center;gap:16px}
.theme{position:relative;width:26px;height:14px;border-radius:7px;background:rgba(255,255,255,.25);transition:background-color .35s ease;flex:none}
.theme .knob{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .35s ease}
html[data-theme="light"] .theme{background:rgba(0,0,0,.15)}
html[data-theme="light"] .theme .knob{transform:translateX(12px);background:#000}
.theme:hover{opacity:.7}

.menu{position:absolute;left:calc(var(--m) + var(--c2));top:0;display:flex;gap:10px;align-items:center}   /* on the second column exactly (was 4px left of it) */
.menu-btn{transition:opacity .25s}
.menu-btn:hover,.menu-btn:active{opacity:.4}
.links{display:flex;gap:10px}
.links a{opacity:0;pointer-events:none;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.links a span{opacity:.4;transition:opacity .25s}
.links a:hover span,.links a:focus-visible span{opacity:1}
.open .links a{opacity:1;pointer-events:auto;transform:none}
.open .links a:nth-child(1){transition-delay:0s}.open .links a:nth-child(2){transition-delay:.06s}.open .links a:nth-child(3){transition-delay:.12s}.open .links a:nth-child(4){transition-delay:.18s}.open .links a:nth-child(5){transition-delay:.24s}
.est{position:static;transition:opacity .25s}
a.est:hover{opacity:.4}
.prog{font-variant-numeric:tabular-nums;letter-spacing:0}
.links .m-only{display:none}

/* ---------- Home: hero ---------- */
.hero{height:70vh;position:relative}
.hero .wrap{position:absolute;inset:auto 0 20px 0;display:flex;align-items:flex-end}
.hero h1{margin:0;width:calc(var(--c2) - 40px);max-width:860px;font-size:clamp(38px,4.15vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;opacity:0;transform:translateY(50px);animation:rise .9s var(--ease) forwards}
.scroll-hint{position:absolute;right:max(var(--m),env(safe-area-inset-right,0px));bottom:20px;margin:0;opacity:0;animation:fade 1s var(--ease) calc(var(--enter) + .5s) forwards}
.scroll-hint .pulse{display:inline-block;animation:pulse 3s linear infinite}
/* Template-measured: fades between 80% and 40% every 1.5s */
@keyframes pulse{0%,100%{opacity:.8}50%{opacity:.4}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* ---------- Home: works ---------- */
.works{padding-bottom:100px;opacity:0;animation:fade 1.4s var(--ease) calc(var(--enter) + 1.5s) forwards}
.card{position:relative;display:block;height:780px}
.media{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center;background:var(--surface)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.media video[data-zoom]{transform:scale(var(--zoom,1))}
/* A still image can drift very slowly (Nomu), so it is not the one panel with no motion.
   8% larger over 14 seconds and back again (a slow push-in); set "motion": "drift" on the project's media in data/projects.json. */
.media img.drift,.cs-hero img.drift,.wcard .img img.drift{animation:drift 14s ease-in-out infinite alternate;will-change:transform;transform-origin:55% 45%}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.2%,.8%)}}
.overlay{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--w);transform:translate(-50%,-50%);pointer-events:none}
.overlay svg,.overlay img{position:static;display:block;width:100%;height:auto;max-width:none}   /* static: the .media img rule above would otherwise pin it to the overlay's top edge */
@media (max-width:809px){.overlay{width:var(--wm)}}
/* Title row: sticky at 400px, shown only while its panel covers the screen midline */
.label{position:sticky;top:400px;z-index:1;height:25px;display:block;color:#fff;font-size:25px;letter-spacing:-.035em;line-height:1;opacity:0;transition:opacity .28s var(--ease-in-sine);will-change:opacity;transform:translateZ(0);backface-visibility:hidden}
/* The title row stays on its own compositor layer (the template's wrapper has will-change:transform), so the fade
   never re-rasterises the text mid-scroll; without this the glyphs snap by a pixel as the fade starts. */
.card.active .label{opacity:1;transition-timing-function:var(--ease-out-sine)}
/* v36, measured on the template: a project's picture sits at 60% brightness and rises to full while it covers the screen midline (and drops back as it leaves), 0.3s, accelerating curve (ease-in-sine). Same switch as the title row. */
.media{opacity:.6;transition:opacity .3s var(--ease-in-sine)}
.card.active .media{opacity:1}
.works.init .media{transition:none}   /* v43: the first lit/dim state is set without a fade (script drops .init after two frames), so panels do not flash on arrival */
.label h2{position:absolute;left:max(var(--m),env(safe-area-inset-left,0px));top:0;margin:0;font-size:inherit;font-weight:600}
.label .disc{position:absolute;left:calc(var(--m) + var(--c2));top:0;opacity:.5}
.label .yr{position:absolute;right:max(var(--m),env(safe-area-inset-right,0px));top:0;opacity:.5}
.card[data-tone="dark"] .label{color:#000}


/* ---------- Loading intro (home, once per session): black, the wordmark centred, soft white light blooms drifting behind it ---------- */
.intro{display:none;position:fixed;inset:0;z-index:200;background:#000;place-items:center;overflow:hidden}
html.intro-on .intro{display:grid}
html.intro-on :is(body,body *){--enter:3.5s;--enter-sub:3.5s;--enter-wk:3.5s}   /* the page's own entrance waits until the intro has gone; the class stays until that entrance has finished (changing a delay mid-way makes the letters jump) */
html.intro-lock{overflow:hidden}   /* no scrolling while the intro is up */
.intro img{position:relative;z-index:2;width:min(60vw,320px);height:auto;opacity:0;animation:fade .9s ease .35s forwards}
.intro .g{position:absolute;left:50%;top:50%;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,rgba(255,255,255,.055) 30%,rgba(255,255,255,0) 62%);filter:blur(30px);opacity:0;animation:intro-glow 3s ease-in-out forwards;will-change:transform,opacity}   /* three soft lights drifting in around the wide wordmark, a quarter dimmer than the first version; the tighter and the "bloom" versions tried on 29 Oct were both rejected for this one */
.intro .g2{width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;--dx:-22vw;--dy:12vh;animation-delay:.25s}
.intro .g3{width:54vmax;height:54vmax;margin:-27vmax 0 0 -27vmax;--dx:24vw;--dy:-14vh;animation-delay:.5s}
@keyframes intro-glow{0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.55)}40%{opacity:1}100%{opacity:.8;transform:translate(0,0) scale(1.05)}}
.intro.out{animation:intro-out .8s ease forwards}
@keyframes intro-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.intro .g{animation:none;opacity:.5;transform:none}.intro img{animation:none;opacity:1}}
/* ---------- Home: ethos (Powered by Brandinc.) ---------- */
.ethos{position:relative;padding-block:150px 100px}
.rule{height:1px;background:var(--line);width:0;transition:width 1.6s var(--ease);transition-delay:var(--rd,0s)}
.in .rule,.in.rule{width:100%}
.ethos-row{position:relative;margin-top:20px;min-height:231px}
/* Switzer's "1" sits on a fixed-width slot; pull it in to even out "2012" */
.fig1{margin:0}   /* was a Switzer fix: its fixed-width "1" gapped in "2012"; Poppins needs none */
.ethos-label{position:absolute;left:0;top:0;margin:0;font-weight:500;line-height:14px}
.ethos-text{margin-left:var(--ce);width:20.5em;max-width:calc(100% - var(--ce) - 233px);font-size:clamp(17px,7px + 1.05vw,27px)}   /* grows with the window: 17px at 950, 22px at 1440, 27px from 1905; column in em so the lines stay short; 173px stack + 60px clear */
.ethos-text p{margin:0;font-size:inherit;font-weight:600;letter-spacing:-.015em;line-height:1.3;text-wrap:pretty}   /* body size, same as the journal text */
.arrow-link{display:inline-flex;gap:6px;align-items:center;margin-top:15px;font-weight:500}
.arrow-link i{font-style:normal;display:inline-block;transition:transform .35s var(--ease)}
.arrow-link:hover i{transform:translateX(4px)}
.stack{position:absolute;right:0;top:0;width:173px;height:231px}
.stack div{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.stack img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}

/* ---------- Journal carousel (home + about) ---------- */
.journal{padding-block:166px 100px}
.j-head{display:flex;justify-content:space-between;align-items:flex-end}
.journal.has-rule{padding-top:150px}   /* v8i, the Studio page, as on the template: the line sits 150px into the section and the heading 16px under it */
.journal .rule+.j-head{margin-top:16px}
.arrows{display:flex}
.arrows button{width:30px;height:30px;display:grid;place-items:center;transition:opacity .25s}
.arrows button:hover,.arrows button:active{opacity:.5}
.arrows button:disabled{opacity:.25;pointer-events:none}   /* v7b: the carousel stops at its first and last card */
.viewport{overflow:hidden;margin-top:40px;margin-left:calc(-1 * max(var(--m),env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(var(--m),env(safe-area-inset-right,0px)));padding-left:max(var(--m),env(safe-area-inset-left,0px))}
.track{display:flex;gap:15px;align-items:flex-start;transition:transform .8s var(--ease)}
.post{flex:0 0 339px;display:flex;flex-direction:column}
.post .img{width:100%;overflow:hidden;background:var(--surface)}
.post .img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .img img{transform:scale(1.04)}
.post .title{margin:10px 0 0;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.post .ex{margin:5px 0 0;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.2;opacity:.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .more{margin:10px 0 0}

/* ---------- Footer ---------- */
footer{padding-block:40px 15px}
.f-top{display:flex;margin-top:20px;min-height:354px;position:relative}
.f-brand{display:block;line-height:0}
.f-cols{position:absolute;left:var(--c2);top:0;display:flex;gap:10px}
.f-col{width:190px;display:flex;flex-direction:column;gap:5px}
.f-col .head{font-weight:500;text-transform:uppercase;opacity:.6;margin-bottom:5px;letter-spacing:.02em}
.f-col a{position:relative;display:inline-block;width:max-content}
.f-col a::before{content:"";position:absolute;left:0;top:5px;width:1px;height:7px;background:var(--fg);opacity:0;transition:opacity .25s}
.f-col a span{display:inline-block;transition:transform .35s var(--ease)}
.f-col a:hover::before{opacity:1}
.f-col a:hover span{transform:translateX(6px)}
.f-bottom{display:flex;position:relative;height:16px}
.f-bottom .mid{position:absolute;left:var(--c2)}
.f-bottom .right{position:absolute;left:calc(var(--c2) + 200px)}

/* ---------- Shared: section with a drawn-in rule and a heading 31px below ---------- */
.sec{position:relative}
.sec-head{margin-top:31px}
/* Scroll reveal: fades up 20px, like the template's text */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
/* Larger reveal used by the About image strip (template: rises 70px over about 1.5s, starting 0.75s after it appears) */
.rv-big{opacity:0;transform:translateY(70px);transition:opacity 1.8s cubic-bezier(.33,1,.68,1) .75s,transform 1.8s cubic-bezier(.33,1,.68,1) .75s}   /* v35: the template's pictures reach half way after about 0.35s and finish after about 1.4s */
.rv-big.in{opacity:1;transform:none}
html.entering .rv-big{transition-delay:1.35s,1.35s}   /* a page's first screen: the Studio pictures start rising 1.35s in, with the template (set by script, off again once the entrance has finished) */
/* v35: cards in the first screen rise like the template's: Journal cards 80px (50ms apart), Works cards 100px */
.ent{opacity:0;transform:translateY(var(--ey,80px));animation:ent-in var(--ed,.95s) cubic-bezier(.33,1,.68,1) forwards}
@keyframes ent-in{to{opacity:1;transform:none}}
.rv-words .w{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.rv-words.in .w{opacity:1;transform:none}

/* Card grids used on sub pages (More works, More to read) */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:110px}
.cards4 .post{flex:none}
.wcard{display:block}
.wcard .img{position:relative;aspect-ratio:448/260;overflow:hidden;background:var(--surface)}
.wcard .img img,.wcard .img video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wcard:hover .img img,.wcard:hover .img video{transform:scale(1.04)}
.wcard .cap{display:flex;justify-content:space-between;margin-top:9px;font-size:15px;letter-spacing:-.01em;line-height:1.2}
.wcard .cap span:last-child{opacity:.4}

/* ---------- Case study (project detail) ---------- */
.cs-head{position:relative;padding-top:250px}            /* number + title sit at y=250 (the header is fixed, so the page starts at 0) */
/* Each sits in a mask 7px taller than the type, so the letters rise up out of nothing (the template clips them the same way) */
.cs-mask{overflow:hidden;padding-bottom:7px;margin-bottom:-7px}
.cs-mask-num{position:absolute;left:max(var(--m),env(safe-area-inset-left,0px));top:250px}
.cs-mask-title{margin-left:var(--c2)}
.cs-num{margin:0;font-size:57px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.cs-title{margin:0 0 0 calc(var(--lsb,0em) * -1);font-size:57px;font-weight:600;letter-spacing:-.035em;line-height:1.05;min-height:60px}   /* pulled left by the first letter's side bearing (set per project) so its visible edge sits on the column */
.cs-title .ch,.cs-num .ch,.ct-title .ch,.jp-title .ch{transform:translateY(50px);animation-duration:1s}   /* template: one block, 50px, about 1s ease-out */
.cs-hero{margin-top:25px;aspect-ratio:1440/744;overflow:hidden;background:var(--surface);position:relative}
.cs-hero img,.cs-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%)}   /* hero "zoom"/"pos" frame the crop like gallery items */
.cs-hero.has-hero{background:#000}   /* a dimmed hero image darkens over black */
.cs-info{margin-top:40px}
/* Project details under the hero: About on the left, Client / Type / Year stacked on the right at the second column; no lines */
.cs-details{margin-top:40px;display:grid;grid-template-columns:var(--c2) 1fr;align-items:start}
.cs-det-about{max-width:calc(var(--c2) * .78)}   /* v5: tighter column, ~180px clear of the Client column at 1440 */
.cs-details .cs-det-about .val{font-size:clamp(16px,6px + 1vw,24px);line-height:1.25;text-wrap:pretty}   /* v5: a step smaller than the Approach text */
.cs-details .lab{margin:0 0 10px;opacity:.5}
.cs-details .val{margin:0;font-size:13px;letter-spacing:-.015em;line-height:1.3}
.cs-det-item+.cs-det-item{margin-top:28px}
.cs-det-item{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.cs-details.in .cs-det-item{opacity:1;transform:none}
/* Approach: the homepage ethos layout without the image stack. Line draws in, label left, text at the ethos column */
.cs-approach{position:relative;margin-top:60px}
.cs-approach-row{position:relative;margin-top:21px}
.cs-approach-text{margin-left:calc(var(--ce) + var(--cw) * .02);max-width:760px;font-size:clamp(17px,7px + 1.05vw,27px)}   /* 2% of the content width right of the ethos column (about 28px at 1440) */
.cs-approach-text p{margin:0;font-size:inherit;font-weight:600;letter-spacing:-.015em;line-height:1.25;text-wrap:pretty}
.cs-approach-text p+p{margin-top:.8em}
/* Info rows: a line that draws in when the row comes into view (rows stagger 0.1s), label and value 31px below it */
.cs-row{position:relative;margin-left:var(--c2);display:grid;grid-template-columns:197px 1fr;padding:31px 0 10px}
.cs-row>.rule{position:absolute;left:0;top:0}
.cs-row.credits{padding-top:13px}
.cs-row.approach .val{max-width:373px}
.cs-row.approach .val p+p{margin-top:14px}   /* Approach: paragraphs set like the About text, a line of air between them */
.cs-row.quote{padding-top:11px}
.cs-row.quote .lab{margin-top:20px}   /* template: the quote text sits 20px above its label */
.cs-row .lab{margin:0}
.cs-row .val{margin:0;font-size:13px;letter-spacing:-.015em;line-height:1.3;max-width:373px}
.cs-row .val p{margin:0}
.cs-row .val a:hover{opacity:.5}
.cs-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:80px}
/* Statement blocks between images (Veo): a light panel with one big line and a + that opens the thinking behind it */
.cs-stmt-block{grid-column:1/-1;background:none;color:var(--fg);padding:clamp(80px,10vw,150px) 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}   /* on the page background; the headline is centred in the block, the + hangs below it and takes no part in the centring */
.cs-stmt-core{display:flex;flex-direction:column;align-items:center;gap:40px}   /* headline and + as one centred group, 40px apart */
h2.cs-stmt-line,.cs-stmt-line{margin:0;padding:0;max-width:var(--tw,17ch);font-size:clamp(34px,5.3vw,76px);font-weight:600;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;text-transform:none}   /* 15% bigger than before; --tw (set per statement) caps the width so it runs over two balanced lines on desktop */
.br-desk{display:none}   /* hand-set breaks show on desktop only */
@media (min-width:810px){.br-desk{display:inline}}
@media (max-width:809px){h2.cs-stmt-line,.cs-stmt-line{max-width:none}}   /* phones wrap naturally */
.cs-plus{width:44px;height:44px;border-radius:50%;border:0;background:rgba(64,64,64,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;font:inherit;font-size:22px;font-weight:400;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease),background .25s}   /* dark-grey glass: Mouthwash's half-transparent fill and 10px backdrop blur, in dark grey */
.cs-plus span{display:block;transform:translateY(-1px)}
.cs-plus:hover{transform:scale(1.08) rotate(90deg);background:rgba(96,96,96,.55)}
.cs-plus:focus{outline:none}
.cs-plus:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html.using-mouse :focus-visible{outline:none}   /* v43: after a mouse click or tap no focus ring is drawn anywhere (script sets using-mouse; any key press removes it, so keyboard users still see where they are) */   /* a ring for keyboard focus only, never after a click */
.cs-dialog{border:0;padding:0;background:transparent;width:min(560px,calc(100vw - 32px));margin:auto;color:#fff;opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cs-dialog.on{opacity:1;transform:none}
.cs-dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.cs-dialog.on::backdrop{opacity:1}
.cs-dialog-panel{position:relative;background:rgba(40,40,40,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:20px;padding:44px 44px 40px}   /* the pop-up is the same dark glass */
.cs-dialog-label{margin:0 0 18px;opacity:.5}
.cs-dialog-text{margin:0;font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.5}
.cs-dialog-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .25s}
.cs-dialog-close:hover{background:rgba(255,255,255,.2)}
.cs-dialog-close:focus,.cs-dialog-close:focus-visible{outline:none}   /* v43: no white ring round the × when a pop-up opens */
.cs-dialog-close:focus-visible{background:rgba(255,255,255,.2)}
@media (max-width:809px){.cs-stmt-block{padding:70px 20px}.cs-dialog-panel{padding:36px 28px 32px}}   /* 90px so the + (40px gap + 44px) clears the next image */
.cs-gallery figure{position:relative;margin:0;overflow:hidden;background:var(--surface);aspect-ratio:var(--r,3/2)}
.cs-gallery figure.dim{background:#000}   /* an item with "opacity" darkens over black, like the hero */
.cs-gallery figure.full{grid-column:1/-1}
.cs-pair{grid-column:1/-1;display:grid;gap:20px}   /* a side-by-side pair with one shared height */
/* Fast photo loop (Craft): the photos sit stacked and the script shows one at a time with hard cuts; the box stays black
   until the first photo has loaded, and the still logo is an ordinary overlay on top */
.cs-slides{position:absolute;inset:0;background:#000}
.cs-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.cs-slides img.on{opacity:1}
/* Hover-expand pair (Craft wrap + cup): equal halves at rest; the side under the pointer widens to the pair's larger
   ratio while the other narrows to the smaller one. The height never changes: it is the height both sizes share at
   this width (the pair is a size container so its own width is known), so the swap is a pure sideways glide. */
.cs-pair.swap{--pg:20px;container-type:inline-size;grid-template-columns:1fr 1fr;transition:grid-template-columns .7s cubic-bezier(.3,.7,.2,1)}
.cs-pair.swap figure{aspect-ratio:auto;height:calc((100cqw - var(--pg)) / var(--sum))}
.cs-pair.swap:has(figure:first-child:hover){grid-template-columns:var(--big) var(--small)}
.cs-pair.swap:has(figure:last-child:hover){grid-template-columns:var(--small) var(--big)}
.cs-gallery img,.cs-gallery video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(var(--zoom,1));transform-origin:var(--pos,50% 50%)}   /* "pos" frames the crop, e.g. "43% 35%" */   /* "zoom": 1.06 on a gallery item crops in a little */
/* "breathe": a gallery image slowly zooms in and out (6% over 9s each way) around its crop's focal point, on top of its own zoom */
.cs-gallery img.breathe{animation:breathe 9s ease-in-out infinite alternate;will-change:transform}
@keyframes breathe{from{transform:scale(var(--zoom,1))}to{transform:scale(calc(var(--zoom,1) * 1.06))}}
.cs-gallery .fit{position:absolute;left:var(--fx,50%);top:var(--fy,50%);width:var(--fit);max-width:none;height:auto;aspect-ratio:var(--far,auto);object-fit:unset;transform:translate(-50%,-50%) rotate(var(--rot,0deg))}   /* "fx"/"fy": centre of the media in the box; "rot": tilt */   /* "fit": media shown at a set width, centred on the box colour */
/* A floating cutout (Veo BoxFit phone): slow bob with a slight sway around its tilt, lifted by a soft shadow */
.cs-gallery .fit.float{will-change:transform;filter:drop-shadow(0 40px 50px rgba(0,0,0,.28));animation:fit-float 7s ease-in-out infinite alternate}
/* Veo logo breakdown: the three callouts draw in one after another (line from its anchor dot, then icon, then label), hold,
   fade out together and repeat; one cycle 10s, columns offset by half a second. Layers are the artwork's own pixels. */
.breakdown .layer{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both;will-change:transform,opacity,clip-path}
.breakdown:not(.on) .layer{animation-name:none;opacity:0}   /* hidden until the image scrolls into view; the script adds .on, which starts the loop from the beginning */
.breakdown .line-l{animation-name:bd-line-l}.breakdown .line-m{animation-name:bd-line-m}.breakdown .line-r{animation-name:bd-line-r}
.breakdown .icon{animation-name:bd-icon}.breakdown .label{animation-name:bd-label}
/* one-time flourishes once each column has built: the wellness arrows turn a full circle, the brain pulses twice,
   the heartbeat line traces itself left to right like a monitor */
.breakdown .spin{animation-name:bd-spin;transform-origin:50% 50%}
.breakdown .brain{animation-name:bd-brain;transform-origin:50% 55%}
.breakdown .ecg{animation-name:bd-ecg}
@keyframes bd-spin{0%,9%{opacity:0;transform:scale(.9) rotate(0deg)}16%{opacity:1;transform:scale(1) rotate(0deg)}20%{transform:scale(1) rotate(0deg)}34%,78%{opacity:1;transform:scale(1) rotate(360deg)}86%,100%{opacity:0;transform:scale(1) rotate(360deg)}}   /* v46: Safari ignored the unitless rotate(0) and the none keyframes, so it never turned: every keyframe now has the same list, with units */
@keyframes bd-brain{0%,9%{opacity:0;transform:scale(.9)}16%,20%{opacity:1;transform:none}23%{transform:translateY(-3%) scale(1.14)}26%{transform:none}29%{transform:translateY(-3%) scale(1.14)}32%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
@keyframes bd-ecg{0%,19%{opacity:0;clip-path:inset(0 100% 0 0)}19.6%{opacity:1}27%,78%{opacity:1;clip-path:inset(0)}86%,100%{opacity:0;clip-path:inset(0)}}
.breakdown .col-m{animation-delay:.5s}.breakdown .col-r{animation-delay:1s}
/* hidden states are also transparent: a fully clipped layer can still draw a one-pixel sliver at its edge */
@keyframes bd-line-l{0%,4%{clip-path:inset(0 0 0 100%);opacity:0}4.6%{opacity:1}10%,78%{clip-path:inset(0);opacity:1}86%,100%{clip-path:inset(0);opacity:0}}
@keyframes bd-line-m{0%,4%{clip-path:inset(0 0 100% 0);opacity:0}4.6%{opacity:1}10%,78%{clip-path:inset(0);opacity:1}86%,100%{clip-path:inset(0);opacity:0}}
@keyframes bd-line-r{0%,4%{clip-path:inset(0 100% 0 0);opacity:0}4.6%{opacity:1}10%,78%{clip-path:inset(0);opacity:1}86%,100%{clip-path:inset(0);opacity:0}}
@keyframes bd-icon{0%,9%{opacity:0;transform:scale(.9)}16%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
@keyframes bd-label{0%,13%{opacity:0;transform:translateY(3px)}20%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
/* Nomu vinyl: the label turns about its own centre (one revolution every 6s); the spindle, a tightly masked layer, stays still */
.vinyl .disc img{animation:none;transform-origin:50% 50%;will-change:transform}   /* only the label turns: on a real record the grooves are concentric and the sheen stays put */
.vinyl .shadow{mix-blend-mode:multiply}   /* the pin's cast shadow darkens whatever turns beneath it */
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
/* A fitted cutout with a sticker: the div carries the fit/float transform; the image fills it and the sticker sits at % of the image */
.cs-gallery div.fit img{position:static;display:block;width:100%;height:auto;max-width:none;object-fit:unset;transform:none}
.cs-gallery .sticker-box{position:absolute;display:block;pointer-events:none}
.cs-gallery .sticker-box svg,.cs-gallery .sticker-box img{display:block;width:100%;height:auto;position:static;max-width:none;transform:none;object-fit:unset}
/* Veo BoxFit: the lead arm (its own pixel layer) jabs from the shoulder at the layer's left edge; smooth out, brief hold, smooth back */
.cs-gallery .sticker-box .layer{position:absolute;display:block}
.cs-gallery .sticker-box:not(.sized) .layer:first-child{position:relative}   /* the first layer sizes the box; the others sit on it */
.cs-gallery .sticker-box .layer img{width:100%;height:auto;display:block}
/* Veo BoxFit boxer: the whole figure rocks from the feet; the lead arm (its own layer, origin at the shoulder) drives straight
   out along its length and back, so the glove never lifts toward the face. One cycle 2.4s: snap out, hold, ease back. */
.boxer{transform-origin:50% 100%;will-change:transform;animation:rock 2.4s cubic-bezier(.4,0,.25,1) infinite}
@keyframes rock{0%,10%{transform:translate(-2.5%,0) rotate(-2.2deg)}38%,56%{transform:translate(2%,0) rotate(1.8deg)}100%{transform:translate(-2.5%,0) rotate(-2.2deg)}}
/* The forearm is a horizontal line, so shortening it from the shoulder keeps its thickness; the glove slides back by the same
   distance (40% of the 102px forearm = 40.8px = 37.8% of the glove layer's width) without any scaling. */
.boxer .arm img{transform-origin:6.8% 32.3%;will-change:transform;animation:jab-arm 2.4s cubic-bezier(.4,0,.25,1) infinite}
.boxer .glove img{will-change:transform;animation:jab-glove 2.4s cubic-bezier(.4,0,.25,1) infinite}
@keyframes jab-arm{0%,10%{transform:translateY(2%) scaleX(.6)}38%,56%{transform:none}100%{transform:translateY(2%) scaleX(.6)}}
@keyframes jab-glove{0%,10%{transform:translate(-37.8%,1.4%)}38%,56%{transform:none}100%{transform:translate(-37.8%,1.4%)}}
@keyframes bob{0%,18%{transform:translate(6px,0) rotate(.6deg)}38%,62%{transform:translate(-4px,0) rotate(-.6deg)}100%{transform:translate(6px,0) rotate(.6deg)}}
@keyframes fit-float{from{transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) - .7deg)) translateY(.9%)}to{transform:translate(-50%,-50%) rotate(calc(var(--rot,0deg) + .7deg)) translateY(-.9%)}}
/* Moving text over a gallery image (Acacia Culture Guide). The band sits at --top with height --h; each copy is --mw wide and
   repeats every --pitch (all % of the box, measured from the approved composite). The track slides one pitch per cycle. */
.cs-mq{position:absolute;left:0;top:var(--top);width:100%;height:var(--h);overflow:hidden;pointer-events:none}
.cs-mq-track{position:absolute;left:var(--start);top:0;width:100%;height:100%;display:flex;align-items:flex-start;will-change:transform;animation:cs-mq var(--dur,14s) linear infinite}
.cs-mq-track img{position:static;flex:none;width:var(--mw);max-width:none;height:auto;margin-right:calc(var(--pitch) - var(--mw));object-fit:unset;transform:none}   /* max-width:none so a strip wider than the box (ILL covers at 150%) is not capped */
.cs-gallery figure:has(> .cs-tm),.cs-gallery figure:has(> .cs-tb),.cs-gallery figure:has(> .cs-ts){container-type:inline-size}   /* so the sliding text sizes in cqw of the box */
.cs-tm{position:absolute;inset:0;overflow:hidden;font-family:"PP Frama",sans-serif;font-weight:900;font-size:var(--fs);line-height:var(--lh);color:var(--col);letter-spacing:var(--ls,0);white-space:nowrap;text-transform:uppercase;pointer-events:none}   /* sliding rows of type behind a cutout (Rookie guide) */
.cs-tm-row{display:flex;width:max-content;transform:translateX(var(--off,0))}
.cs-tm-half{display:flex;animation:tm-slide var(--dur,48s) linear infinite}
.cs-tm-half span{padding-right:var(--gap,.3em)}
@keyframes tm-slide{to{transform:translateX(-100%)}}
.cs-tm-row.rtl .cs-tm-half{animation-name:tm-slide-r}
@keyframes tm-slide-r{from{transform:translateX(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cs-tm-half{animation:none}}
.cs-tb{position:absolute;left:0;right:0;top:var(--top,0);text-align:center;font-family:"PP Frama",sans-serif;font-weight:900;font-size:var(--fs);line-height:var(--lh);color:var(--col,#fff);letter-spacing:var(--ls,0);white-space:nowrap;text-transform:uppercase;pointer-events:none}   /* still lines of type behind a cutout (Rookie can) */
.cs-ts{position:absolute;inset:0;overflow:hidden;text-align:center;font-family:"PP Frama",sans-serif;font-weight:900;font-size:var(--fs);line-height:var(--lh);color:var(--col,#fff);letter-spacing:var(--ls,0);white-space:nowrap;text-transform:uppercase;pointer-events:none}   /* lines of type rolling upward behind a cutout (Rookie bottle) */
.cs-ts-track{position:absolute;left:0;right:0;top:var(--top,0);animation:ts-up var(--dur,24s) linear infinite}
@keyframes ts-up{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.cs-ts-track{animation:none}}
.cs-mq.off .cs-mq-track,.cs-tm.off .cs-tm-half,.cs-ts.off .cs-ts-track{animation-play-state:paused}   /* off screen (set by script): the strips and the sliding / rolling type stop until they are back in view */
@keyframes cs-mq{to{transform:translateX(calc(-1 * var(--pitch)))}}
.cs-credits{margin-top:60px}
.credit{position:relative;display:grid;grid-template-columns:159px 1fr;padding:15px 0 4px}   /* 37px row pitch, as on the template */
.credit>.rule{position:absolute;left:0;top:0}
.credit:first-child{padding-top:2px}
.credit span:last-child{opacity:.5}
.cs-row .val .sig{margin-top:30px}
.cs .more-sec{margin-top:89px;padding-bottom:150px}
.cs .more-sec .sec-head{margin-top:16px}   /* template: the More works heading sits 16px under its line */

/* ---------- Journal post (v5-journal: the Tommas Quinn reference layout on Fondu's grid; reference measured at 1440 × 900) ---------- */
.jp-head{display:flex;flex-direction:column;min-height:492px;padding-top:200px}   /* reference: label at y=200, title at 224, the date row's bottom at 492 whatever the title's length */
.jp-cat{margin:0;font-weight:500;opacity:.4}
.jp-title{margin:10px 0 0 calc(var(--lsb,0em) * -1);max-width:9.6em;font-size:clamp(48px,5.6vw,88px);font-weight:600;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}   /* v5-journal 7th pass: 80px at 1440, 88px from 1570 up, 48px on phones (6th pass had 72 / 80 / 44). The column is 9.6em, tied to the type, so every title breaks into two balanced lines ("Fondu opens / in Canada") on any screen; a 50% column let the titles fit on one line on wide screens */
.jp-title .w{clip-path:inset(-.5em -.2em -.2em -.2em)}   /* every word is its own mask, so each line of a wrapped title rises out of its own baseline (the case study mask clips one line) */
.jp-row{display:grid;grid-template-columns:var(--c2) 1fr;align-items:end;margin-top:auto;padding-top:40px}   /* summary on the second column (Menu, case study info), not the reference's 67% */
.jp-date{margin:0;font-weight:600}
.jp-date .lab{opacity:.4}
.jp-sum{margin:0;max-width:448px;font-size:16px;font-weight:400;letter-spacing:-.015em;line-height:1.25;opacity:.4}
.jp-hero{margin-top:20px;aspect-ratio:16/9;overflow:hidden;background:var(--surface)}   /* square corners, like the case study images */
.jp-hero img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.jp-body{display:grid;grid-template-columns:var(--ce) 1fr;align-items:start;margin-top:40px}   /* body on the ethos column (Powered by Brandinc., Approach) */
.jp-share{position:sticky;top:60px}
.jp-share p{margin:0}
.jp-share-links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-weight:500}
.jp-share-links a,.jp-share-links button{opacity:.4;transition:opacity .25s}
.jp-share-links a:hover,.jp-share-links button:hover{opacity:1}
.jp-text{max-width:650px}
.jp-text>*{margin:0}
.jp-text>*+*{margin-top:1em}
.jp-text p,.jp-text li{font-size:17px;font-weight:var(--bw,300);letter-spacing:-.015em;line-height:1.5}   /* 1.5, not the reference's 1.2: these are long reads; v17b: Light (300) for every post, a post can still set bodyWeight */
.jp-text ul,.jp-text ol{padding-left:1.25em}
.jp-text li+li{margin-top:.35em}
.jp-text a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .25s}
.jp-text a:hover{opacity:.5}
.jp-h2{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.jp-text>.jp-h2{margin-top:48px}
.jp-text>.jp-h2:first-child{margin-top:0}
.jp-text>.jp-h2+*{margin-top:20px}
.jp-text .pq{font-size:33px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.jp-fig{aspect-ratio:3/2;overflow:hidden;background:var(--surface)}
.jp-fig img{display:block;width:100%;height:100%;object-fit:cover}
.jp-text>.pq,.jp-text>.pq+*,.jp-text>.jp-fig,.jp-text>.jp-fig+*{margin-top:40px}
.jp .more-sec{margin-top:293px;padding-bottom:150px}   /* template journal post, measured at 1440/1200/1000/800/600/375: rule 293px under the last body text, footer 150px under the cards */
.jp .more-sec .sec-head{margin-top:16px}   /* template: the heading sits 16px under its line */
.jp .viewport{margin-top:30px}   /* v5-journal 5th pass: the homepage Journal carousel (arrows, 339px cards, 360 on tablets, 165 on phones) sits 30px under the heading, the template's gap */

/* ---------- Contact ---------- */
.ct-hero{--ctTop:71.1vh;--ctH:66.6667vw;position:relative;height:calc(var(--ctTop) + var(--ctH))}   /* v10, measured on the template: the image box starts at 71% of the screen height and ends the section; v11: it is now 16:9 (the template's is 12:5) so the whole picture shows, books uncropped; v15: 3:2, the shape of the pen photo, so there is room under the card; the title sits entirely above it */
.ct-title{position:absolute;left:max(var(--m),env(safe-area-inset-left,0px));top:calc(var(--ctTop) - 147px);margin:0;font-size:60px;font-weight:600;letter-spacing:-.03em;--ctLh:69px;line-height:var(--ctLh);z-index:1}   /* v10: 60px, two lines 69px apart, the last line's bottom 18px above the image */
.ct-v{display:block}
.ct-m{display:none}   /* the shorter phone wording */
.ct-ln{display:block;height:var(--ctLh);overflow:hidden;padding-right:.1em;margin-right:-.1em}   /* v10, as on the template: each line rises out of its own strip */
.ct-title .ch{opacity:1;transform:translateY(70px);animation-name:ctrise}   /* 70px, no fade; the second line follows 0.1s later */
@keyframes ctrise{to{transform:none}}
.ct-img{position:absolute;left:0;right:0;top:var(--ctTop);height:var(--ctH);overflow:hidden;background:var(--surface)}
.ct-img img{position:absolute;left:0;top:-8%;width:100%;height:108%;object-fit:cover;max-width:none;will-change:transform}
.ct-body{margin-top:93px;display:grid;grid-template-columns:var(--c2) 1fr;padding-bottom:140px}
.ct-form form{margin-top:35px;width:450px;max-width:100%}
.ct-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:block;width:100%;height:40px;padding:0;margin:0;border:0;border-bottom:1px solid transparent;background:linear-gradient(var(--lc,var(--line)),var(--lc,var(--line))) no-repeat left bottom / 0 1px border-box;color:var(--fg);font:400 13px/1.2 var(--font);letter-spacing:0;border-radius:0;transition:background-size 1.6s var(--ease) var(--rd,0s)}   /* v8j: the underline is a drawn-in line, not a border: it grows across the field when the form is reached */
.field.in{background-size:100% 1px}
.field::placeholder{color:var(--placeholder)}
.field:focus{outline:none;--lc:var(--fg)}
textarea.field{height:139px;margin-top:30px;resize:none;padding-top:11px}
.submit{margin-top:20px;font-size:13px;font-weight:500;letter-spacing:0;transition:opacity .25s}
.submit:hover,.submit:active{opacity:.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}   /* spam trap field, never seen by people */
.form-note{margin:12px 0 0;font-size:13px;font-weight:500;opacity:.6;min-height:18px}
.ct-group{margin-top:22px}
.ct-details .h2+.ct-group{margin-top:43px}
.ct-group .lab{margin:0;font-size:13px;letter-spacing:-.015em;line-height:1.3}
.ct-group .line{margin:4px 0 0;font-size:13px;font-weight:500;letter-spacing:-.015em;line-height:13px}
.ct-group .lab+.line{margin-top:2px}
.ct-group .link{display:inline-block;margin-top:10px;font-size:13px;letter-spacing:-.015em;line-height:1.3;transition:opacity .25s}
.ct-group .link:hover{opacity:.5}

/* ---------- About ---------- */
.ab-hero{padding-top:182px}
.ab-hero h1{margin:0;max-width:1160px;font-size:52px;font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:pretty}
/* v8b: client names in the hero statement (the template's About page): dimmed, white on hover, with the client's image beside the pointer */
.cn-peek{position:fixed;left:0;top:0;width:93px;height:120px;pointer-events:none;z-index:40;display:none;will-change:transform}
.cn-peek .pk{width:100%;height:100%;overflow:hidden;background:var(--surface);animation:cn-pop .5s var(--ease) both}
.cn-peek img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
@keyframes cn-pop{from{transform:scale(1.1)}to{transform:none}}
@media (hover:hover) and (pointer:fine){.ab-hero .cn{color:var(--muted);transition:color .25s;cursor:default}.ab-hero .cn.on{color:var(--fg)}}   /* v8d: the names dim by colour (the letters' own opacity belongs to the rise animation) */
.marquee{margin-top:190px;height:479px;display:flex;align-items:center;overflow:hidden}
.mq-track{display:flex;gap:15px;align-items:center;width:max-content;animation:mq var(--mq-dur,60s) linear infinite}
.mq-track img{display:block;height:var(--h);width:auto;aspect-ratio:var(--ar,3/4);max-width:none;object-fit:cover}   /* v19: each picture keeps its own shape (--ar); 3:4 only when none is given */
@keyframes mq{to{transform:translateX(-50%)}}
/* Services: four columns that stick at 170px and arrive one after another */
.svc{margin-top:240px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:41px;align-items:start}   /* v8: three services, three even columns (was four) */
.svc-col{position:sticky;top:170px;height:300px}
.svc-col::after{content:"";position:absolute;top:0;bottom:0;right:-21px;width:1px;background:var(--line);transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--ease)}   /* v8j: the vertical divider draws down when its column is reached */
.svc-col.in::after{transform:none}
.svc-col:nth-child(2){margin-top:350px}.svc-col:nth-child(3){margin-top:700px}
.svc{padding-bottom:300px}
.svc-col h3{margin:0;font-size:clamp(24px,calc((100vw - 112px) / 25.8),50px);font-weight:600;letter-spacing:-.03em;line-height:1.05}   /* v8e: 50px at 1440 (was 38). Tied to the column: "Brand Experience" is 8.4 times the font size wide, the column is (100vw - 112px) / 3, so it always fits on one line */
.svc-col p{margin:30px 0 0;max-width:min(100%,400px);font-size:clamp(14px,1.2vw,17px);font-weight:500;letter-spacing:-.015em;line-height:1.35}   /* v8e: 17px at 1440 (was 13), the size of the journal text */
/* Statement over a sticky image; words light up as you scroll */
.stmt{height:500vh;position:relative;margin-top:10px}
.stmt-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--surface)}
.stmt-sticky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.stmt-sticky::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dim,0));pointer-events:none}   /* v14: an optional darkening layer over the photo (about.json statementImage.dim, 0 to 1) so the dimmed words stay readable on a bright picture */
.stmt-text{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:0 var(--m);color:#fff}   /* v44: white over the photo in light mode too (it sat black on the dark picture) */   /* v8f: the block sits in the middle of the image, both ways, as on the template; the lines inside it are left-aligned (the line breaker shrinks the box to its longest line) */
.stmt-text p{margin:0;max-width:860px;text-align:left;font-size:57px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.stmt-text .w{opacity:.3;transition:opacity .35s}
.stmt-text .w.on{opacity:1}
.cl-sec{margin-top:150px}   /* v8g: the same 150px of air above the line as the home page's Powered by Brandinc. section; the line draws in when it scrolls into view, and no longer sits against the image */
.cl{display:grid;grid-template-columns:var(--c2) 1fr;align-items:start;min-height:900px;padding-bottom:60px}   /* v8l: a fixed 900px like the template (it measures 870px from the title to the stats line at every screen height), so the image always rests 30px under the last name and 60px above the line instead of dropping lower on taller screens */   /* v8i: the pinned image comes to rest 60px above the stats line, as on the template (measured: image bottom 10115, line 10175) */   /* v8h, as on the template: the section is one screen tall (900px at 1440 × 900); the heading and the list start together at its top */
.cl>div:first-child{align-self:stretch;display:flex;flex-direction:column}
.cl-img{width:220px;height:300px;margin-top:20px;position:sticky;top:calc(100vh - 320px);overflow:hidden;background:var(--surface)}   /* v8k, as on the template: the image starts 20px under the heading and rises with the page, then stops 20px above the bottom of the screen and stays there until the section ends (it used to be pinned from the start, so it climbed over the title) */   /* v8h, as on the template: 220 × 300, pinned 20px above the bottom of the screen at the left while the section scrolls past, and resting at the bottom of the section */
.cl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.cl-img img.on{opacity:1}
.cl-list{list-style:none;margin:31px 0 0;padding:0}
.cl-name{font-size:clamp(34px,4vw,57px);font-weight:600;letter-spacing:-.035em;line-height:1.05;opacity:.5;transition:opacity .25s;cursor:default}
.cl-name.on{opacity:1}   /* v8i: only the active name is lit; the pointer does not light names (scroll decides, as on the template) */
.st{display:grid;grid-template-columns:var(--c2) 1fr;align-items:start;padding-bottom:150px}
.st .h3{margin-top:17px}
.stat{position:relative;padding-bottom:50px}
.stat>.rule{position:absolute;left:0;bottom:0}   /* v8j: the divider under each stat but the last is a drawn-in line */
.stat .num{margin:0;font-size:57px;font-weight:400;letter-spacing:-.01em;line-height:80px}
.stat p{margin:0;max-width:280px;font-size:13px;font-weight:500;letter-spacing:-.015em;line-height:1.35}
.team{padding-bottom:150px}
.team .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.team .cards>:first-child{grid-column:2}
.tm .img{aspect-ratio:331/422;overflow:hidden;background:var(--surface)}
.tm .img img{display:block;width:100%;height:100%;object-fit:cover}
.tm .cap{display:flex;justify-content:space-between;align-items:flex-start;margin-top:10px}
.tm .cap p{margin:0}
.tm .cap p+p{opacity:.5}
.cta{position:relative;height:431px}   /* 471px from this rule to the footer's rule */
.cta h2{margin:20px 0 0;max-width:420px;font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.cta .arrow-link{margin-top:15px}


/* ---------- Works index (template: Case studies) ---------- */
/* The title area is the template's size (grid starts at 260px); the title sits 20px above the grid like the homepage tagline above its first panel (Youssef's request; template: title at 153) */
.wk-head{position:relative;height:260px}
.wk-title{position:absolute;left:max(var(--m),env(safe-area-inset-left,0px));bottom:20px;margin:0;font-size:57px;font-weight:600;letter-spacing:-.035em;line-height:1.05}
.wk-title .ch{transform:translateY(50px)}
.wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:0}
.wk-grid.v2{grid-template-columns:repeat(3,1fr)}
.wk-grid.v3{grid-template-columns:repeat(4,1fr)}
.wk-grid.v3 .wcard .cap{font-size:13px;letter-spacing:-.015em}
.wk-grid .wcard .img{aspect-ratio:690/399}
/* View switch: sticks 25px above the bottom edge while the grid is on screen, then settles below it */
.wk-toggle-wrap{position:sticky;bottom:25px;z-index:5;display:flex;justify-content:center;margin:25px 0 6px;height:39px;pointer-events:none}
.wk-toggle{display:flex;align-items:center;gap:6px;height:39px;padding:7px 7px 7px 10px;border-radius:5px;background:var(--pill);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:auto}
.wk-toggle .lab{font-size:13px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.wk-toggle .btns{display:flex;gap:2px}
.wk-toggle button{width:25px;height:25px;border-radius:5px;display:grid;place-items:center;opacity:.4;transition:opacity .25s}
.wk-toggle button.on,.wk-toggle button:hover{opacity:1}
.wk-toggle svg{width:17px;height:17px;display:block;fill:currentColor}
.wk-toggle .ph{display:none}
@media (max-width:809px){
  .wk-head{height:240px}   /* template: grid at 240 on phones */
  .wk-title{font-size:38px}
  .wk-grid{grid-template-columns:1fr;gap:39px;margin-top:0}
  .wk-grid.v2,.wk-grid.v3{grid-template-columns:1fr 1fr;gap:15px}
  .wk-grid .wcard .img{aspect-ratio:345/200}
  .wk-grid.v2 .wcard .cap,.wk-grid.v3 .wcard .cap{flex-direction:column;gap:2px}
  .wk-toggle .dt-only{display:none}
  .wk-toggle-wrap{bottom:calc(60px + env(safe-area-inset-bottom,0px))}   /* template: 60px up on phones */
  .wk-toggle .dt{display:none}
  .wk-toggle .ph{display:block}
}
@media (prefers-reduced-transparency:reduce){.wk-toggle{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Logo overlays (Veo, ILL) sit centred on any media box: panel, card or project hero. Kept last so no media rule re-positions the logo. */
.overlay{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--w);transform:translate(-50%,-50%);pointer-events:none}
.overlay svg,.overlay img{position:static;inset:auto;width:100%;height:auto;max-width:none;object-fit:unset}
.overlay.blend{mix-blend-mode:screen}   /* animated mark: a white-on-black clip; the blend sits on the wrapper (its transform isolates children), so the black drops out against the image */
.overlay video.blend{position:static;display:block;width:100%;height:auto;object-fit:unset;transform:none;opacity:1}

/* ---------- Tablet (810–1199px, measured on the template at 1141 × 896) ----------
   The template drops to its tablet layout below 1200px: 15px margins, phone-style menu, smaller
   statements, the project title row fixed at 48% of its panel, and half-width grids. */
/* ---------- Journal listing (v5-journal 7th pass: the template's /journal page, measured at 1440 / 1000 / 375) ---------- */
.jn-head{padding-top:240px}   /* title at y=240 like the template (Works index: 240 too) */
.jn-title{margin:0 0 0 calc(var(--lsb,0em) * -1);font-size:57px;font-weight:600;letter-spacing:-.035em;line-height:1.05;min-height:60px}   /* template 60px → Fondu's 57px display size; letters rise like the Works title */
.jn-title .ch{transform:translateY(50px)}
.jn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:80px 20px;margin-top:30px;padding-bottom:160px}   /* template: cards 30px under the title, rows 80px apart, footer 160px under the last row */
.jn-grid .post{flex:none}

@media (min-width:810px) and (max-width:1199px){
  :root{--m:15px}
  /* Header stays as on desktop (Menu at the second column, Contact at the right) at Youssef's request;
     the template switches to the phone menu here. */
  /* Home */
  .card{height:54.2vw}
  /* Title rows keep the desktop behaviour (sticky at 400px, fading from project to project) at Youssef's request;
     the template fixes them at 48% of the panel at this width. */
  /* The Powered by Brandinc. paragraph keeps its approved desktop size (24px, 460px wide) at this width. */
  .post{flex-basis:360px}
  .f-col{width:160px}
  .f-cols{gap:0}
  .f-bottom .right{left:auto;right:0}
  .cards3,.cards4{gap:15px}
  /* Case study keeps the desktop arrangement here at Youssef's request (number left, title under Menu,
     info rows at the second column); the template moves them to one line and full width below 1200px. */
  .cs-row{grid-template-columns:160px 1fr}
  .cs-gallery{gap:15px}
  .cs-pair{gap:15px}
  .cs-pair.swap{--pg:15px}
  .cs .cards3{grid-template-columns:1fr 1fr}
  .cs .cards3 .wcard:nth-child(3){display:none}
  .cs .cards3 .wcard .cap{font-size:13px;letter-spacing:-.015em}
  /* About */
  .ab-hero{padding-top:156px}
  .ab-hero h1{font-size:40px}
  .marquee{margin-top:246px;height:460px}
  .svc{margin-top:249px}
  .cl,.st{grid-template-columns:1fr 1fr}
  .cl-img{width:180px;height:246px}
  .team .cards{grid-template-columns:repeat(3,1fr);gap:20px}
  .team .cards>:first-child{grid-column:auto}
  /* Contact */
  .ct-hero{--ctTop:51.25vh;--ctH:66.6667vw}   /* v10, template at 1000 x 800 */
  .ct-title{top:calc(var(--ctTop) - 145px);--ctLh:72px}
  .ct-form form{width:518px}
  /* Journal post */
  .jp-sum{max-width:none}
  /* Journal listing */
  .jn-grid{grid-template-columns:1fr 1fr;gap:15px;padding-bottom:150px}
  .cards4{grid-template-columns:1fr 1fr}
  /* Works index */
  .wk-grid{gap:15px}
  .wk-grid .wcard .cap{font-size:13px;letter-spacing:-.015em}
}

/* ---------- Phone (≤ 809px, measured at 375) ---------- */
@media (max-width:809px){
  :root{--m:15px}
  .h3{font-size:28px}
  .h2{font-size:19px}
  .menu{left:auto;right:max(var(--m),env(safe-area-inset-right,0px));flex-direction:row-reverse}
  .links{position:fixed;inset:48px 0 auto 0;flex-direction:column;gap:6px;padding:10px max(var(--m),env(safe-area-inset-right,0px)) 20px;align-items:flex-end;background:var(--bg);pointer-events:none;opacity:0;transition:opacity .3s}
  .open .links{opacity:1;pointer-events:auto}
  .links a span{opacity:1;font-size:19px}
  .est,.scroll-hint{display:none}
  .hdr-right{right:calc(max(var(--m),env(safe-area-inset-right,0px)) + 53px)}
  .links .m-only{display:block}
  .hero{height:70vh;min-height:420px}
  .hero .wrap{position:absolute;inset:auto 0 20px 0}
  .hero h1{width:100%;max-width:none;font-size:34px}
  .card{height:567px}
  .label{top:50%;font-size:19px;height:19px}
  .label .disc{left:auto;right:max(var(--m),env(safe-area-inset-right,0px))}
  .label .yr{display:none}
  .ethos{padding-top:100px}
  .ethos-label{position:static;margin-bottom:40px}
  .ethos-text{margin-left:0;max-width:100%}
  .ethos-text p{font-size:15px;line-height:1.4}
  .stack{position:relative;margin-top:40px}
  .journal{padding-block:100px 60px}
  .journal.has-rule{padding-top:100px}
  .post{flex-basis:165px}
  .f-top{flex-direction:column;gap:80px;min-height:0;padding-bottom:120px}
  .f-cols{position:static;flex-direction:column;gap:40px}
  .f-bottom .mid{left:46px}
  .f-bottom .right{left:auto;right:0}
  .cards3,.cards4{grid-template-columns:1fr;gap:40px;margin-top:70px}
  .cards4{margin-top:110px}
  .wcard .img{aspect-ratio:345/200}
  .wcard .cap{font-size:13px;letter-spacing:-.015em}
  .rv{transform:translateY(16px)}

  /* Case study */
  .cs-head{padding-top:246px}
  .cs-mask-num{top:246px}
  .cs-mask-title{margin-left:115px}
  .cs-num{font-size:38px}
  .cs-title{font-size:38px;min-height:40px}
  .cs-hero{margin-top:29px;aspect-ratio:auto;height:567px}
  .cs-row{margin-left:0;grid-template-columns:122px 1fr;padding:11px 0 30px}
  .cs-details{grid-template-columns:1fr}
  .cs-det-about{max-width:none;margin-bottom:34px}
  .cs-det-item+.cs-det-item{margin-top:22px}
  .cs-approach{margin-top:54px}
  .cs-approach-label{position:static;margin-bottom:28px}
  .cs-approach-text{margin-left:0;max-width:none}
  .cs-row.credits,.cs-row.quote{padding-top:11px}
  .cs-row.quote .lab{margin-top:0}
  .cs-row .val{max-width:none}
  .cs-gallery{grid-template-columns:1fr;gap:15px;margin-top:100px}
  .cs-gallery figure.full{grid-column:auto}
  .cs-pair{display:contents}   /* phones: the pair stacks like everything else */
  .cs-pair.swap figure{height:auto;aspect-ratio:var(--r,3/2)}
  .cs-credits{margin-top:54px}
  .credit{grid-template-columns:116px 1fr;padding:10px 0 8px}
  .credit:first-child{padding-top:0}
  .cs .more-sec{margin-top:60px;padding-bottom:150px}

  /* Journal post */
  .jp-head{min-height:0;padding-top:160px}
  /* Journal listing */
  .jn-title{font-size:38px;min-height:40px}
  .jn-grid{grid-template-columns:1fr;gap:40px;padding-bottom:150px}
  .jp-title{max-width:none}
  .jp-row{grid-template-columns:1fr;gap:24px;padding-top:30px}
  .jp-sum{max-width:none}
  .jp-body{display:block;margin-top:30px}
  .jp-share{position:static;display:flex;align-items:baseline;gap:16px}   /* one row under the hero, not sticky */
  .jp-share-links{flex-direction:row;gap:16px;margin:0}
  .jp-text{margin-top:40px;max-width:none}
  .jp-text p,.jp-text li{font-size:15px;line-height:1.5}
  .jp-h2{font-size:24px}
  .jp-text .pq{font-size:28px}

  /* Contact */
  .ct-hero{--ctTop:38.2vh;--ctH:125.6vw}   /* v10, template at 375 x 812: image box from 310px, 471px tall, ends the section at 781px */
  .ct-title{top:calc(var(--ctTop) - 94px);font-size:40px;--ctLh:43px}
  .ct-d{display:none}.ct-m{display:block}
  .ct-body{margin-top:56px;grid-template-columns:1fr;padding-bottom:230px}
  .ct-form form{width:100%}
  .ct-form .pair{gap:20px}
  .ct-details{margin-top:106px}
  .ct-details .h2+.ct-group{margin-top:66px}

  /* About */
  .ab-hero{padding-top:109px}
  .ab-hero h1{font-size:33px}
  .marquee{margin-top:200px;height:270px}
  .mq-track img{height:calc(var(--h) * .6)}
  .svc{margin-top:116px;grid-template-columns:1fr;gap:0;padding-bottom:0}
  .svc-col{position:static;height:auto;margin:0!important}
  .svc-col+.svc-col{margin-top:71px!important}
  .svc-col::after{display:none}
  .svc-col h3{font-size:34px}
  .svc-col p{margin-top:14px;max-width:none;font-size:16px}   /* v8e: was 28px / 13px */
  .stmt{height:300vh;margin-top:120px}
  .stmt-text p{max-width:345px;text-align:left;font-size:40px;line-height:.98}
  .cl{grid-template-columns:1fr;position:relative;min-height:0;padding-bottom:120px}
  .cl>div:first-child{display:block}
  .cl .h3{margin-bottom:0}
  .cl-list{margin-top:40px}
  .cl-img{position:relative;top:auto;bottom:auto;width:104px;height:142px;margin:20px 0 0}   /* v8g: in the flow under the heading, so it never sits on a long client name (it used to float at the bottom right) */
  .cl-name{font-size:38px}
  .cl-sec{margin-top:100px}   /* the home page uses 100px here on phones */
  .st{grid-template-columns:1fr;padding-bottom:120px}
  .st .h3{margin:0 0 40px}
  .team .cards{grid-template-columns:1fr}
  .team .cards>:first-child{grid-column:auto}
  .cta{height:auto;padding-bottom:160px}
  .cta h2{font-size:28px;max-width:320px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .mq-track,.cs-mq-track,.cs-gallery .fit.float,.boxer,.boxer .arm img,.boxer .glove img,.cs-gallery img.breathe,.breakdown .layer,.vinyl .disc img{animation:none}
  .breakdown .layer{opacity:1}
  .rv,.rv-big,.rv-words .w,.jp-title .w,.ch,.ent{opacity:1;transform:none;animation:none}
}

/* v37: page slide. The old page is a copy on a fixed layer above everything (child of <html>, so body's own transform does not move it). */
.pt-old{position:fixed;left:0;top:0;right:0;bottom:0;z-index:200;overflow:hidden;pointer-events:none;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:600;-webkit-font-smoothing:antialiased;will-change:transform}
.pt-old-in{position:absolute;left:0;top:0;width:100%}

/* v39: keyboard "skip to content" link (only visible while it has focus), and larger invisible touch areas for the small header and footer links on touch screens. Nothing visible changes. */
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:#fff;color:#000;padding:10px 14px;font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{left:max(var(--m),env(safe-area-inset-left,0px));top:8px}
main:focus{outline:none}
@media (pointer:coarse){
  .nav .roll,.menu-btn,.theme,.hdr-right .est,footer a{position:relative}
  .nav .roll::after,.menu-btn::after,.theme::after,.hdr-right .est::after,footer a::after{content:"";position:absolute;inset:-11px -6px}
}

/* v41: a logo overlay marked "pw" in projects.json uses its own phone width (--wm). The general rule above is kept last on purpose, so this one sits after it. */
@media (max-width:809px){.overlay.pw{width:var(--wm)}}

/* v45: on the Studio page the header sits over the dark statement photo; in light mode it turns white there so it can be read (dark mode is white already). Script sets .on-img while the header is over the photo. */
html[data-theme="light"] .nav.on-img{color:#fff}
html[data-theme="light"] .nav.on-img .logo-light{display:none}
html[data-theme="light"] .nav.on-img .logo-dark{display:block}
html[data-theme="light"] .nav.on-img .theme{background:rgba(255,255,255,.25)}
html[data-theme="light"] .nav.on-img .theme .knob{background:#fff}