/* =====================================================================
   mnml — October 2026 (Figma 73:456 hero, 74:764 full page)
   Desktop: everything is placed in Figma's 1920-wide frame units (--u = 1/1920 of the page width),
   so the layout scales as one piece. Phones (≤760px) switch to a stacked layout.
   ===================================================================== */
@font-face{font-family:'Strichpunkt SE';src:url('../assets/fonts/StrichpunktSans_SemiExpanded-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Strichpunkt SE';src:url('../assets/fonts/StrichpunktSans_SemiExpanded-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Strichpunkt SE';src:url('../assets/fonts/StrichpunktSans_SemiExpanded-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Strichpunkt SE';src:url('../assets/fonts/StrichpunktSans_SemiExpanded-Black.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:'Strichpunkt';src:url('../assets/fonts/StrichpunktSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Strichpunkt SE';src:url('../assets/fonts/StrichpunktSans_SemiExpanded-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Strichpunkt';src:url('../assets/fonts/StrichpunktSans-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Strichpunkt';src:url('../assets/fonts/StrichpunktSans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Strichpunkt';src:url('../assets/fonts/StrichpunktSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --green:#044432;
  --cream:#fffaee;
  --orange:#fd6d00;
  --yellow:#ffdb0f;
  --ph:#d9d9d9;
  --se:'Strichpunkt SE','Helvetica Neue',Arial,sans-serif;
  --hand:'Grape Nuts','Bradley Hand',cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  --swap:.75s ease;   /* colour changes */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--cream);color:#000;font-family:var(--se);-webkit-font-smoothing:antialiased;
  font-kerning:normal;font-feature-settings:"kern" 1;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.page{container-type:inline-size;position:relative}

/* Loading screen (Figma 92:1126, 1728 × 1117): green, one cream brush line drawn across it, then it lifts away */
.loader{display:none;position:fixed;inset:0;z-index:100;align-items:center;background:var(--green);color:var(--cream);overflow:hidden}
html.is-loading .loader{display:flex}
html.is-loading{overflow:hidden}
.loader .stk{flex:none;width:calc(100vw * 1795 / 1728);height:calc(100vw * 112.9 / 1728);margin:0 0 calc(100vh * .04) calc(100vw * -50 / 1728)}   /* starts just off the left edge, a touch above centre, as in the frame */
html.is-leaving .loader{translate:0 -100%;transition:translate .8s cubic-bezier(.7,0,.2,1)}

/* Pencil line: above the section colours, under everything on them */
.pencil{position:absolute;z-index:1;left:0;top:0;overflow:visible;pointer-events:none;visibility:hidden}
.pencil-ink{fill:none;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;stroke-dashoffset:1;opacity:.9}
.ink-light{stroke:#000}           /* over cream */
.ink-dark{stroke:var(--cream)}    /* over green */
.abs,.at,.hero-stage,.nav,.about-photo{z-index:2}
.page>*{--u:calc(min(100cqw, 2400px) / 1728)}   /* Figma 97:1156 — MacBook 16" frame, 1728 wide */

/* placement in frame units */
.abs,.at{position:absolute;left:calc((var(--x) + var(--ox, 0)) * var(--u));top:calc((var(--y) + var(--oy, 0)) * var(--u))}
.at{line-height:0}

/* ---------- hand-drawn strokes (built by tools/build.py) ---------- */
.stk{display:block;width:calc(var(--sw) * var(--u));height:calc(var(--sh) * var(--u));overflow:visible;fill:currentColor;transform-origin:50% 50%}
.stk-draw{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;stroke-dashoffset:1.1}
/* hidden = offset 1.1: both ends of the line sit inside the gap, so the round caps can't leave dots behind */
.accent{color:var(--orange);transition:color var(--swap)}
.boil-defs{position:absolute;width:0;height:0;overflow:hidden}   /* the jiggle filters (main.js cycles them) */

/* =====================================================================
   HERO — cream
   ===================================================================== */
.hero{position:relative;overflow:hidden;height:calc(760 * var(--u));background:var(--cream);color:var(--green)}
.hero-stage{position:absolute;inset:0}

.nav{position:absolute;inset:0 0 auto;height:0;z-index:5;color:var(--green)}
.nav-link{position:absolute;top:calc(27 * var(--u));   /* Figma 108:1446 — the same size and places in the hero and in the bar */
  font-size:max(11px, calc(13 * var(--u)));font-weight:500;line-height:calc(34.22 * var(--u));letter-spacing:.03em;white-space:nowrap}
.nav-link>span:first-child{position:relative;z-index:1}
.nav-brush{pointer-events:none}
.nav-about{left:calc(1315 * var(--u))}
.nav-work{left:calc(1462 * var(--u))}
.nav-contact{left:calc(1604 * var(--u))}

.hero-name{position:absolute;left:calc(79 * var(--u));top:calc(231 * var(--u));
  font-size:calc(157.44 * var(--u));font-weight:900;line-height:calc(126.52 * var(--u));letter-spacing:-.01em;white-space:nowrap}
.hero-hand{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));
  transform-origin:0 0;rotate:var(--r);   /* each handwritten piece is tilted on its own, as in Figma */
  font-family:var(--hand);font-size:calc(30.69 * var(--u));line-height:calc(26.64 * var(--u));letter-spacing:.06em;text-align:center;white-space:nowrap;
  color:#000;transition:color var(--swap)}

/* Nav bar: solid green, hidden over the hero; it slides down once the big name reaches it (as on roxsinson.com)
   and its logo and links rise in just after. The big name stays put and scrolls on under the bar. */
.bar{position:fixed;z-index:20;left:0;right:0;top:0;height:calc(90 * var(--u));background:var(--green);color:var(--cream);
  translate:0 -101%;visibility:hidden;transition:translate .65s var(--ease),visibility 0s linear .65s}
html.bar-on .bar{translate:0 0;visibility:visible;transition:translate .65s var(--ease),visibility 0s}
.bar .nav-link,.bar-logo{opacity:0;translate:0 -.5em;transition:opacity .45s ease,translate .6s var(--ease)}
html.bar-on .bar .nav-link,html.bar-on .bar-logo{opacity:1;translate:0 0}
html.bar-on .bar-logo{transition-delay:.08s}
html.bar-on .bar .nav-about{transition-delay:.14s}
html.bar-on .bar .nav-work{transition-delay:.19s}
html.bar-on .bar .nav-contact{transition-delay:.24s}
.bar-logo{position:absolute;left:calc(47 * var(--u));top:calc(24 * var(--u));display:block;color:var(--cream)}
.bar-name{display:block;font-size:calc(25.76 * var(--u));font-weight:900;line-height:calc(20.7 * var(--u));letter-spacing:-.01em;white-space:nowrap}
.bar-brush{pointer-events:none}

/* Links: a hand-drawn box (it boils like the other brushes); it opens to LinkedIn + contact */
.links{position:absolute;z-index:4;left:calc(561.4 * var(--u));top:calc(181.4 * var(--u));width:calc(134.8 * var(--u));height:calc(63.4 * var(--u));
  cursor:pointer;outline:none;transition:height .45s var(--ease)}
.links-side{position:absolute;line-height:0}
.links-side .stk{width:100%;height:100%}
.links-l{left:calc(3.5 * var(--u));top:calc(1.6 * var(--u));bottom:calc(3.6 * var(--u));width:calc(9.5 * var(--u))}
.links-r{left:calc(116.9 * var(--u));top:0;bottom:0;width:calc(8.1 * var(--u))}
.links-t{left:calc(3 * var(--u));top:calc(.9 * var(--u));width:calc(114.7 * var(--u));height:calc(11.2 * var(--u))}
.links-b{left:0;bottom:calc(8.4 * var(--u));width:calc(134.8 * var(--u));height:calc(8.7 * var(--u))}
.links-label{position:absolute;left:calc(38.6 * var(--u));top:calc(15.6 * var(--u));
  font-family:var(--hand);font-size:max(10px, calc(16.18 * var(--u)));font-weight:400;line-height:calc(27.69 * var(--u));letter-spacing:.15em;color:#000;transition:color var(--swap)}
.links-items{position:absolute;left:0;right:calc(9 * var(--u));top:calc(56 * var(--u));display:flex;justify-content:center;gap:calc(12 * var(--u));
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.links-item{display:flex;align-items:center;justify-content:center;width:calc(39 * var(--u));height:calc(39 * var(--u));border-radius:50%;
  color:currentColor;transition:transform .25s var(--ease),background-color .25s ease}
.links-item svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}
.links-item:hover,.links-item:focus-visible{transform:scale(1.12);background:rgba(253,109,0,.14);outline:none}
.links.is-open,.links:focus-within{height:calc(118 * var(--u))}
@media (hover:hover){.links:hover{height:calc(118 * var(--u))}.links:hover .links-items{opacity:1;pointer-events:auto;transition-delay:.12s}}
.links.is-open .links-items,.links:focus-within .links-items{opacity:1;pointer-events:auto;transition-delay:.12s}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.sec{position:relative;overflow:hidden}
.sec[data-theme="light"]{background:var(--cream);color:#000}
.sec[data-theme="dark"]{background:var(--green);color:#fff}
.sec[data-theme="dark"] .accent{color:var(--yellow)}
/* Colour changes between sections (ref: rodrigoschivi.com): the incoming colour grows as a circle from the bottom
   centre of the screen as the section scrolls in, and shrinks back on the way up. The section keeps the previous colour
   underneath (--prev); its own colour is a layer under the pencil line and the content (main.js sets --r and --cy). */
.sec.reveal{background:var(--prev);box-shadow:0 -1px 0 var(--prev)}   /* closes the hairline seam at fractional section edges */
.sec.reveal::before{content:"";position:absolute;inset:0;z-index:0;background:var(--own);pointer-events:none;
  clip-path:circle(var(--r, 0px) at 50% var(--cy, 100%))}   /* orange marks turn yellow on green, as in the hero */
.sec-work{height:calc(1993 * var(--u))}
.sec-omaze{height:calc(956 * var(--u))}
.sec-samsung{height:calc(1283 * var(--u))}
.sec-about{height:calc(1371 * var(--u))}
.sec-end{height:calc(996 * var(--u))}

.label{font-size:max(11px, calc(20 * var(--u)));font-weight:500;line-height:1.711;letter-spacing:.03em;white-space:nowrap}
.label>span:first-child{position:relative;z-index:1}
.label-plain{font-weight:400}   /* ( WORK ) is Regular */

.ph{background:var(--ph);width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
/* media tiles (images and silent loops): black & white until you hover a work card — then all of that card's
   images turn to colour together */
.vid{overflow:hidden;background:#000}
.vid>img,.vid>video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s ease}
.feature:hover .vid>*,.tile:hover .vid>*{filter:none}
.vid.vid--fit>*{object-fit:contain}               /* shown whole, on a background that matches the footage */
.vid--dark{background:#0a0b0a}                 /* Kaffe: blends into the iPhone's black */
.vid--light{background:#fff}                   /* Munchkin: the ad's white */
.feature-link{z-index:3;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}   /* the whole project opens its page */

/* cursor: the orange dot from the earlier sites (mouse / trackpad only — created in main.js) */
.cursor-dot{position:fixed;left:0;top:0;z-index:9999;width:18px;height:18px;border-radius:50%;
  background:var(--orange);pointer-events:none;transform:translate3d(-100px,-100px,0);opacity:0;transition:opacity .2s ease}
.cursor-dot.is-visible{opacity:1}
html.has-cursor-dot,html.has-cursor-dot *{cursor:none !important}
.feat-title{font-size:calc(68.6 * var(--u));font-weight:900;line-height:calc(117.38 * var(--u));letter-spacing:.02em;white-space:nowrap;color:#000}
.sec[data-theme="dark"] .feat-title{color:var(--cream)}
.feat-sub{font-size:calc(20.03 * var(--u));font-weight:400;line-height:calc(64.43 * var(--u));letter-spacing:.03em;white-space:nowrap}

.tile{width:calc(var(--w) * var(--u))}
.tile .ph{width:100%;height:calc(var(--h) * var(--u))}
.tile-name{margin-top:0;font-size:calc(17.09 * var(--u));font-weight:400;line-height:calc(40.83 * var(--u));letter-spacing:.03em;white-space:nowrap}
.tile-name span{margin:0 .42em 0 .32em}

.about-photo{position:absolute;inset:0;pointer-events:none}
.about-photo img{width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));border-radius:999px;object-fit:cover;display:block}   /* exported from Figma with its adjustments baked in: B&W, exposure +0.30, contrast +0.53, shadows +0.38 */   /* Figma: saturation −100, exposure +0.41 */
.about-text{font-family:'Strichpunkt',var(--se);font-size:calc(26.32 * var(--u));font-weight:500;line-height:calc(45.61 * var(--u));letter-spacing:.03em;
  color:var(--cream);white-space:nowrap}
.about-text p+p{margin-top:calc(26.35 * var(--u))}

/* =====================================================================
   PROJECT PAGES (Figma 98:1240 Bud Light) — the left side stays put while the right side scrolls (ref:
   ueno.work/wednesday). Pictures run from x 907 to the right edge of the page at every width.
   ===================================================================== */
.case-body{position:relative;height:calc(var(--h) * var(--u))}
/* the left column: pinned to the top of the screen; on a screen too short for it, its bottom stays in view instead */
.case-aside{position:sticky;z-index:2;top:min(0px, calc(100vh - 950 * var(--u)));height:calc(950 * var(--u));width:calc(907 * var(--u))}
.case-main{position:absolute;inset:0}
.case-end{height:calc(var(--h) * var(--u))}

.case-title{font-size:calc(52.34 * var(--u));font-weight:900;line-height:calc(89.55 * var(--u));letter-spacing:.02em;white-space:nowrap}
.case-sub{font-size:calc(15.28 * var(--u));font-weight:400;line-height:calc(49.16 * var(--u));letter-spacing:.03em;white-space:nowrap}
.case-kind{font-size:calc(15.26 * var(--u));font-weight:500;line-height:calc(26.11 * var(--u));letter-spacing:.03em;white-space:nowrap}
.case-credits{font-size:calc(13 * var(--u));font-weight:500;line-height:calc(28.38 * var(--u));letter-spacing:.03em;white-space:nowrap}
.case-head{font-size:calc(13 * var(--u));font-weight:700;line-height:calc(28.38 * var(--u));letter-spacing:.03em;white-space:nowrap}
.case-head:has(+ .case-text--tight){line-height:calc(23.14 * var(--u))}
.case-text{width:calc(var(--w) * var(--u));font-size:calc(13 * var(--u));font-weight:500;line-height:calc(28.38 * var(--u));letter-spacing:.03em}
.case-text p+p{margin-top:calc(28.38 * var(--u))}   /* one empty line between paragraphs, as in Figma */
.case-text--tight{line-height:calc(23.14 * var(--u))}
.case-text--tight p+p{margin-top:calc(23.14 * var(--u))}
.case-tag{white-space:pre}

.case-box{position:absolute;z-index:2;left:calc(907 * var(--u));right:0;top:calc(var(--y) * var(--u));height:calc(442 * var(--u));overflow:hidden;background:var(--ph)}
.case-box--sq{left:auto;width:calc(423 * var(--u));height:calc(423 * var(--u))}
.case-box>img,.case-box>video{display:block;width:100%;height:100%;object-fit:cover}

/* project pages: the green bar is there from the start (no slide-in) */
html.bar-fixed .bar,html.bar-fixed .bar .nav-link,html.bar-fixed .bar-logo{translate:0 0;opacity:1;visibility:visible;transition:none}

/* the film (as on roxsinson.com/budlight): starts with sound; click to pause / play; the pill turns sound on / off */
.case-film{cursor:pointer;background:#000}
.case-film-play{position:absolute;left:50%;top:50%;width:max(48px, calc(96 * var(--u)));aspect-ratio:1;border-radius:50%;
  background:rgba(255,250,238,.92);transform:translate(-50%,-50%) scale(.85);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.case-film-play::after{content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:.62em 0 .62em 1.05em;border-color:transparent transparent transparent var(--green);font-size:max(14px, calc(26 * var(--u)))}
.case-film.is-paused .case-film-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.case-sound{position:absolute;right:calc(24 * var(--u));bottom:calc(24 * var(--u));padding:.5em 1.15em;border:0;border-radius:999px;
  background:var(--cream);color:var(--green);cursor:pointer;font:inherit;font-size:max(11px, calc(15 * var(--u)));font-weight:500;line-height:1.1;letter-spacing:.03em;
  transition:background-color .25s ease,color .25s ease}
.case-sound:hover,.case-sound:focus-visible{background:var(--orange);color:#fff;outline:none}

/* pencil line: drawn once when the page opens (main.js), under the text; it lives in the pinned left side */
.case-aside .mark{z-index:0}
.mark{z-index:1;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));overflow:visible;pointer-events:none}
.mark path{fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1.2;stroke-dashoffset:1.1}

/* =====================================================================
   V3 HOME TRIAL (Figma 110:1660, index2.html) — behaviour after perhoj.no:
   · a header that's always there (cream, so the work slides cleanly under it); the big name shrinks into its left
     end as you scroll (main.js), lined up with the work's left edge — CONTACT ends on the work's right edge
   · LinkedIn + contact fixed in the left margin, halfway down the screen
   · tiles: white title tab over a black category bar, text of both on one left edge; the picture eases in 4% on hover
   · widths are fluid (Figma 1728 units); small text never drops under a readable size
   ===================================================================== */
.v3-page{--cream:#fffefb}   /* Figma 110:1660 background — the page, and the header's fill as you scroll */
.v3>*{--L:calc(217 * var(--u) + max(0px, (100cqw - 2400px) / 2));--W:calc(1344 * var(--u));
  --hu:var(--u);--C:calc(119.6 * var(--u))}

.v3-head{position:fixed;z-index:30;left:0;right:0;top:0;height:calc(130 * var(--u));pointer-events:none}
.v3-head::before{content:"";position:absolute;inset:0;background:var(--cream);opacity:var(--bg, 0)}
.v3-head-in{position:relative;height:100%;--uu:var(--u)}
.v3-name{position:absolute;left:calc(var(--L) - 4 * var(--hu));top:calc(var(--C) - 9.84 * var(--hu));
  font-family:'Strichpunkt',var(--se);font-size:calc(77.82 * var(--hu));font-weight:800;line-height:calc(19.68 * var(--hu));letter-spacing:-.01em;
  white-space:nowrap;color:#000;pointer-events:auto;transform-origin:calc(4 * var(--hu)) 50%;
  transform:translateY(var(--ty, 0px)) scale(var(--s, 1));will-change:transform}
.v3-nav{position:absolute;top:calc(75 * var(--uu));right:calc(100% - var(--L) - var(--W));display:flex;gap:calc(80 * var(--uu))}
.v3 .v3-nav .nav-link{--u:max(var(--uu), .6667px);position:relative;left:auto;top:auto;pointer-events:auto;
  font-size:calc(18 * var(--u));font-weight:500;line-height:calc(34.22 * var(--u));letter-spacing:.03em;color:#000}

.v3-rail{position:fixed;z-index:30;left:calc(34 * var(--u));top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:max(6px, calc(7 * var(--u)))}
.v3-icon{position:relative;display:block;width:max(22px, calc(30 * var(--u)));height:max(22px, calc(30 * var(--u)));color:#000}
.v3-icon svg{display:block;width:100%;height:100%}
.v3-icon:focus-visible{outline:none}
.v3-icon .ab-brush{left:-15%;top:calc(100% + 1px);width:130%;height:max(4px, calc(5 * var(--u)))}

.v3-col{margin-left:var(--L);width:var(--W)}
.v3-hero{position:relative;height:calc(484 * var(--u))}
.chip{--cu:var(--chip-u, var(--hu));position:absolute;z-index:3;left:calc(var(--x) * var(--cu));top:calc(var(--C) + (var(--y) + 58 - 119.6) * var(--cu));
  width:calc(var(--w) * var(--cu));height:calc(53 * var(--cu));rotate:var(--r);transform-origin:0 0}
.chip-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--c);opacity:0}   /* popped in by main.js */
.chip-t{font-family:'Lato',sans-serif;font-size:calc(34.08 * var(--cu));font-weight:400;line-height:calc(24.28 * var(--cu));letter-spacing:-.07em;
  white-space:nowrap;color:#000}

.v3-label{font-size:max(12px, calc(20 * var(--u)));font-weight:600;line-height:calc(34.22 * var(--u));letter-spacing:.03em;white-space:nowrap}
#work,#about{scroll-margin-top:calc(150 * var(--u))}

.v3-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(61 * var(--u)) calc(50 * var(--u));margin-top:calc(36.78 * var(--u))}
.v3-card{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--ph);--tu:max(var(--u), .58px)}
.v3-media{position:absolute;inset:0;overflow:hidden}
.v3-media>img,.v3-media>video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.v3-card:hover .v3-media>*,.v3-card.is-active .v3-media>*{transform:scale(1.04)}
/* hover (ref: perhoj.no, exactly): the title tab inverts — a black fill wipes up from its bottom and the name turns
   white; the category bar stays as it is. Mouse / trackpad only, as there */
.v3-t{position:relative}
.v3-t>span{position:relative;z-index:1;transition:color .1s}
.v3-t::before{content:"";position:absolute;z-index:0;left:0;bottom:-1px;width:100%;height:calc(100% + 2px);background:#000;
  transform:scaleY(0);transform-origin:center bottom;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .v3-card:hover .v3-t::before{transform:scaleY(1)}
  .v3-card:hover .v3-t>span{color:#fff}
}
/* touch screens: the card nearest the middle of the screen plays it as you scroll (main.js adds .is-active) */
.v3-card.is-active .v3-t::before{transform:scaleY(1)}
.v3-card.is-active .v3-t>span{color:#fff}
/* no page yet (Samsung U.S., Kaffe — as on the previous version): on hover the picture goes black and white and a
   "LOADING" tab, in the same style as the title tab, pops up in the middle */
.v3-card--soon{cursor:default}
.v3-card--soon .v3-media{transition:filter .45s ease}
.v3-soon{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;font-size:calc(23.27 * var(--tu));line-height:calc(24.8 * var(--tu));
  background:#fff;border:calc(1.55 * var(--tu)) solid #000;padding:calc(13.05 * var(--tu)) calc(12.45 * var(--tu));
  font-weight:900;letter-spacing:.03em;white-space:nowrap;color:#000;
  opacity:0;scale:.92;transition:opacity .35s ease,scale .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
@media (hover:hover){
  .v3-card--soon:hover .v3-media{filter:grayscale(1)}
  .v3-card--soon:hover .v3-soon{opacity:1;scale:1}
}
.v3-card--soon:focus-visible .v3-media,.v3-card--soon.is-active .v3-media{filter:grayscale(1)}
.v3-card--soon:focus-visible .v3-soon,.v3-card--soon.is-active .v3-soon{opacity:1;scale:1}
.v3-media--dark{background:#000}
.v3-media--kaffe{background:#0a0a0a}   /* Kaffe: the whole iPhone, zoomed out on the video's own near-black so the edges disappear; */
.v3-media--kaffe>video{object-fit:contain;padding:17% 0 9%}   /* sat a little low so its top clears the tags */
.v3-media>.v3-letterbox{position:absolute;left:-4.9%;top:19.52%;width:109.8%;height:61.16%;max-width:none}   /* Samsung U.S.: framed as in Figma, on black */
.v3-tags{position:absolute;z-index:1;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.v3-t,.v3-s{max-width:100%;font-size:calc(23.27 * var(--tu));line-height:calc(24.8 * var(--tu))}   /* one line = 54 tall, as in Figma; longer ones wrap */
.v3-t{background:#fff;border:calc(1.55 * var(--tu)) solid #000;padding:calc(13.05 * var(--tu)) calc(12.45 * var(--tu));
  font-weight:900;letter-spacing:.03em}
.v3-s{margin-top:calc(-1.55 * var(--tu));background:#000;color:#fff;padding:calc(14.6 * var(--tu)) calc(14 * var(--tu));
  font-weight:500;letter-spacing:0}

/* dotted divider across the work's width: whole dots only, first and last on the edges */
.v3-dots{--d:calc(17.8 * var(--u));--pitch:calc(27.63 * var(--u));display:block;height:var(--d);margin:calc(430 * var(--u)) 0 0 calc((var(--d) - var(--pitch)) / 2);
  width:calc(var(--W) + var(--pitch) - var(--d));
  background:radial-gradient(circle closest-side, #69f28e 96%, transparent 100%) 0 0 / var(--pitch) 100% round}

/* About (Figma 110:1660, redesigned): positions in frame units from the "( ABOUT )" label, on the work column */
.v3-about{--cu:max(var(--u), .72px);position:relative;margin-top:calc(149.2 * var(--u));height:calc(1471 * var(--u))}
.v3-about>.v3-label{position:absolute;left:0;top:0}
.v3 .v3-photo{position:absolute;inset:0}
.ab-bio,.ab-facts,.ab-contact{font-family:'Strichpunkt',var(--se);font-size:calc(17 * var(--cu));font-weight:500;line-height:calc(29 * var(--cu));letter-spacing:.03em}
.ab-bio b,.ab-facts b,.ab-contact b{font-weight:800}
.ab-bio .ab-b{font-weight:700}
.ab-facts span{font-weight:600}
.ab-bio{position:absolute;left:calc(424 * var(--u));top:calc(109 * var(--u));width:calc(692 * var(--u))}
.ab-bio p+p{margin-top:calc(29 * var(--cu))}
.ab-facts{position:absolute;left:calc(5 * var(--u));top:calc(438 * var(--u))}
.ab-tools{position:absolute;left:0;top:calc(551 * var(--u));display:grid;grid-template-columns:repeat(3, calc(68 * var(--u)));gap:calc(9 * var(--u));list-style:none}
.ab-tools img{display:block;width:100%;height:auto}
.ab-contact{position:absolute;left:calc(5 * var(--u));top:calc(896 * var(--u));width:calc(336 * var(--u))}
.ab-contact .ab-gap{margin-top:calc(29 * var(--cu))}
/* LinkedIn / Email: the nav's hand-drawn underline is drawn in on hover (main.js) */
.brush-link{position:relative;display:inline-block}
.brush-link>span:first-child{position:relative;z-index:1}
.ab-brush{position:absolute;left:calc(-3.7 * var(--cu));top:calc(26.5 * var(--cu));width:calc(100% + 7.4 * var(--cu));height:calc(5.9 * var(--cu));line-height:0;pointer-events:none}
.ab-brush .stk{width:100%;height:100%}

/* footer (all pages): a rule across the page, the name and year at its right end */
.v3-foot{--cu:max(var(--u), .72px);margin:0 calc(68 * var(--u)) 0 calc(56 * var(--u));padding:calc(19 * var(--u)) 0 calc(58 * var(--u));border-top:1px solid #000;text-align:right}
.v3-foot p{font-family:'Strichpunkt',var(--se);font-size:calc(17 * var(--cu));font-weight:800;line-height:calc(29 * var(--cu));letter-spacing:.03em}


/* phones and small tablets: one column of content 16px in from both edges (as on perhoj.no); the name and tags keep
   their composition, sized to the width; the side icons step aside (CONTACT is in the header) */
@media (max-width:767px){
  .v3>*{--L:16px;--W:calc(100cqw - 32px);--hu:min(1.15px, calc((100cqw - 32px) / 508));--C:calc(80px + 28 * var(--hu))}
  .v3-hero{--chip-u:calc(var(--hu) * .75)}   /* the tags at 75% on phones (Rox: "way too big"); the name keeps its size */
  .v3-head{height:56px}
  .v3-head-in{--uu:.6667px}
  .v3-nav{top:0;height:56px;align-items:center;gap:14px}
  .v3 .v3-nav .nav-link{--u:.6667px;font-size:12px}
  .v3-rail{display:none}
  .v3-hero{height:calc(var(--C) + 158 * var(--hu) + 28px)}
  .v3-label{font-size:13px;line-height:24px}
  #work,#about{scroll-margin-top:72px}
  .v3-grid{grid-template-columns:1fr;gap:20px;margin-top:12px}
  .v3-card{--tu:.6px}
  .v3-dots{--d:11px;--pitch:17px;margin-top:72px}
  .v3-foot{margin:0 16px;padding:14px 0 28px}
  .v3-foot p{font-size:13px;line-height:1.6}
}
@media (min-width:560px) and (max-width:767px){
  .v3-grid{grid-template-columns:1fr 1fr;gap:16px}
  .v3-card{--tu:.5px}
}

/* =====================================================================
   PAGE TRANSITION (ref: perhoj.no, measured frame by frame) — new-design pages
   A black curtain with a curved edge rises over the page, ROX SINSON slides up through a slot in the middle, the
   next page opens under it, the name slides out and the curtain lifts off the top. Also the loading screen.
   ===================================================================== */
.curtain{position:fixed;inset:0;z-index:200;pointer-events:none}
.curtain-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.curtain-svg path{fill:#000}
html.is-loading .curtain::before{content:"";position:absolute;inset:0;background:#000}   /* covered from the first paint */
html.is-loading .curtain.is-live::before{display:none}                                      /* ...until the curve takes over */
.curtain-logo{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.curtain-slot{display:block;overflow:hidden;padding:.2em .06em .24em}
.curtain-word{display:block;transform:translateY(110%);will-change:transform;
  font-family:'Strichpunkt',var(--se);font-size:clamp(26px, 2.6vw, 46px);font-weight:800;line-height:1;letter-spacing:-.01em;
  white-space:nowrap;color:#fffefb}
html.curtain-handoff .curtain-word{transform:none}   /* arriving mid-transition: the name is already up */

/* =====================================================================
   PROJECT PAGES, new design (Figma 110:2015 Bud Light — the template for every project)
   Left: name, tag and credits, right-aligned on x642 and pinned while the right side scrolls (they let go together
   at the end of the last section). Right: the film from x724 to the edge; the sections on the film's left edge
   (x724 → 1681), on one rhythm — 82 between sections, 74 from a heading to its text, 42 between the blocks inside.
   ===================================================================== */
.v3--case .v3-hero{height:calc(410 * var(--u))}
.cs{--cu:max(var(--u), .72px);display:grid;grid-template-columns:calc(724 * var(--u) + max(0px, (100cqw - 2400px) / 2)) minmax(0, 1fr);align-items:start}
.cs-info{align-self:stretch}
.cs-info-in{position:sticky;top:max(calc(150 * var(--u)), min(calc(568 * var(--u)), calc(100vh - 420 * var(--u))));
  margin-top:calc(158 * var(--u));padding-right:calc(82 * var(--u));text-align:right}
.cs-title{font-size:calc(57 * var(--cu));font-weight:900;line-height:calc(26.4 * var(--cu));letter-spacing:.03em;white-space:nowrap}
.cs-title--2{margin-top:calc(-12.8 * var(--cu));line-height:calc(52 * var(--cu))}   /* a name on two lines (SOUTHWEST / AIRLINES): first line where a one-line name sits */
.cs-title--2+.cs-tag{margin-top:calc(12.8 * var(--cu))}   /* ...and the tag the same distance below the letters */
.cs-tag{display:inline-block;margin-top:calc(25.6 * var(--cu));padding:0 calc(13 * var(--cu));background:#000;color:var(--cream);
  font-size:calc(15 * var(--cu));font-weight:400;line-height:calc(29 * var(--cu));letter-spacing:.03em;white-space:nowrap}
.cs-credits{max-width:calc(358 * var(--cu));margin:calc(85 * var(--cu)) 0 0 auto;font-size:calc(17 * var(--cu));font-weight:500;line-height:calc(28.38 * var(--cu));letter-spacing:.03em}
.cs-credits b,.cs-text b{font-weight:700}

.cs-film{position:relative;width:100%;aspect-ratio:1004.4 / 565;overflow:hidden;background:#000;cursor:pointer}
.cs-film video{display:block;width:100%;height:100%;object-fit:cover}
.cs-lead{width:100%;aspect-ratio:1004.4 / 565}   /* the lead picture, when a project has no film */
.cs-sec{margin:calc(82 * var(--u)) calc(47 * var(--u)) 0 0}
.cs-film+.cs-sec,.cs-lead+.cs-sec,.cs-lead-row+.cs-sec{margin-top:calc(84 * var(--u))}
.cs-sec>*+*{margin-top:calc(42 * var(--u))}
.cs-split{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(40 * var(--u))}
.cs-col{flex:0 1 calc(401 * var(--u))}
.cs-h{font-size:calc(17 * var(--cu));font-weight:700;line-height:calc(28.38 * var(--cu));letter-spacing:.03em}
.cs-sec>.cs-h+.cs-text,.cs-col>.cs-h+.cs-text{margin-top:calc(45.62 * var(--u))}   /* 74 from the heading's top */
.cs-text{font-size:calc(17 * var(--cu));font-weight:500;line-height:calc(28.38 * var(--cu));letter-spacing:.03em}
.cs-text p+p{margin-top:calc(28.38 * var(--cu))}
.cs-text--wide{max-width:calc(924 * var(--u))}
.cs-text--878{max-width:calc(878 * var(--u))}
.nw{white-space:nowrap}   /* words that wrap together ("and Bud Light.") */
.cs-media{position:relative;overflow:hidden;background:var(--ph)}
.cs-media>img,.cs-media>video{display:block;width:100%;height:100%;object-fit:cover}
.cs-trim>*{transform:scale(1.02)}   /* hides a thin black border baked into the source (Southwest results.mp4) */
.cs-sq{flex:none;width:calc(481 * var(--u));aspect-ratio:1}
.cs-wide{width:100%;aspect-ratio:957 / 511}
.cs-trio{display:grid;grid-template-columns:repeat(3, 1fr);gap:calc(27 * var(--u))}   /* a row of three squares */
.cs-trio>.cs-media{aspect-ratio:1}
/* pictures with their own transparency (the phone mock-ups) sit straight on the page, no placeholder grey */
.cs-media.cs-clear{background:transparent}
/* personas: one portrait frame for every photo (cropped to fill it, centred on the person), name and line beside it */
.cs-persona{display:grid;grid-template-columns:max(120px, calc(240 * var(--u))) minmax(0, 1fr);gap:max(16px, calc(42 * var(--u)));align-items:center}
.cs-persona-photo{aspect-ratio:4 / 5}
.cs-media.cs-blend{background:transparent}.cs-blend>img{mix-blend-mode:multiply}   /* pictures on white: the white takes on the page's cream */

/* gallery viewer (main.js): pictures in a [data-lightbox] set open large over a dimmed page; arrows / keys / swipe
   move through the set; × / Esc / a click on the dimmed area closes it. Tall ones (emails) scroll inside it. */
[data-lightbox] .cs-media{cursor:zoom-in}
.cs-media[data-sound]{cursor:pointer}
.cs-media[data-static]{cursor:default}
.cs-media[data-static]>img{transform:none!important}
.cs-media[data-sound] .cs-sound{position:absolute;right:max(10px, calc(18 * var(--u)));bottom:max(10px, calc(18 * var(--u)));z-index:2;font-size:max(12px, calc(14 * var(--u)))}
[data-lightbox] .cs-media>img,[data-lightbox] .cs-media>video{transition:transform .7s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){[data-lightbox] .cs-media:hover>img,[data-lightbox] .cs-media:hover>video{transform:scale(1.03)}}
html.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;z-index:150;background:rgba(8,8,8,.88);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.lb.is-open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.lb-stage{position:absolute;inset:0;display:flex;flex-direction:column;padding:72px 0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lb-img[hidden]{display:none}
.lb-img{display:block;flex:none;width:min(640px, 78vw);height:auto;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.45);
  transform:translateY(18px) scale(.97);opacity:0;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.lb.is-open .lb-img.is-in{transform:none;opacity:1}
.lb-btn{position:fixed;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:var(--cream);color:#000;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .2s ease}
.lb-btn svg{width:20px;height:20px}
.lb-btn:hover,.lb-btn:focus-visible{transform:scale(1.08);background:#fff;outline:none}
.lb-x{top:24px;right:24px}
.lb-prev{left:28px;top:50%;margin-top:-24px}
.lb-next{right:28px;top:50%;margin-top:-24px}
.lb-count{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:1;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--cream)}
@media (max-width:767px){
  .lb-stage{padding:64px 0 88px}
  .lb-img{width:calc(100vw - 32px)}
  .lb-btn{width:42px;height:42px}
  .lb-x{top:12px;right:12px}
  .lb-prev,.lb-next{top:auto;bottom:16px;margin-top:0}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-count{bottom:28px}
}

/* a row of pictures of any shapes, side by side at one shared height (each one's width follows its own proportions) */
.cs-row{display:flex;gap:calc(27 * var(--u))}
.cs-row>.cs-media{flex:var(--arn) 1 0;min-width:0;aspect-ratio:var(--ar)}
/* a grid of equal tiles (a carousel series): --n across */
.cs-grid{display:grid;grid-template-columns:repeat(var(--n, 4), 1fr);gap:calc(27 * var(--u))}
.cs-grid>.cs-media{aspect-ratio:var(--ar, 1)}

.cs-more{margin-top:calc(236 * var(--u));padding-bottom:calc(220 * var(--u))}
.v3-grid--3{grid-template-columns:repeat(3, 1fr);margin-top:calc(73.78 * var(--u))}
.v3-grid--3 .v3-card{--tu:max(calc(var(--u) * .641), .5px)}   /* same tags, at the smaller card's scale (Figma 13.67) */

/* About below 1100px: one column — label, photo, bio, details, tools, contact */
@media (max-width:1099px){
  .v3-about{height:auto;margin-top:56px;padding-bottom:88px}
  .v3-about>.v3-label{position:static}
  .v3 .v3-photo{--u:min(.85px, calc(var(--W) / 330));position:relative;inset:auto;width:calc(330 * var(--u));height:calc(355 * var(--u));margin:24px 0 8px;--ox:27;--oy:-49}
  .ab-bio,.ab-facts,.ab-tools,.ab-contact{position:static;width:auto}
  .ab-bio,.ab-facts,.ab-contact{font-size:15px;line-height:1.75;letter-spacing:.02em}
  .ab-bio{margin-top:20px}
  .ab-bio p+p{margin-top:1em}
  .ab-facts{margin-top:36px}
  .ab-tools{margin-top:10px;grid-template-columns:repeat(3, 60px);gap:9px}
  .ab-contact{margin-top:36px}
  .ab-contact .ab-gap{margin-top:1.75em}
  .ab-brush{left:-3px;top:calc(100% - 3px);width:calc(100% + 6px);height:5px}
  .ab-bio .br-d{display:none}
}

/* narrower screens: one column — name and credits first, then the film and sections, all on the work column */
@media (max-width:1099px){
  .cs{display:block;margin-left:var(--L);width:var(--W)}
  .cs-info-in{position:static;margin:0;padding:0;text-align:left}
  .cs-title{font-size:clamp(30px, 5vw, 44px);line-height:1.1;white-space:normal}
  .cs-title--2{margin-top:0}
  .cs-title--2+.cs-tag{margin-top:14px}
  .cs-tag{margin-top:14px;padding:3px 10px;font-size:13px;line-height:1.5}
  .cs-credits{max-width:none;margin:28px 0 0;font-size:15px;line-height:1.8}
  .cs-main{margin-top:40px}
  .cs-sec,.cs-film+.cs-sec{margin:64px 0 0}
  .cs-sec>*+*{margin-top:20px}
  .cs-split{flex-direction:column;gap:24px}
  .cs-col{flex:none;width:100%}
  .cs-sq{width:100%}
  .cs-trio,.cs-row,.cs-grid{gap:8px}
  .cs-row:has(>:nth-child(4)){flex-wrap:wrap;align-items:flex-start}                       /* four or more side by side: two per line on narrow screens */
  .cs-row:has(>:nth-child(4))>.cs-media{flex:0 0 calc(50% - 4px)}
  .cs-h{font-size:15px;line-height:1.6}
  .cs-sec>.cs-h+.cs-text,.cs-col>.cs-h+.cs-text{margin-top:14px}
  .cs-text{font-size:15px;line-height:1.75;letter-spacing:.02em}
  .cs-text p+p{margin-top:1em}
  .cs-text--wide{max-width:none}
  .cs-text .br-d{display:none}
  .cs-more{margin-top:96px;padding-bottom:96px}
}
@media (max-width:767px){
  .v3--case .v3-hero{height:calc(var(--C) + 158 * var(--hu) + 28px)}
  .v3-grid--3{grid-template-columns:1fr;margin-top:12px}
  .v3-grid--3 .v3-card{--tu:.6px}
}
@media (min-width:560px) and (max-width:767px){
  .v3-grid--3{grid-template-columns:1fr 1fr}
  .v3-grid--3 .v3-card{--tu:.5px}
}

/* =====================================================================
   PHONES — stacked layout; the hero keeps its composition, cropped to the middle of the frame
   ===================================================================== */
@media (max-width:760px){
  .hero{--u:calc((100cqw - 40px) / 800);height:max(560px, 100svh)}
  .hero-stage{left:calc(20px - 74 * var(--u));right:auto;top:calc(50% - 540 * var(--u));width:calc(1920 * var(--u));height:calc(1107 * var(--u))}
  .nav{--u:.62px;display:flex;justify-content:space-between;align-items:flex-start;height:auto;padding:22px 20px 0;gap:18px}
  .nav{justify-content:flex-end}
  .nav-link{position:relative;top:auto;left:auto;font-size:12px}
  .bar{--u:.5px;height:64px}
  .bar-logo{left:20px;top:13px}
  .bar .nav-link{top:auto}
  .bar-name{font-size:17px;line-height:13.7px}
  .bar-nav{position:absolute;right:20px;top:22px;display:flex;gap:18px}
  .bar .nav-link{position:relative;top:auto;left:auto}

  .sec{height:auto !important;padding:48px 20px 64px;--u:.62px}
  .sec .abs{position:relative;left:auto;top:auto}
  .sec .label{position:relative;left:auto;top:auto;display:inline-block;margin-bottom:28px;font-size:12px}   /* its stroke is placed from the word */
  .feature{display:flex;flex-direction:column;gap:14px}
  .ph{width:100%;height:auto;aspect-ratio:var(--w) / var(--h)}
  .feat-title{font-size:clamp(34px, 11vw, 52px);line-height:1.05;white-space:normal}
  .feat-sub{font-size:clamp(15px, 4.4vw, 20px);line-height:1.3;white-space:normal}
  .sec-bud .feat-title{margin-top:10px}
  .collage{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .collage .ph:first-child,.collage .ph-tall{grid-column:1 / -1}
  .collage .ph-tall{aspect-ratio:4 / 5}
  .grid{display:flex;flex-direction:column;gap:32px;margin-top:64px}
  .tile{width:100%}
  .tile .ph{height:auto;aspect-ratio:var(--w) / var(--h)}
  .tile-name{margin-top:8px;font-size:15px;line-height:1.4}

  .sec-about{padding-bottom:80px}
  .about-photo{--u:calc((100cqw - 40px) / 560);position:relative;inset:auto;width:calc(560 * var(--u));height:calc(580 * var(--u));margin:28px auto 32px;--ox:-170;--oy:-240}
  .about-photo .abs{position:absolute;left:calc((var(--x) + var(--ox, 0)) * var(--u));top:calc((var(--y) + var(--oy, 0)) * var(--u))}
  .about-text{font-size:16px;line-height:1.65;letter-spacing:.01em;white-space:normal}
  .about-text p+p{margin-top:1em}
  .br-d{display:none}

  /* project pages: one column — the details first, then the pictures and notes in order */
  .case-body,.case-end{--u:.62px}
  .case-body{height:auto;padding:110px 20px 64px}
  .case-aside{position:relative;top:auto;height:auto;width:auto}
  .case-main{position:relative;inset:auto;display:flex;flex-direction:column;gap:20px;margin-top:40px}
  .case .abs{position:relative;left:auto;top:auto}
  .case-title{font-size:40px;line-height:1.2}
  .case-sub,.case-kind{font-size:14px;line-height:1.8}
  .case-credits{margin-top:24px;font-size:13px;line-height:1.9;white-space:normal}
  .case-head{margin-top:28px;font-size:13px}
  .case-text,.case-text--tight{width:auto;font-size:14px;line-height:1.7}
  .case-text p+p,.case-text--tight p+p{margin-top:1em}
  .case-box,.case-box--sq{position:relative;left:auto;top:auto;right:auto;width:100%;height:auto;aspect-ratio:821 / 442}
  .case-box--sq{aspect-ratio:1}
  .case-end{height:40px}
  .mark{display:none}
}

/* ---------- Contact page (Figma 125:2273): the form on the work column, 783 wide; label 484 down like WORK ---------- */
.ct{--cu:max(var(--u), .8px);width:min(100%, calc(783 * var(--u)));min-width:min(100%, 520px);padding-bottom:calc(182 * var(--u))}
.ct-form{position:relative;margin-top:calc(51.8 * var(--u))}
.ct-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ct-field{position:relative}
.ct-field+.ct-field{margin-top:calc(51 * var(--u))}
.ct-field label{display:block;font-size:calc(17 * var(--cu));font-weight:900;line-height:calc(34.22 * var(--cu));letter-spacing:.03em}
.ct-star{color:#934bff}
.ct-field input,.ct-field textarea{display:block;width:100%;height:calc(44.8 * var(--cu));padding:0;border:0;border-bottom:1px solid #000;border-radius:0;
  background:transparent;color:#000;font:inherit;font-size:calc(17 * var(--cu));font-weight:500;letter-spacing:.03em;outline:none;
  transition:border-color .25s ease;-webkit-appearance:none;appearance:none}
.ct-field textarea{height:calc(225.8 * var(--cu));padding:calc(6 * var(--cu)) 0 calc(34 * var(--cu));line-height:calc(28.38 * var(--cu));resize:none}
.ct-field input:focus,.ct-field textarea:focus{border-bottom-color:#934bff;box-shadow:0 1px 0 #934bff}
.ct-field.is-invalid input,.ct-field.is-invalid textarea{border-bottom-color:#934bff;box-shadow:0 1px 0 #934bff}
.ct-count{position:absolute;right:0;bottom:calc(5 * var(--cu));font-size:calc(12.19 * var(--cu));font-weight:500;line-height:calc(24.54 * var(--cu));letter-spacing:.03em;color:#934bff}
/* black buttons; the box sits 12 left of the text so the words line up with the labels (as in Figma). Hover = the
   title-tab invert in reverse: a cream fill wipes up from the bottom and the words turn black */
.ct-btn{position:relative;display:block;width:max-content;margin-left:calc(-12 * var(--u));padding:calc(5.89 * var(--cu)) calc(16 * var(--cu)) calc(5.89 * var(--cu)) calc(12 * var(--cu));
  border:0;background:#000;color:#fffefb;font:inherit;font-size:calc(17 * var(--cu));font-weight:500;line-height:calc(34.22 * var(--cu));letter-spacing:.03em;
  cursor:pointer;box-shadow:inset 0 0 0 1.5px #000}
.ct-btn>span{position:relative;z-index:1;transition:color .1s}
.ct-btn::before{content:"";position:absolute;inset:1.5px;background:#fffefb;transform:scaleY(0);transform-origin:center bottom;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.ct-btn:hover::before{transform:scaleY(1)} .ct-btn:hover>span{color:#000}}
.ct-btn:focus-visible{outline:2px solid #934bff;outline-offset:3px}
.ct-btn:disabled{cursor:progress;opacity:.7}
.ct-send{margin-top:calc(82 * var(--u))}
.ct-status{position:absolute;left:0;margin-top:calc(14 * var(--cu));font-size:calc(15 * var(--cu));font-weight:500;line-height:1.4;letter-spacing:.03em}
.ct-status.is-error{color:#934bff}
.ct-back{margin-top:calc(82 * var(--u))}
@media (max-width:767px){
  .ct{width:100%;min-width:0;padding-bottom:96px}
  .ct-form{margin-top:28px}
  .ct-field+.ct-field{margin-top:32px}
  .ct-field label{font-size:14px;line-height:28px}
  .ct-field input{height:44px;font-size:16px}   /* 16px: phones don't zoom into the field */
  .ct-field textarea{height:180px;font-size:16px;line-height:24px;padding:8px 0 30px}
  .ct-count{font-size:12px;line-height:20px;bottom:6px}
  .ct-btn{margin-left:0;font-size:14px;line-height:28px;padding:7px 14px}
  .ct-send{margin-top:44px}
  .ct-status{position:static;margin-top:14px;font-size:14px}
  .ct-back{margin-top:44px}
}