/* ASIA — UGC DOSSIER */ :root{ /* palette: paper, ink, one cobalt */ --paper:#E9E5DB; --paper-2:#DFDACE; --card:#F7F5F0; --ink:#15140F; --ink-60:#5E594E; --ink-30:#A9A296; --rule:#C7C0B2; --cobalt:#001F93; --cobalt-ink:#001770; --cobalt-wash:#DDE1F7; --manila:#C6B593; --sans:"Inter Tight", system-ui, -apple-system, sans-serif; /* one pen for every drawn mark: the audience loops, the cobalt circles under the nav / portfolio tabs / media kit, their underlines and the ways dashes */ --pen:calc(3 * var(--pu)); --maxw:calc(1180 * var(--pu)); /* Keep component inset, page frame, and wide editorial inset distinct. The frame interpolates between the full-width tablet layout and the centred desktop composition instead of jumping when --pu starts scaling. */ --gutter:clamp(1.5rem, 4vw, 3rem); --page-frame:clamp(var(--gutter), calc(22.2vw - calc(139 * var(--pu))), 12.5vw); --wide-gutter:clamp(1.5rem, 5vw, 4.5rem); /* Above this width the mockup-scaled blocks (hero, portfolio) stop growing and centre, so 1440 is the widest rendering and 1920 repeats it. --capvw is the same ceiling for lengths that must stay in step with them but sit outside their containers (the drips, #proof's clearance). */ --cap:calc(1440 * var(--pu)); --capvw:min(100vw, var(--cap)); } /* PROPORTIONAL DESKTOP: from 1024 up every length is a share of the screen, so each desktop width is an exact scaled copy of the 1440 layout. Below 1024 --pu is 1px and nothing changes. */ :root{--pu:1px} @media(min-width:1024px){ :root{--pu:calc(100vw / 1440)} html{font-size:calc(16 * var(--pu))} } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.018) 0 1px, transparent 1px), radial-gradient(circle at 70% 65%, rgba(0,0,0,.015) 0 1px, transparent 1px);background-size:calc(7 * var(--pu)) calc(7 * var(--pu)), calc(11 * var(--pu)) calc(11 * var(--pu));} img,video{display:block;max-width:100%} a{color:inherit} :focus-visible{outline:calc(3 * var(--pu)) solid var(--cobalt);outline-offset:calc(3 * var(--pu));border-radius:2px} /* layout helpers */ .wrap{width:100%;max-width:none;margin-inline:auto;padding-inline:var(--page-frame)} .band{padding-block:clamp(3.5rem,8vw,6.5rem);position:relative} .band--alt{background:var(--paper-2)} .band--ink{background:var(--ink);color:var(--card)} /* type system */ .it{font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.005em} .blue{color:var(--cobalt)} .label{color:var(--ink-60);} .meta{color:var(--ink-60);} .lede{font-size:clamp(1.02rem,1.6vw,1.18rem);line-height:1.55;max-width:46ch} /* buttons */ .btn{display:inline-flex;align-items:center;gap:.55em;cursor:pointer;text-decoration:none;padding:.85em 1.4em;border:1.6px solid var(--ink);background:transparent;color:var(--ink);transition:background .18s ease,color .18s ease,transform .18s ease;} .btn:hover{background:var(--ink);color:var(--card);transform:translate(-2px,-2px)} .btn--blue{background:var(--cobalt);border-color:var(--cobalt);color:#fff} .btn--blue:hover{background:var(--cobalt-ink);border-color:var(--cobalt-ink);color:#fff} .btn--light{border-color:var(--card);color:var(--card)} .btn--light:hover{background:var(--card);color:var(--ink)} /* top bar — sits on the hero plaster */ .topbar{ position:absolute;top:0;left:0;right:0;z-index:60; display:flex;align-items:center; height:calc(88 * var(--px));padding-inline:calc(40 * var(--px)); } .navlinks{gap:calc(37 * var(--px))} .navlinks a{position:relative;isolation:isolate;display:inline-block;color:var(--ink);text-decoration:none;transition:color .18s ease,transform .18s ease,filter .18s ease} .navlinks a:is(:hover,:focus-visible){color:#001F93;transform:translateY(calc(-3 * var(--pu)));filter:drop-shadow(0 0 .45em rgba(0,31,147,.32))} .navlinks a:is(:hover,:focus-visible,[aria-current="location"])::before{ content:"";position:absolute;z-index:-1;inset:-.42em -.72em; border:var(--pen) solid #001F93; border-radius:51% 49% 53% 47% / 47% 55% 45% 53%; transform:rotate(-6deg); } .navlinks a:is(:hover,:focus-visible,[aria-current="location"])::after{ content:"";position:absolute;left:17%;right:18%;bottom:-.28em;height:var(--pen); background:#001F93;transform:rotate(-2deg); } /* HERO — plaster collage. From calc(768 * var(--pu)) up it is the calc(1831 * var(--pu)) desktop mockup scaled as one unit: every length is calc( * var(--px)). */ .hero{position:relative;overflow:hidden;padding:0;container-type:inline-size;width:min(100%, var(--cap));margin-inline:auto;--px:calc(100cqw / 1831);--hero-blue:#001F93} .hero__stage{position:relative;height:calc(959 * var(--px))} .hero__photo{display:contents} .hero__title{margin:0} .hero__person,.hero__asia,.hero__unfiltered{position:absolute;height:auto} .hero__person{left:calc(622 * var(--px));top:calc(9 * var(--px));width:calc(718 * var(--px))} .hero__asia{z-index:2;left:calc(-18 * var(--px));top:calc(355 * var(--px));width:calc(311 * var(--px))} .hero__unfiltered{z-index:2;left:calc(1221 * var(--px));top:calc(494 * var(--px));width:calc(589 * var(--px))} .bluecard{--u:var(--px);position:absolute;z-index:3;display:flex;flex-direction:column;width:calc(288 * var(--u));height:calc(455 * var(--u));background:var(--hero-blue);color:#fff;padding:0 calc(13 * var(--u)) calc(14 * var(--u))} .bluecard--ugc{left:calc(317.5 * var(--px));top:calc(242 * var(--px))} .bluecard--links{left:calc(1317.5 * var(--px));top:calc(90 * var(--px))} .bluecard svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .bluecard svg .dot{fill:currentColor;stroke:none} .bluecard__arrows{display:flex;flex:none;justify-content:space-between;align-items:center;height:calc(45 * var(--u))} .bluecard__arrows svg{width:calc(25 * var(--u));height:calc(14 * var(--u))} .bluecard__photo{flex:none;height:calc(224 * var(--u));width:100%;object-fit:cover} .bluecard__title{position:relative;margin-top:calc(6 * var(--u));padding:0 0 0 calc(3 * var(--u))} .bluecard--links .bluecard__title{margin-top:calc(8 * var(--u));padding-left:calc(1 * var(--u))} .bluecard__list{list-style:none;margin-top:auto;padding-left:calc(8 * var(--u))} .bluecard__list li{display:flex;align-items:center;gap:calc(12 * var(--u));height:calc(30.5 * var(--u))} .bluecard__list li::before{content:"";flex:none;width:calc(19 * var(--u));height:calc(10 * var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10'%3E%3Cpath d='M1 5.2 4.6 8.6 12 1.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} .bluecard__links{list-style:none;margin-top:calc(10 * var(--u))} .bluecard__links a{display:flex;align-items:center;white-space:nowrap;height:calc(30.5 * var(--u));padding-left:calc(8 * var(--u));color:#fff;text-decoration:none} .bluecard__links svg{width:calc(19 * var(--u));height:calc(19 * var(--u));margin-right:calc(12 * var(--u));stroke-width:1.5} .bluecard__links span{position:relative;isolation:isolate} .bluecard__links a:is(:hover,:focus-visible) span::before{ content:"";position:absolute;z-index:-1;inset:-.42em -.72em; border:var(--pen) solid #fff; border-radius:51% 49% 53% 47% / 47% 55% 45% 53%; transform:rotate(-6deg); } .bluecard__links a:is(:hover,:focus-visible) span::after{ content:"";position:absolute;left:17%;right:18%;bottom:-.28em;height:var(--pen); background:#fff;transform:rotate(-2deg); } /* phone: photo full width with the lettering over it, cards stacked below */ /* Keep the desktop collage intact through compact laptops. The small-screen composition starts only once the scaled cards can no longer carry their minimum type comfortably. */ @media (max-width:960px){ .hero{--px:1px} .topbar{position:relative;height:auto;padding:calc(14 * var(--pu)) var(--gutter)} /* bottom padding grows with width: the Portfolio tear rises ~9.4vw over the hero's foot and must stay clear of the cards */ .hero__stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:calc(22 * var(--pu));padding:0 var(--gutter) max(calc(56 * var(--pu)), calc(9.44vw + calc(17 * var(--pu))))} .hero__photo{display:block;position:relative;align-self:stretch;margin-inline:calc(-1 * var(--gutter));overflow:hidden} .hero__person{position:relative;left:-4%;top:0;width:122%;max-width:none} .hero__asia{left:1%;top:45%;width:36%} .hero__unfiltered{left:auto;right:1%;top:auto;bottom:12%;width:84%} .bluecard{position:relative;left:auto;top:auto;width:calc(242 * var(--u));--cw:min(100cqw - 2 * var(--gutter), calc(340 * var(--pu)));--u:calc(var(--cw) / 269)} .bluecard--ugc{margin-top:-18vw} } /* tablet: same stacked idea, but the two cards fit side by side */ @media (min-width:600px) and (max-width:960px){ .hero__stage{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start} .hero__photo{flex:0 0 100%} .bluecard{--cw:min(calc((100cqw - 2 * var(--gutter) - calc(22 * var(--pu))) / 2), calc(380 * var(--pu)));margin-top:-6vw} } .page-kicker{font-family:var(--sans);font-size:clamp(.43rem,.65vw,.63rem);font-weight:700;letter-spacing:.13em;text-transform:uppercase;display:flex;justify-content:space-between;gap:.8rem;align-items:baseline} .page-rule{height:2px;background:var(--ink);margin:.42rem 0 clamp(.75rem,1.7vw,1.2rem)} .editorial-photo{position:relative;width:100%;height:57%;background:#D9D5CB;border:1px solid rgba(21,20,15,.35);overflow:hidden} .editorial-photo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 28%,rgba(11,24,212,.26),transparent 24%),linear-gradient(145deg,#cec9be 0 38%,#efebe2 38% 58%,#bbb5aa 58% 100%)} .editorial-photo::after{content:"PORTRAIT";position:absolute;right:-.05em;bottom:-.16em;font-family:var(--sans);font-size:clamp(2.4rem,6vw,5.8rem);font-weight:700;line-height:.8;letter-spacing:-.08em;color:rgba(21,20,15,.12);transform-origin:bottom right} .editorial-photo .ph{position:absolute;z-index:2;left:.7rem;bottom:.65rem;font-family:var(--sans);font-size:clamp(.42rem,.65vw,.58rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:#F5F2EA;padding:.28em .5em;border:1px solid var(--ink)} .editorial-photo figcaption{position:absolute;z-index:2;right:.55rem;top:.5rem;font-family:var(--sans);font-size:clamp(.38rem,.6vw,.54rem);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#fff;background:var(--cobalt);padding:.25em .45em} .rightmeta{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:clamp(.55rem,1.4vw,1rem);align-items:end} .rightmeta__role em{font-family:var(--sans);font-weight:400;color:var(--cobalt);text-transform:none} .rightmeta__small{font-family:var(--sans);font-size:clamp(.38rem,.6vw,.55rem);line-height:1.55;letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--ink-60)} .binder-tab{position:absolute;z-index:4;background:var(--cobalt);color:#fff;font-family:var(--sans);font-size:clamp(.42rem,.7vw,.62rem);font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.5em .75em;} .binder-tab--top{top:7%;right:12%;} .binder-tab--side{left:4%;bottom:14%;transform-origin:left bottom;background:var(--ink)} .iconbtn{display:inline-grid;place-items:center;width:calc(42 * var(--pu));height:calc(42 * var(--pu));border:1.5px solid var(--ink);color:var(--ink);transition:background .18s ease,color .18s ease,transform .18s ease} .iconbtn:hover{background:var(--ink);color:var(--card);transform:translate(-2px,-2px)} .iconbtn svg{width:calc(18 * var(--pu));height:calc(18 * var(--pu));stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .iconbtn svg .dot{fill:currentColor;stroke:none} .socials{display:flex;gap:.5rem;margin-left:.3rem} @media(max-width:760px){ .editorial-photo{height:52%} .binder-tab--side{display:none} } @media(max-width:480px){ .page-kicker span:last-child{display:none} .rightmeta{grid-template-columns:1fr} .rightmeta__small{text-align:left} } /* SECTION HEADS */ .head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:1rem 1.4rem;margin-bottom:2.2rem} .head__l{max-width:none;min-width:0} .head .label{display:block;margin-bottom:.6rem;} /* WORK — looping decks, one row per category */ .sortswitch{display:inline-flex;align-items:baseline;gap:.55em;color:var(--ink-30);} .sortswitch__label{color:var(--ink-60)} .sortswitch button{ background:none;border:0;padding:0 0 calc(3 * var(--pu));cursor:pointer;font:inherit; color:var(--ink-30);border-bottom:2px solid transparent; transition:color .18s ease,border-color .18s ease; } .sortswitch button:hover{color:var(--ink)} .sortswitch button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--cobalt)} .sortswitch i{font-style:normal;color:var(--ink-30)} /* one row per category */ .cat{--fpad:var(--gutter);padding-block:clamp(.5rem,1.4vw,1rem);position:relative;scroll-margin-top:calc(88 * var(--pu))} .cat + .cat{border-top:1px solid var(--rule)} .cat__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap} .cat__title{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;} .cat__title .idx{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--cobalt)} .cat__note{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)} .cat__ctrls{display:flex;align-items:center;gap:.4rem} .draghint{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-30); transition:opacity .5s ease; } .draghint svg{width:calc(26 * var(--pu));height:calc(9 * var(--pu));stroke:currentColor;stroke-width:1.6;fill:none;overflow:visible} .draghint svg g{animation:nudge 2.6s ease-in-out infinite} @keyframes nudge{ 0%,100%{transform:translateX(-2px)} 50%{transform:translateX(calc(3 * var(--pu)))} } body.has-scrolled-deck .draghint{opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){.draghint svg g{animation:none}} /* the deck */ .deckwrap{position:relative} .deckwrap::before,.deckwrap::after{ content:"";position:absolute;top:0;bottom:0;width:clamp(1.5rem,5vw,4rem);z-index:6;pointer-events:none; } .deckwrap::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .deckwrap::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)} .deck{ display:flex;align-items:flex-start;gap:clamp(.85rem,1.7vw,1.5rem); overflow-x:auto;overflow-y:hidden; padding:calc(48 * var(--pu)) var(--fpad); margin-inline:calc(var(--fpad) * -1); scrollbar-width:none;-ms-overflow-style:none;cursor:grab; } .deck::-webkit-scrollbar{display:none} .deck.is-dragging{cursor:grabbing} .deckcard{ flex:0 0 auto;width:clamp(calc(168 * var(--pu)),18.5vw,calc(242 * var(--pu))); border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer; position:relative;transform-origin:center center; transition:transform .38s cubic-bezier(.2,.8,.25,1),filter .38s ease,opacity .38s ease; }.deckcard__frame{ position:relative;aspect-ratio:9/16;overflow:hidden; background:var(--paper-2);border:1.5px solid var(--ink); transition:box-shadow .3s ease; } .deckcard__frame video,.deckcard__frame img{width:100%;height:100%;object-fit:cover} .deckcard__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:.7rem;color:var(--ink-30);} .deckcard__cap{padding-top:.5rem;opacity:.72;transition:opacity .3s ease} .deckcard__fmt{color:var(--cobalt);} .deck:not(.is-focused) .deckcard:hover, .deck:not(.is-focused) .deckcard:focus-visible{transform:translateY(calc(-12 * var(--pu))) scale(1.05);z-index:5} .deck:not(.is-focused) .deckcard:hover .deckcard__cap, .deck:not(.is-focused) .deckcard:focus-visible .deckcard__cap{opacity:1} .deck.is-focused .deckcard{filter:brightness(.46) saturate(.4);opacity:.9} .deck.is-focused .deckcard.is-open{ filter:none;opacity:1;z-index:20;transform:scale(1.34); }.deck.is-focused .deckcard.is-open .deckcard__cap{opacity:1} .deckcard__badge{ position:absolute;left:.45rem;bottom:.45rem;width:calc(25 * var(--pu));height:calc(25 * var(--pu)); background:var(--card);border:1.5px solid var(--ink);display:grid;place-items:center; } .deckcard__badge::after{content:"";border-left:calc(8 * var(--pu)) solid var(--ink);border-top:calc(5 * var(--pu)) solid transparent;border-bottom:calc(5 * var(--pu)) solid transparent;margin-left:2px} .deckcard.is-playing .deckcard__badge::after{border:0;width:calc(8 * var(--pu));height:calc(9 * var(--pu));border-left:calc(3 * var(--pu)) solid var(--ink);border-right:calc(3 * var(--pu)) solid var(--ink);margin:0} .cat__close{position:absolute;right:0;top:1.6rem;z-index:30;background:var(--cobalt);color:#fff;border:0;padding:.45em .8em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,background .18s ease,transform .18s ease,filter .18s ease;} .cat.is-open .cat__close{opacity:1;pointer-events:auto} .workfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;align-items:center;margin-top:2rem;border-top:1.5px solid var(--ink);padding-top:1.2rem} /* SERVICES — numbered file rows */ .svc{border-top:1.5px solid var(--ink)} .svc__row{ display:grid;gap:.4rem 1.4rem;padding-block:1.5rem;border-bottom:1px solid var(--rule); transition:background .18s; } @media(min-width:820px){.svc__row{grid-template-columns:3.2rem 17.5rem 1fr;align-items:baseline}} .svc__row:hover{background:var(--cobalt-wash)} .svc__n{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--cobalt);letter-spacing:.08em} .svc__name{font-family:var(--sans);font-weight:700;font-size:1.28rem;text-transform:uppercase;line-height:1.05;text-wrap:balance} .svc__desc{color:var(--ink-60);max-width:44ch} .navtoggle{display:inline-flex;align-items:center;gap:.5em;background:transparent;border:1.5px solid var(--ink);padding:.55em .8em;cursor:pointer;color:var(--ink);transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,filter .18s ease} .navtoggle:is(:hover,:focus-visible){color:#001F93;border-color:#001F93;transform:translateY(calc(-3 * var(--pu)));filter:drop-shadow(0 0 .45em rgba(0,31,147,.32))} @media(min-width:1024px){.navtoggle{display:none;}} .navpanel{ display:none;position:absolute;left:0;right:0;top:100%; background:var(--paper);border-bottom:1.5px solid var(--ink);border-top:1px solid var(--rule); padding:.6rem var(--gutter) 1rem; } .navpanel.is-open{display:block} @media(min-width:1024px){.navpanel{display:none !important}} .navpanel a{display:block;text-decoration:none;padding:.7rem 0;border-bottom:1px dashed var(--ink-30);transition:color .18s ease,transform .18s ease,filter .18s ease} .navpanel a:is(:hover,:focus-visible){color:#001F93;transform:translateX(calc(4 * var(--pu)));filter:drop-shadow(0 0 .35em rgba(0,31,147,.3))} .navpanel a:last-child{border-bottom:0} .case{ background:var(--card);border:1.5px solid var(--ink);padding:1.4rem; } .case__tag{color:var(--cobalt);} .case h3{margin:.45rem 0 .6rem;} .case p{color:var(--ink-60);font-size:.92rem;max-width:52ch} .case__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.1rem} .case__nums div{background:var(--card);padding:.8rem .7rem} .case__nums b{display:block;} .case__nums span{color:var(--ink-60);} .proofgrid{display:grid;gap:1.3rem;margin-top:1.6rem} @media(min-width:900px){.proofgrid{grid-template-columns:1.15fr .85fr;align-items:start}} .aud{display:grid;gap:1px;background:var(--rule);border:1.5px solid var(--ink)} @media(min-width:640px){.aud{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.aud{grid-template-columns:repeat(4,1fr)}} .aud__cell{background:var(--paper);padding:1.15rem 1.1rem} .aud__k{color:var(--ink-60);} .aud__v{margin-top:.4rem;} .aud__n{color:var(--ink-60);margin-top:.35rem;} .aud__cell--blue{background:var(--cobalt);color:#fff} .aud__cell--blue .aud__k,.aud__cell--blue .aud__n{color:rgba(255,255,255,.78)} .audsplit{display:grid;gap:1.4rem;margin-top:1.4rem} @media(min-width:820px){.audsplit{grid-template-columns:1fr 1fr}} .audlist{background:var(--card);border:1.5px solid var(--ink);padding:1.2rem 1.3rem} .audlist h3{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60);margin-bottom:.8rem} .audrow{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;padding-block:.42rem} .audrow + .audrow{border-top:1px dashed var(--ink-30)} .audrow span:first-child{font-size:.9rem} .audrow span:last-child{font-family:var(--sans);font-size:.78rem;font-weight:700} .audbar{grid-column:1/-1;height:calc(3 * var(--pu));background:var(--rule);margin-top:.3rem} .audbar i{display:block;height:100%;background:var(--cobalt)} .tracks{display:grid;gap:1.2rem;margin-bottom:2.8rem;align-items:stretch} @media(min-width:820px){.tracks{grid-template-columns:1fr 1fr}} .track{ background:var(--card);border:1.5px solid var(--ink);padding:1.4rem; position:relative; }.track__tag{display:inline-block;color:#fff;background:var(--ink);padding:.35em .7em;margin-bottom:.9rem;} .track--b .track__tag{background:var(--cobalt)} .track h3{margin-bottom:.4rem;} .track > p{color:var(--ink-60);font-size:.92rem;max-width:42ch} .track ul{list-style:none;margin-top:1rem;border-top:1px dashed var(--ink-30);padding-top:.85rem;display:grid;gap:.4rem} .track ul li{font-size:.9rem;display:flex;gap:.6rem;align-items:baseline} .track ul li::before{content:"";flex:0 0 auto;width:calc(5 * var(--pu));height:calc(5 * var(--pu));background:var(--cobalt);transform:translateY(-2px)} .why{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)} .whyrow{ display:grid;gap:.4rem 2rem;padding-block:clamp(1.5rem,3vw,2.2rem); border-bottom:1px solid var(--rule); } .whyrow:last-child{border-bottom:0} @media(min-width:820px){.whyrow{grid-template-columns:3.5rem 1fr auto;align-items:baseline}} .whyrow__n{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--cobalt)} .whyrow__claim{ font-family:var(--sans);font-weight:700;line-height:1;letter-spacing:-.02em; font-size:clamp(1.5rem,3.6vw,2.5rem);text-transform:uppercase;text-wrap:balance; } .whyrow__claim em{font-style:italic;font-weight:400;text-transform:none;color:var(--cobalt)} .whyrow__sub{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)} .track ol{list-style:none;margin-top:1rem;border-top:1px dashed var(--ink-30);padding-top:.2rem} .track ol li{padding:.75rem 0;border-bottom:1px solid var(--rule)} .track ol li:last-child{border-bottom:0} .track ol b{display:block;} .track ol span{display:block;font-size:.85rem;color:var(--ink-60);margin-top:.2rem} .typeindex{margin-top:2.8rem} .typeindex__head{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-bottom:1.5px solid var(--ink);padding-bottom:.6rem;margin-bottom:0; } .typeindex__grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem} @media(min-width:700px){.typeindex__grid{grid-template-columns:repeat(4,1fr)}} .typeitem{ display:flex;align-items:baseline;gap:.7rem; padding:.75rem 0;border-bottom:1px solid var(--rule); font-family:var(--sans);font-weight:600;font-size:.98rem; text-transform:uppercase;letter-spacing:.005em;line-height:1.1; } .typeitem i{ flex:0 0 auto;width:calc(5 * var(--pu));height:calc(5 * var(--pu));background:var(--cobalt); transform:translateY(calc(-3 * var(--pu))); } .svcmore{ margin-top:2.6rem;border:1.5px solid var(--ink);background:var(--card); padding:1.3rem 1.4rem;display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:1rem; } .svcmore p{max-width:48ch} .svcmore strong{display:block;margin-bottom:.2rem;} /* PROCESS — 4 steps */ .steps{display:grid;gap:1px;background:var(--rule);border:1.5px solid var(--ink)} @media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}} .step{background:var(--paper);padding:1.4rem 1.15rem} .step__n{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--cobalt)} .step h3{font-family:var(--sans);font-weight:700;font-size:1.2rem;text-transform:uppercase;margin:.5rem 0 .45rem;line-height:1.05} .step p{font-size:.88rem;color:var(--ink-60)} /* BRANDS + WORDS */ .brands{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} @media(min-width:640px){.brands{grid-template-columns:repeat(3,1fr)}} @media(min-width:960px){.brands{grid-template-columns:repeat(5,1fr)}} .brands div{ background:var(--paper);display:grid;place-items:center;padding:1.15rem .6rem; font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.02em;text-transform:uppercase; } .quotes{display:grid;gap:1.2rem} @media(min-width:780px){.quotes{grid-template-columns:1fr 1fr}} .quote{background:var(--card);border:1.5px solid var(--ink);padding:1.5rem;position:relative;} .quote footer{margin-top:1rem;border-top:1px dashed var(--ink-30);padding-top:.7rem;display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap} .quote cite{font-style:normal;font-weight:700;font-size:.85rem} /* CONTACT */ .contact__grid{display:grid;gap:2.4rem;margin-bottom:clamp(2.2rem,5vw,3.6rem)} @media(min-width:700px){.contact__grid{grid-template-columns:1.1fr .9fr;align-items:start} .contact__grid > div{padding-top:1.4rem}} .contact a.big{text-decoration:none;border-bottom:2px solid var(--cobalt);display:inline-block;word-break:break-word;} .contact a.big:hover{color:var(--cobalt)} .form{background:var(--card);border:1.5px solid var(--card);padding:1.4rem;color:var(--ink);} .form label{display:block;margin-bottom:.9rem} .form .label{display:block;margin-bottom:.3rem;color:var(--ink);} .form input,.form select,.form textarea{width:100%;padding:.6rem .7rem;border:0;background:var(--paper-2);color:var(--ink);border-radius:0;} .form textarea{min-height:calc(96 * var(--pu));resize:vertical;} .form .btn{width:100%;justify-content:center;} .sociallinks{display:flex;gap:1.2rem} .sociallinks a{text-decoration:none;border-bottom:1.5px solid transparent;} .sociallinks a:hover{border-color:var(--cobalt);color:var(--cobalt)} #contact .sociallinks{margin-top:clamp(.9rem,1.8vw,1.4rem);gap:clamp(1rem,2.4vw,1.8rem);align-items:center} #contact .sociallinks a{display:inline-flex;border-bottom:0;color:var(--card);transition:color .18s ease,transform .18s ease} #contact .sociallinks svg{width:clamp(calc(51 * var(--pu)),7.5vw,calc(69 * var(--pu)));height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} #contact .sociallinks svg .dot{fill:currentColor;stroke:none} #contact .sociallinks a:hover{color:var(--pink);transform:translate(-2px,-2px)} .footer{border-top:1px solid var(--rule);padding-block:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end;align-items:center} #contact .footer .meta{ position:relative; z-index:4; /* steps down to calc(11 * var(--pu)) on narrow phones so both phrases fit beside the cutout */ font-size:min(clamp(calc(12 * var(--pu)),1.1vw,calc(16 * var(--pu))), max(calc(11 * var(--pu)), (100vw - var(--fig-w) - 2rem) / 10.3)); text-align:right; /* the text hangs just under the rule: from the flex-end spot, drop by its own height plus the section's bottom padding, then back up to the rule's height */ transform:translateY(calc(100% + var(--pad-b) - var(--rule-b) + .35rem)); /* keeps the text clear of the cutout (--fig-w wide, flush to the viewport's left) */ max-width:calc(100% - max(0px, var(--fig-w) + .75rem - (100vw - 100%) / 2)); } /* two phrases: breaks only between them when the space beside the cutout runs out */ #contact .footer .meta span{white-space:nowrap} #contact .footer{ position:relative; border-top:0; border-image:none; /* same total height as before, all of it above the text */ align-items:flex-end; padding-top:3.2rem; padding-bottom:0; } /* The rule starts inside the figure, runs behind it and only shows where it comes out on the right. */ #contact .footer::after{ content:""; position:absolute; z-index:-1; /* locked to the figure: level with her shoulder on the right of the picture, 23.5% of the cutout's height up from the section's bottom */ bottom:calc(var(--rule-b) - var(--pad-b)); left:calc(50% - 50vw + var(--fig-w) * .5); right:calc(50% - 50vw); height:2px; background:#fff; pointer-events:none; } /* scroll reveal */ .rv{opacity:0;transform:translateY(calc(14 * var(--pu)));transition:opacity .5s ease,transform .5s ease} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}} /* CREATIVE PASS 02 — OUTSIDE HERO */ #proof,#audience,#ways{overflow:hidden;isolation:isolate} #work::before,#proof::before,#audience::before,#ways::before{ position:absolute;z-index:-1;pointer-events:none;font-family:var(--sans);font-weight:800; font-size:clamp(8rem,25vw,24rem);line-height:.7;letter-spacing:-.07em;text-transform:uppercase; opacity:.035;white-space:nowrap; } #work::before{content:"WORK";right:-.04em;top:.18em} #proof::before{content:"PROOF";left:-.08em;top:.18em} #audience::before{content:"PEOPLE";right:-.08em;bottom:.18em} #ways::before{content:"BOOK ME";left:-.03em;bottom:.12em} #work .head,#proof .head,#audience .head,#ways .head{position:relative;margin-bottom:clamp(2.8rem,6vw,5rem)} #work .head::after,#proof .head::after,#audience .head::after,#ways .head::after{ content:"";position:absolute;left:0;right:0;bottom:-1.15rem;height:1.5px;background:var(--ink); } /* PORTFOLIO — pink torn paper. From calc(768 * var(--pu)) up it is the calc(1024 * var(--pu)) mockup scaled as one unit (every length is calc( * var(--px))); the torn edge reaches up over the hero. */ #work{padding:0} .work__top{position:relative;z-index:5;container-type:inline-size;width:min(100%, var(--cap));margin-inline:auto;--px:calc(100cqw / 1024)} /* the tear's own flat pink is cut out (work-tear-cut.webp); .work__stage::before runs the paper up behind it */ .work__tear{position:relative;z-index:1;margin-top:calc(-92 * var(--px))} .work__tearimg{width:100%;height:auto} .work__stage{position:relative;padding:calc(124 * var(--px)) 0 calc(18 * var(--px));margin-top:calc(-120 * var(--px))} .work__title{position:absolute;left:var(--wide-gutter);right:auto;top:calc(14 * var(--px));text-align:left;white-space:nowrap;margin:0} .work__title .it{padding-left:.14em} .work__tabs{position:absolute;left:calc(12 * var(--px));top:calc(132 * var(--px));display:flex;flex-direction:column;align-items:flex-start;gap:calc(2 * var(--px))} .work__tab{position:relative;isolation:isolate;background:none;border:0;cursor:pointer;color:var(--ink);--tab-py:calc(14 * var(--px));--tab-px:calc(28 * var(--px));padding:var(--tab-py) var(--tab-px);white-space:nowrap;transition:color .18s ease,transform .18s ease,filter .18s ease} .work__tab[aria-current="true"]:is(:hover,:focus-visible){color:var(--ink);transform:none;filter:none} .work__tab:is(:hover,:focus-visible){color:#001F93;transform:translateY(calc(-3 * var(--pu)));filter:drop-shadow(0 0 .45em rgba(0,31,147,.32))} .work__tab{text-decoration:none} .work__tab[aria-current="true"]{cursor:default} /* the same pen mark as the nav and media kit: loose oval + trailing underline, drawn around the text (not the tab's padding), so --tab-py/--tab-px are subtracted back out */ .work__tab[aria-current="true"]::before, .work__tab:is(:hover,:focus-visible)::before{ content:"";position:absolute;z-index:-1;inset:calc(var(--tab-py) - .8em) calc(var(--tab-px) - .95em); border:var(--pen) solid #001F93; border-radius:51% 49% 53% 47% / 47% 55% 45% 53%; transform:rotate(-3deg); /* a long label needs a gentler tilt than the nav's -6deg to stay clear of the letters */ } .work__tab[aria-current="true"]::after, .work__tab:is(:hover,:focus-visible)::after{ content:"";position:absolute;z-index:-1; left:calc(var(--tab-px) + (100% - 2 * var(--tab-px)) * .17); right:calc(var(--tab-px) + (100% - 2 * var(--tab-px)) * .18); bottom:calc(var(--tab-py) - .62em);height:var(--pen); background:#001F93;transform:rotate(-2deg); } .sortbtn{ border:0;background:none;cursor:pointer;color:var(--ink); transition:color .18s ease,transform .18s ease,filter .18s ease; } .sortbtn:is(:hover,:focus-visible), #work .cat__close:is(:hover,:focus-visible){ color:#001F93; transform:translateY(calc(-3 * var(--pu))); filter:drop-shadow(0 0 .45em rgba(0,31,147,.32)); } #work .cat__close:is(:hover,:focus-visible){color:#fff;background:#001770} .work__cards{list-style:none;display:grid;grid-template-columns:1.4fr 1fr 1.4fr 1fr;grid-template-rows:1fr 1fr;height:calc(50 * var(--px) + max(calc(260 * var(--px) + 9.1 * min(calc(18 * var(--pu)), max(calc(12.5 * var(--pu)), 12 * var(--px)))), calc(.5185 * (100cqw - 50 * var(--px) - max(170 * var(--px), calc(165 * var(--pu)))))));gap:calc(10 * var(--px));margin:0 calc(20 * var(--px)) 0 max(calc(170 * var(--px)), calc(165 * var(--pu)))} .pcard{position:relative;min-height:0;transform:none;transition:filter .3s ease,transform .3s ease} .pcard a{display:grid;grid-template-rows:1fr auto;position:relative;height:100%;padding:0;background:#001F93;overflow:hidden;color:#fff;text-decoration:none} /* --zoom crops each photo above the category tape printed into the mockup JPEG; drop it back to 118% once the real video posters land. */ .pcard a::before{content:"";grid-column:1;grid-row:1;background:var(--pcard-photo) center top/var(--zoom,146%) auto no-repeat} .pcard__photo{display:none} /* category tab picked: the card shows that category's clip instead of the featured photo */ .pcard.is-clip a::before{display:none} .pcard .deckcard__ph{position:relative;grid-column:1;grid-row:1;min-height:0} .pcard.is-clip .pcard__ph{display:none} .pcard .deckcard__ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pcard__copy{grid-column:1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:clamp(calc(5 * var(--pu)),.62vw,calc(9 * var(--pu))) clamp(calc(6 * var(--pu)),.72vw,calc(11 * var(--pu)));color:#fff} .pcard__copy strong{font-family:var(--druk);font-weight:400;font-size:clamp(calc(12 * var(--pu)),calc(17 * var(--px)),calc(20 * var(--pu)));line-height:.9;letter-spacing:var(--ls-druk);text-transform:uppercase} .pcard__play{position:absolute;left:50%;top:calc(50% - .8rem);display:grid;width:clamp(calc(30 * var(--pu)),calc(40 * var(--px)),calc(42 * var(--pu)));height:clamp(calc(30 * var(--pu)),calc(40 * var(--px)),calc(42 * var(--pu)));place-items:center;border:1.5px solid rgba(255,255,255,.88);border-radius:50%;background:var(--cobalt);box-shadow:0 calc(3 * var(--pu)) calc(10 * var(--pu)) rgba(21,20,15,.28);transform:translate(-50%,-50%);transition:background .18s ease,color .18s ease,transform .18s ease} .pcard__play span{width:0;height:0;margin-left:10%;border-top:clamp(calc(4 * var(--pu)),calc(5 * var(--px)),calc(6 * var(--pu))) solid transparent;border-bottom:clamp(calc(4 * var(--pu)),calc(5 * var(--px)),calc(6 * var(--pu))) solid transparent;border-left:clamp(calc(7 * var(--pu)),calc(9 * var(--px)),calc(10 * var(--pu))) solid currentColor} .pcard:is(:hover,:focus-within){transform:translateY(calc(-6 * var(--px)));z-index:2} .pcard a:is(:hover,:focus-visible) .pcard__play{background:#fff;color:var(--cobalt);transform:translate(-50%,-50%) scale(1.08)} .pcard a:focus-visible{outline:calc(3 * var(--pu)) solid var(--ink);outline-offset:calc(3 * var(--pu))} /* Six across the same 40→992 span of the 1024 mockup: 6 * 152 + 5 * 8 = 952. */ .pcard--1{--pcard-photo:url("../assets/work-photo-1.jpg");--tl:11%;--tb:8%;--tw:72%;--cap:15;--zoom:168%} .pcard--2{--pcard-photo:url("../assets/work-photo-2.jpg");--tl:11%;--tb:8%;--tw:72%;--cap:21;--zoom:166%} .pcard--3{--pcard-photo:url("../assets/work-photo-4.jpg");--tl:11%;--tb:8%;--tw:72%;--cap:7;--zoom:145%} .pcard--4{--pcard-photo:url("../assets/work-photo-3.jpg");--tl:11%;--tb:8%;--tw:72%;--cap:4;--zoom:187%} .pcard--5{--pcard-photo:url("../assets/work-photo-5.jpg");--tl:11%;--tb:8%;--tw:72%;--cap:10;--zoom:153%} /* reference mosaic: tall | two stacked (split low) | tall | two stacked (split high) */ .pcard--1{grid-area:1/1/3/2}.pcard--2{grid-area:1/2/2/3}.pcard--4{grid-area:2/2/3/3} .pcard--3{grid-area:1/3/3/4}.pcard--5{grid-area:1/4/2/5}.pcard--6{grid-area:2/4/3/5} .work__more{position:absolute;z-index:0;isolation:isolate;left:calc(12 * var(--px));top:calc(132 * var(--px) + 7 * (30 * var(--px) + 1.3em) + 14 * var(--px));min-height:calc(44 * var(--pu));padding:calc(12 * var(--px)) calc(18 * var(--px));text-align:left;display:flex;align-items:center;justify-content:space-between;gap:calc(18 * var(--px));white-space:nowrap;border:1.5px solid var(--ink);background:var(--cobalt);color:#fff;cursor:pointer;text-decoration:none;box-shadow:calc(4 * var(--px)) calc(4 * var(--px)) 0 var(--ink);transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease} .work__more:is(:hover,:focus-visible){ background:#001770; color:#fff; transform:translate(calc(-2 * var(--pu)),calc(-2 * var(--pu))); box-shadow:calc(6 * var(--px)) calc(6 * var(--px)) 0 var(--ink); } .work__more:focus-visible{outline:calc(3 * var(--pu)) solid #fff;outline-offset:calc(-6 * var(--pu))} .work__more [data-state="open"]{display:none} .work__more[aria-expanded="true"]{background:var(--ink)} .work__more[aria-expanded="true"] [data-state="closed"]{display:none} .work__more[aria-expanded="true"] [data-state="open"]{display:inline} .work__more svg{width:clamp(calc(14 * var(--pu)),calc(18 * var(--px)),calc(18 * var(--pu)));height:clamp(calc(14 * var(--pu)),calc(18 * var(--px)),calc(18 * var(--pu)));fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s ease} .work__more:is(:hover,:focus-visible) svg{transform:translateY(calc(3 * var(--pu)))} .work__more[aria-expanded="true"] svg{transform:rotate(180deg)} .work__more[aria-expanded="true"]:is(:hover,:focus-visible) svg{transform:rotate(180deg) translateY(calc(3 * var(--pu)))} .work__swipe,.work__deckhint{display:none} /* video card → pop-up viewer */ .viewer{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;padding:0;border:0;background:none;overflow:visible;max-width:none;max-height:none} .viewer::backdrop{background:rgba(21,20,15,.72);backdrop-filter:blur(calc(4 * var(--pu)))} .viewer__media{position:relative;height:min(82vh, 150vw);aspect-ratio:9/16;background:#15140f;overflow:hidden} .viewer__media > video{display:block;width:100%;height:100%;object-fit:cover} /* same crop as the grid card (center top / --zoom wide) */ .viewer__media > img{display:block;width:var(--zoom,100%);max-width:none;height:auto;margin-left:calc((100% - var(--zoom,100%)) / 2)} .viewer__media > .deckcard__ph{position:absolute;inset:0} .viewer__cap{margin:.6rem 0 0;color:#fff;font-family:var(--druk);font-size:1.6rem;line-height:1;letter-spacing:var(--ls-druk);text-transform:uppercase} .viewer__close{position:absolute;right:0;bottom:calc(100% + .6rem);border:0;background:none;color:#fff;cursor:pointer;font-family:var(--sans);font-weight:500;font-size:calc(14 * var(--pu));letter-spacing:.04em;text-transform:uppercase} .work__decks{padding-block:clamp(2rem,4vw,3.5rem)} /* phone: stacked, tabs and cards as swipe rows */ @media (max-width:640px){ .work__stage{height:auto;margin-top:-1px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;padding:calc(18 * var(--pu)) 0 calc(34 * var(--pu))} .work__stage > *{position:relative;left:auto;top:auto;right:auto} .work__title{order:2;width:100%;margin-top:2px;padding-inline:var(--wide-gutter);text-align:left} .work__tabs{order:5;width:100%;margin-top:calc(10 * var(--pu));padding:calc(6 * var(--pu)) var(--gutter);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);flex-direction:row;justify-content:flex-start;gap:2px} .work__tab{flex:0 0 auto;--tab-py:calc(10 * var(--pu));--tab-px:calc(16 * var(--pu));scroll-snap-align:start} .work__cards{order:7;width:100%;margin:0;height:auto;display:flex;align-items:flex-start;gap:calc(14 * var(--pu));overflow-x:auto;scroll-snap-type:x mandatory;padding:calc(16 * var(--pu)) var(--gutter) calc(30 * var(--pu));scrollbar-width:none} .pcard{position:relative;left:auto;top:auto;aspect-ratio:auto;flex:0 0 60%;width:auto;height:auto;scroll-snap-align:center} .pcard a{height:auto;aspect-ratio:.62} .pcard__photo{height:100%} .pcard:is(:hover,:focus-within){transform:translateY(calc(-4 * var(--pu)))} .work__swipe{order:6;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:.55rem;margin:calc(8 * var(--pu)) 0 calc(-4 * var(--pu));padding-inline:var(--gutter);color:var(--cobalt);font-family:var(--sans);font-size:max(calc(12 * var(--pu)),var(--fs-label));font-weight:700;letter-spacing:.09em;text-transform:uppercase;transition:opacity .25s ease,transform .25s ease} .work__swipe svg{width:calc(34 * var(--pu));height:calc(12 * var(--pu));fill:none;stroke:currentColor;stroke-width:1.5} .work__swipe.is-hidden{opacity:0;transform:translateX(calc(8 * var(--pu)));pointer-events:none} .work__more{order:8;width:calc(272 * var(--pu));height:calc(78 * var(--pu))} } /* PORTFOLIO: creative-director contact sheet */ #work{background:#e8e3d8;} #work .wrap{max-width:calc(1320 * var(--pu))} #work .cat{padding-block:clamp(1.2rem,2.8vw,2.2rem)} #work .cat + .cat{border-top:0} #work .cat__head{position:relative;z-index:3;border-top:1.5px solid var(--ink);padding-top:.65rem} #work .cat__note{background:var(--card);border:1px solid var(--ink);padding:.28em .55em;} #work .deckwrap{margin-top:-.2rem} #work .deck{gap:clamp(.6rem,1.3vw,1.1rem);padding:calc(132 * var(--pu)) var(--fpad) calc(140 * var(--pu));align-items:flex-start} #work .deckwrap::before,#work .deckwrap::after{width:2rem;background:none} #work .deckcard{width:clamp(calc(210 * var(--pu)),23vw,calc(310 * var(--pu)));transition:transform .38s cubic-bezier(.18,.9,.22,1),filter .3s,opacity .3s} #work .deckcard:nth-child(4n+1){width:clamp(calc(210 * var(--pu)),23vw,calc(310 * var(--pu)))} #work .deckcard:nth-child(4n+2){width:clamp(calc(210 * var(--pu)),23vw,calc(310 * var(--pu)))} #work .deckcard:nth-child(4n+3){width:clamp(calc(210 * var(--pu)),23vw,calc(310 * var(--pu)))} #work .deckcard:nth-child(4n){width:clamp(calc(210 * var(--pu)),23vw,calc(310 * var(--pu)))} #work .deckcard__frame{border:calc(7 * var(--pu)) solid #f9f7f1;outline:1.5px solid var(--ink);background:#d6d0c4} #work .deckcard__frame::before{content:"";position:absolute;z-index:4;width:44%;height:calc(13 * var(--pu));left:28%;top:calc(-8 * var(--pu));background:rgba(235,223,180,.78);} #work .deckcard:nth-child(3n) .deckcard__frame::before{left:auto;right:calc(-12 * var(--pu));top:18%;width:calc(55 * var(--pu));height:calc(16 * var(--pu));transform:rotate(90deg)} #work .deckcard__ph{inset:0;background: linear-gradient(135deg,transparent 0 44%,rgba(27,52,206,.13) 44% 56%,transparent 56%), repeating-linear-gradient(0deg,rgba(21,20,15,.035) 0 1px,transparent 1px calc(7 * var(--pu))),#dcd7cd;color:rgba(21,20,15,.48);} #work .deckcard:nth-child(5n+2) .deckcard__ph{background:linear-gradient(145deg,#001F93 0 38%,#ddd7cc 38% 68%,#15140f 68%);color:white} #work .deckcard:nth-child(5n+4) .deckcard__ph{background:repeating-linear-gradient(90deg,#ece7dc 0 calc(18 * var(--pu)),#ded8ca calc(18 * var(--pu)) calc(19 * var(--pu)));color:var(--ink)} #work .deckcard__cap{background:var(--card);border:1.5px solid var(--ink);border-top:0;padding:.55rem .6rem .6rem;opacity:1;} #work .deckcard__fmt{margin-top:.14rem;} #work .deckcard__badge{left:auto;right:.48rem;bottom:.48rem;background:var(--cobalt);border-color:var(--cobalt)} #work .deckcard__badge::after{border-left-color:#fff} #work .deck:not(.is-focused) .deckcard:hover{transform:translateY(calc(-24 * var(--pu))) rotate(0) scale(1.08)!important;z-index:12}#work .workfoot{border:0;position:relative;margin-top:0;padding-top:1.5rem} #work .workfoot::before{content:"";position:absolute;left:0;top:0;width:76%;height:1px;background:var(--ink)} /* PROOF: campaign autopsy + receipts */ #proof{background:var(--ink);color:var(--card)} #proof::before{color:#fff;opacity:.025} #proof .label,#proof .meta{color:#aaa69c;} #proof .head::after{background:var(--card)} #proof .h-lg{color:var(--card);} #proof .brands{background:transparent;border:0;gap:.55rem;} #proof .brands div{background:transparent;color:var(--card);border:1px solid #69665f;min-height:calc(64 * var(--pu));position:relative;overflow:hidden;}#proof .brands div::after{content:"";position:absolute;inset:auto -10% calc(7 * var(--pu)) 10%;height:calc(3 * var(--pu));background:var(--cobalt);opacity:.8} #proof .proofgrid{grid-template-columns:minmax(0,1.35fr) minmax(calc(260 * var(--pu)),.65fr);gap:clamp(1.5rem,3vw,3rem);margin-top:3rem} #proof .case{background:#f1ede4;color:var(--ink);border:0;padding:clamp(1.5rem,4vw,3rem);position:relative} #proof .case::before{content:"CAMPAIGN / AUTOPSY";position:absolute;right:1.2rem;top:calc(clamp(1.25rem,2.7vw,2.1rem) + calc(7.15 * var(--pu)));translate:0 -50%;background:var(--cobalt);color:white;font:700 .58rem var(--sans);letter-spacing:.16em;padding:.55em 1em;} #proof .case h3{margin:.5rem 0 1.2rem;} #proof .case p{font-size:1rem;max-width:48ch;color:#4f4b43} #proof .case__nums{background:var(--ink);border:0;gap:1px;margin-top:2rem} #proof .case__nums div{background:#f1ede4;padding:1.15rem .9rem} #proof .quotes{gap:1.2rem!important;align-content:center} #proof .quote{background:#fffdf8;color:var(--ink);border:0;padding:1.4rem 1.35rem 1.1rem;} #proof .quote:nth-child(2){background:#dfe4ff} #proof .quote::before{content:"";position:absolute;top:calc(-8 * var(--pu));left:23%;width:42%;height:calc(16 * var(--pu));background:rgba(232,218,169,.78);} #proof .quote footer{border-color:#aaa59c} /* AUDIENCE: visual flex, not dashboard */ #audience{background:#ebe7dd;color:var(--ink);padding-bottom:clamp(5rem,10vw,9rem)} #audience .aud{border:0;background:transparent;gap:clamp(.6rem,1.4vw,1.1rem);grid-template-columns:repeat(12,1fr)!important;align-items:stretch} #audience .aud__cell{border:1.5px solid var(--ink);background:#f8f5ed;padding:clamp(.85rem,1.6vw,1.35rem);min-height:calc(165 * var(--pu));display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden} #audience .aud__cell:nth-child(1){grid-column:span 5;min-height:calc(235 * var(--pu));} #audience .aud__cell:nth-child(2){grid-column:span 7;min-height:calc(235 * var(--pu));background:var(--cobalt);color:white;} #audience .aud__cell:nth-child(3){grid-column:span 7;} #audience .aud__cell:nth-child(4){grid-column:span 5;} #audience .aud__cell::before{content:"0" counter(aud);counter-increment:aud;position:absolute;top:.8rem;right:1rem;font:700 .64rem var(--sans);letter-spacing:.12em} #audience .aud{counter-reset:aud} #audience .aud__v{margin-top:auto;} #audience .aud__n{margin-top:.55rem;} #audience .aud__cell--blue .aud__k,#audience .aud__cell--blue .aud__n{color:rgba(255,255,255,.78)} #audience .audsplit{gap:clamp(1rem,2vw,2rem);margin-top:2.2rem} #audience .audlist{background:transparent;border:0;border-top:calc(3 * var(--pu)) solid var(--ink);padding:1rem 0 0} #audience .audlist:nth-child(2){border-top-color:var(--cobalt)} #audience .audlist h3{font-size:.7rem;color:var(--ink);margin-bottom:1.1rem} #audience .audrow{font-size:1rem;padding:.7rem .1rem} #audience .audbar{height:calc(8 * var(--pu));background:#d1cbc0;overflow:visible} #audience .audbar i{position:relative} #audience .audbar i::after{content:"";position:absolute;right:calc(-4 * var(--pu));top:calc(-3 * var(--pu));width:calc(8 * var(--pu));height:calc(14 * var(--pu));background:var(--ink);} #audience .svcmore{background:var(--ink);color:white;border:0;padding:1.6rem 1.7rem} /* WAYS TO WORK: two doors / two visual worlds */ #ways{background:#d8d1c4;padding-top:clamp(5rem,10vw,9rem)} #ways .tracks{gap:0;align-items:stretch;border:1.5px solid var(--ink);} #ways .track{border:0;padding:clamp(1.5rem,3vw,2.4rem);min-height:calc(500 * var(--pu));display:flex;flex-direction:column;background:#f5f1e8;position:relative;overflow:hidden} #ways .track:first-child{border-right:1.5px solid var(--ink)} #ways .track--b{background:var(--cobalt);color:white} #ways .track::before{content:"01";position:absolute;right:-.02em;top:-.08em;font-family:var(--sans);font-size:clamp(7rem,18vw,15rem);font-weight:800;line-height:1;color:rgba(21,20,15,.055);letter-spacing:-.08em} #ways .track--b::before{content:"02";color:rgba(255,255,255,.10)} #ways .track__tag{align-self:flex-start;background:var(--ink);position:relative;z-index:2;} #ways .track--b .track__tag{background:white;color:var(--cobalt)} #ways .track h3{margin:1.05rem 0 .8rem;max-width:13ch;min-height:2.85em;display:flex;align-items:flex-end;position:relative;z-index:2;} #ways .track>p{font-size:.95rem;line-height:1.5;min-height:4.5em;position:relative;z-index:2} #ways .track--b>p,#ways .track--b ol span{color:rgba(255,255,255,.86)} #ways .track ol{margin-top:1.8rem;border-top:1px solid currentColor;padding-top:.6rem;position:relative;z-index:2} #ways .track--b ol{border-color:rgba(255,255,255,.55)} #ways .track ol li{padding:.78rem 0;border-bottom:1px solid rgba(21,20,15,.18)} #ways .track--b ol li{border-color:rgba(255,255,255,.22)} #ways .typeindex{margin-top:4rem;background:var(--card);border:1.5px solid var(--ink);padding:1.2rem 1.4rem;} #ways .typeindex__grid{column-gap:1.3rem} #ways .typeitem{font-size:clamp(1rem,1.8vw,1.35rem);transition:transform .2s,color .2s} #ways .typeitem:hover{color:var(--cobalt);transform:translateX(calc(8 * var(--pu)))} #ways .svcmore{border:2px dashed var(--ink);background:transparent;} /* CONTACT: make the final brief feel like a signed-off production form */ #contact{position:relative;overflow:hidden} #contact::before{content:"BRIEF";position:absolute;right:-.05em;bottom:-.08em;font-family:var(--sans);font-weight:800;font-size:clamp(10rem,30vw,28rem);line-height:.7;color:rgba(255,255,255,.025);letter-spacing:-.07em;pointer-events:none} #contact .form{padding:clamp(1.4rem,3vw,2.2rem)} #contact .form::before{display:none} .rv{opacity:0;transform:translateY(calc(34 * var(--pu))) ;clip-path:inset(0 0 12% 0);transition:opacity .65s ease,transform .75s cubic-bezier(.16,1,.3,1),clip-path .75s cubic-bezier(.16,1,.3,1)} .rv.in{opacity:1;transform:none;clip-path:inset(0)}@media(max-width:819px){ #proof .proofgrid{grid-template-columns:1fr} #audience .aud{display:grid!important;grid-template-columns:1fr 1fr!important} #audience .aud__cell:nth-child(n){grid-column:span 1;min-height:calc(175 * var(--pu));transform:none} #audience .aud__cell:nth-child(1),#audience .aud__cell:nth-child(2){min-height:calc(205 * var(--pu))} #ways .track{min-height:auto} #ways .track h3,#ways .track>p{min-height:0} } @media(max-width:640px){ #work .deckcard:nth-child(n){width:clamp(calc(190 * var(--pu)),62vw,calc(260 * var(--pu)))} #audience .aud{grid-template-columns:1fr!important} #audience .aud__cell:nth-child(n){grid-column:1!important;min-height:calc(165 * var(--pu))} #ways .tracks{display:block;} #ways .track:first-child{border-right:0;border-bottom:1.5px solid var(--ink)} #ways .track h3{max-width:none;} } @media(max-width:640px){ .head{gap:.7rem;margin-bottom:1.7rem} } @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;clip-path:none}} .topbar .navlinks{display:none} .topbar .navtoggle{margin-left:auto} @media(min-width:1024px){ .topbar .navlinks{display:flex} } #work .head{margin-bottom:clamp(1.5rem,3vw,2.35rem)} #work .head::after{display:none} #work .cat{padding-block:clamp(.35rem,.8vw,.65rem)} #work .deckwrap{margin-top:-.45rem} #work .deck{padding:calc(132 * var(--pu)) var(--fpad) calc(140 * var(--pu))} @media(max-width:640px){ #work .head{margin-bottom:1.35rem} #work .cat{padding-block:.3rem} #work .deck{padding:calc(104 * var(--pu)) var(--fpad) calc(104 * var(--pu))} } #work .cat:last-child{padding-bottom:0} #work .cat:last-child .deck{padding-bottom:calc(16 * var(--pu))} #contact .contact__grid > div{padding-top:0} #contact .form{transform:none;margin-top:0} @media(max-width:640px){ #work .cat:last-child .deck{padding-bottom:calc(10 * var(--pu))} } /* TYPOGRAPHY + PORTFOLIO RHYTHM PASS */ .h-lg{max-width:none;} .head{ align-items:baseline; margin-bottom:clamp(2rem,4.5vw,3.4rem); } .head .label{color:var(--cobalt);margin-bottom:.42rem;} #work .head::after, #proof .head::after, #audience .head::after, #ways .head::after{ display:none; } #work .head{ margin-bottom:clamp(1.4rem,3.4vw,2.5rem); } #work .h-lg{max-width:none;} #work .cat{ padding-block:clamp(.65rem,1.4vw,1.05rem); } #work .cat + .cat{ border-top:0; margin-top:clamp(.45rem,1.2vw,.95rem); } #work .cat__head{ border-top:0; padding-top:0; align-items:center; margin-bottom:.55rem; } #work .cat__title{gap:.48rem;} #work .cat__title .idx{ font-size:.63rem; letter-spacing:.08em; } #work .cat__note{ background:transparent; border:0; padding:0; font-size:.56rem; letter-spacing:.06em; color:var(--ink-60); } #work .draghint{ color:var(--ink-60); } #work .deckwrap{ margin-top:0; } #work .deck{ gap:clamp(.65rem,1.2vw,1rem); padding:calc(58 * var(--pu)) var(--fpad) calc(70 * var(--pu)); } #work .deckcard, #work .deckcard:nth-child(4n+1), #work .deckcard:nth-child(4n+2), #work .deckcard:nth-child(4n+3), #work .deckcard:nth-child(4n){ width:clamp(calc(188 * var(--pu)),19.5vw,calc(268 * var(--pu))); } #work .deckcard__frame{ border-width:calc(5 * var(--pu)); } #work .deckcard__cap{ padding:.5rem .58rem .56rem; } #work .deck:not(.is-focused) .deckcard:hover, #work .deck:not(.is-focused) .deckcard:focus-visible{ transform:translateY(calc(-10 * var(--pu))) scale(1.03)!important; }#work .deck.is-focused .deckcard.is-open{ transform:translateY(calc(-4 * var(--pu))) scale(1.16)!important; }@media(max-width:899px){ .h-lg{max-width:none;} } @media(max-width:640px){ #work .cat{ padding-block:.55rem; } #work .cat__head{ gap:.45rem; margin-bottom:.3rem; } #work .cat__note{ display:block; width:100%; margin-left:1.62rem; } #work .deck{ padding:calc(42 * var(--pu)) var(--fpad) calc(54 * var(--pu)); } #work .deckcard:nth-child(n){ width:clamp(calc(170 * var(--pu)),58vw,calc(235 * var(--pu))); } } /* DENSITY PASS: remove wasted vertical space */ .band{ padding-block:clamp(2.25rem,5vw,4.2rem); } #work .wrap{ max-width:calc(1280 * var(--pu)); } #work .head{ margin-bottom:clamp(1rem,2.4vw,1.7rem); } #work .cat{ padding-block:0; } #work .cat + .cat{ margin-top:.65rem; } #work .cat__head{ margin-bottom:0; } #work .cat__ctrls{ margin-top:.45rem; } #work .deckwrap{ min-width:0; } #work .deckwrap::before, #work .deckwrap::after{ display:none; } #work .deck{ padding:calc(14 * var(--pu)) 0 calc(20 * var(--pu)); margin-inline:0; } #work .deckcard, #work .deckcard:nth-child(4n+1), #work .deckcard:nth-child(4n+2), #work .deckcard:nth-child(4n+3), #work .deckcard:nth-child(4n){ width:clamp(calc(126 * var(--pu)),12vw,calc(156 * var(--pu))); } #work .deckcard__frame{ border-width:calc(4 * var(--pu)); } #work .deckcard__frame::before{ height:calc(9 * var(--pu)); top:calc(-6 * var(--pu)); } #work .deckcard__cap{ padding:.4rem .45rem .45rem; } #work .deckcard__badge{ width:calc(20 * var(--pu)); height:calc(20 * var(--pu)); right:.34rem; bottom:.34rem; } #work .deckcard__badge::after{ border-left-width:calc(6 * var(--pu)); border-top-width:calc(4 * var(--pu)); border-bottom-width:calc(4 * var(--pu)); } #work .deck:not(.is-focused) .deckcard:hover, #work .deck:not(.is-focused) .deckcard:focus-visible{ transform:translateY(calc(-5 * var(--pu))) scale(1.02)!important; filter:drop-shadow(0 0 .45em rgba(0,31,147,.32)); }#work .deck.is-focused .deckcard.is-open{ transform:translateY(-2px) scale(1.06)!important; }#work .cat__close{top:.25rem;right:.25rem;} @media(min-width:820px){ #work .cat{ display:grid; grid-template-columns:minmax(calc(142 * var(--pu)),calc(176 * var(--pu))) minmax(0,1fr); column-gap:clamp(.9rem,2vw,1.45rem); align-items:start; background:color-mix(in srgb, var(--card) 44%, transparent); border:1px solid color-mix(in srgb, var(--ink) 15%, transparent); padding:.65rem .75rem .45rem; } #work .cat__head{ display:block; padding-top:.2rem; } #work .cat__title{display:block;} #work .cat__title .idx{ display:block; margin-bottom:.32rem; } #work .cat__note{ display:block; margin-top:.34rem; line-height:1.35; } #work .draghint{ font-size:.52rem; } } #proof, #audience, #ways, #contact{ padding-block:clamp(2.3rem,5vw,4.2rem); } #proof .head, #audience .head, #ways .head, #contact .head{ margin-bottom:clamp(1.35rem,3vw,2.2rem); } #proof .proofgrid{ margin-top:clamp(1.35rem,2.6vw,2rem); } #proof .brands div{min-height:calc(48 * var(--pu));padding-block:.75rem;} #proof .case{ padding:clamp(1.25rem,2.7vw,2.1rem); } #proof .case__nums{ margin-top:1.15rem; } #audience{ padding-bottom:clamp(2.6rem,5vw,4.4rem); } #audience .aud__cell{ min-height:calc(132 * var(--pu)); } #audience .aud__cell:nth-child(1), #audience .aud__cell:nth-child(2){ min-height:calc(175 * var(--pu)); } #audience .audsplit{ margin-top:1.25rem; } #audience .svcmore{ margin-top:1.25rem!important; padding:1.15rem 1.3rem; } #ways{ padding-top:clamp(2.6rem,5vw,4.6rem); } #ways .tracks{ margin-bottom:1.55rem; } #ways .track{ min-height:0; padding:clamp(1.2rem,2.4vw,1.75rem); } #ways .track h3{min-height:0;margin:.75rem 0 .55rem;} #ways .track>p{ min-height:0; } #ways .track ol{ margin-top:1rem; } #ways .track ol li{ padding:.55rem 0; } #ways .typeindex{ margin-top:1.55rem; padding:.95rem 1.1rem; } #ways .svcmore{ margin-top:1.35rem!important; } #contact .contact__grid{ gap:clamp(1.4rem,3vw,2.1rem); margin-bottom:clamp(1rem,2vw,1.5rem); } #contact .form{ padding:clamp(2.3rem,4.8vw,3.3rem); } #contact .form select{ appearance:none; -webkit-appearance:none; padding-right:3rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 26'%3E%3Cpath d='M7 1v23M1.5 18 7 24l5.5-6' fill='none' stroke='%2315140F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:calc(100% - 1.15rem) 50%; background-size:calc(10 * var(--pu)) calc(19 * var(--pu)); background-repeat:no-repeat; } @media(max-width:819px){ #work .cat{ background:color-mix(in srgb, var(--card) 35%, transparent); border:1px solid color-mix(in srgb, var(--ink) 13%, transparent); padding:.7rem .75rem .45rem; } #work .deck{ padding:calc(16 * var(--pu)) 0 calc(18 * var(--pu)); } } @media(max-width:640px){ .band, #proof, #audience, #ways, #contact{ padding-block:2.2rem; } #work .cat + .cat{ margin-top:.55rem; } #work .cat__note{ margin-left:0; } #work .deckcard:nth-child(n){ width:clamp(calc(132 * var(--pu)),42vw,calc(170 * var(--pu))); } #proof .case__nums{ grid-template-columns:1fr; } #audience .aud__cell:nth-child(n){ min-height:calc(125 * var(--pu)); } } /* VISUAL COLLAGE PASS: reference-inspired, same content */ :root{ --mint:#A9FFF0; /* Canonical pink sampled from the supplied collage paper. */ --pink:#FCC1D6; --soft-pink:var(--pink); /* Supplied pink-paper image, lifted only slightly with a white wash. */ --pink-paper:linear-gradient(rgb(255 255 255 / .055),rgb(255 255 255 / .055)),url("../assets/pink-paper-reference.png"); --green:#145C35; --wood:#6F3F24; --cream:#F8F2E8; } body{background-color:#e8e1d5;background-image: radial-gradient(circle at 9% 13%, color-mix(in srgb, var(--pink) 26%, transparent) 0 1px, transparent 1.8px), radial-gradient(circle at 86% 18%, rgba(169,255,240,.32) 0 1.5px, transparent 2px), linear-gradient(90deg, rgba(21,20,15,.035) 1px, transparent 1px), linear-gradient(0deg, rgba(21,20,15,.025) 1px, transparent 1px);background-size:calc(29 * var(--pu)) calc(29 * var(--pu)), calc(37 * var(--pu)) calc(37 * var(--pu)), calc(42 * var(--pu)) calc(42 * var(--pu)), calc(42 * var(--pu)) calc(42 * var(--pu));} .navtoggle{background:var(--mint);} .binder-tab--top{ background:var(--pink-paper) center/cover; color:var(--ink); } .binder-tab--side{ background:var(--mint); color:var(--ink); } .editorial-photo::before{ background: radial-gradient(circle at 75% 24%, color-mix(in srgb, var(--pink) 42%, transparent), transparent 24%), linear-gradient(135deg,#d9d5cb 0 34%,#f8f2e8 34% 58%,#b9afa0 58% 100%); } #work{ background: linear-gradient(180deg,#f0eadf 0,#e6ded0 100%); } #work::after{ content:""; position:absolute; right:-5vw; top:5.5rem; width:28vw; height:28vw; min-width:calc(220 * var(--pu)); min-height:calc(220 * var(--pu)); z-index:-1; pointer-events:none; background: radial-gradient(circle at 50% 50%, transparent 0 34%, color-mix(in srgb, var(--pink) 42%, transparent) 35% 36%, transparent 37%), conic-gradient(from 20deg, rgba(169,255,240,.45), color-mix(in srgb, var(--pink) 30%, transparent), transparent 56%); border-radius:50%; opacity:.8; } #work .sortswitch{background:var(--cream);border:1.5px solid var(--ink);padding:.48rem .65rem;} #work .cat{ overflow:hidden; position:relative; border:1.5px solid rgba(21,20,15,.32); } #work .cat:nth-of-type(5n+1){ background:linear-gradient(90deg,rgba(169,255,240,.42),rgba(248,242,232,.72)); } #work .cat:nth-of-type(5n+2){ background:linear-gradient(90deg,color-mix(in srgb, var(--pink) 34%, transparent),rgba(248,242,232,.72)); } #work .cat:nth-of-type(5n+3){ background:linear-gradient(90deg,rgba(20,92,53,.18),rgba(248,242,232,.72)); } #work .cat:nth-of-type(5n+4){ background:linear-gradient(90deg,rgba(111,63,36,.17),rgba(248,242,232,.74)); } #work .cat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:calc(7 * var(--pu)); background:repeating-linear-gradient(0deg,var(--ink) 0 calc(7 * var(--pu)),transparent calc(7 * var(--pu)) calc(15 * var(--pu))); opacity:.72; } #work .cat::after{ content:""; position:absolute; right:clamp(.65rem,1.5vw,1.1rem); top:.55rem; width:calc(44 * var(--pu)); height:calc(12 * var(--pu)); background:rgba(255,255,255,.48); border:1px solid rgba(21,20,15,.2); transform:rotate(-3deg); pointer-events:none; } #work .cat__title{color:var(--ink);} #work .cat__title .idx{ display:inline-grid; place-items:center; width:2.25em; height:2.25em; color:var(--ink); background:var(--pink-paper) center/cover; border:1.5px solid var(--ink); border-radius:50%; } #work .cat:nth-of-type(odd) .cat__title .idx{ background:var(--mint); } #work .cat__note{ color:rgba(21,20,15,.62); } #work .draghint{ background:rgba(248,242,232,.62); border:1px solid rgba(21,20,15,.22); padding:.28rem .42rem; } #work .deckcard__frame{ background:#ddd5c8; outline:1px solid rgba(21,20,15,.65); } #work .deckcard:nth-child(6n+1) .deckcard__frame{ background:var(--mint); } #work .deckcard:nth-child(6n+2) .deckcard__frame{ background:var(--pink-paper) center/cover; } #work .deckcard:nth-child(6n+3) .deckcard__frame{ background:#d9e2cf; } #work .deckcard:nth-child(6n+4) .deckcard__frame{ background:#efe2cf; } #work .deckcard:nth-child(6n+5) .deckcard__frame{ background:#ded8f0; } #work .deckcard__ph{background: linear-gradient(135deg, transparent 0 43%, rgba(255,255,255,.38) 43% 57%, transparent 57%), radial-gradient(circle at 82% 18%, rgba(21,20,15,.22) 0 calc(8 * var(--pu)), transparent calc(9 * var(--pu))), repeating-linear-gradient(0deg,rgba(21,20,15,.045) 0 1px,transparent 1px calc(8 * var(--pu)));} #work .deckcard:nth-child(4n+2) .deckcard__ph{ background: radial-gradient(circle at 20% 22%, rgba(255,255,255,.75) 0 calc(12 * var(--pu)), transparent calc(13 * var(--pu))), linear-gradient(145deg,rgba(20,92,53,.72) 0 38%,rgba(248,242,232,.42) 38% 62%,color-mix(in srgb, var(--pink) 42%, transparent) 62%); } #work .deckcard:nth-child(4n+4) .deckcard__ph{ background: repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0 calc(17 * var(--pu)),rgba(21,20,15,.045) calc(17 * var(--pu)) calc(18 * var(--pu))), var(--mint); } #work .deckcard__cap{ border-color:rgba(21,20,15,.78); } #work .deckcard:nth-child(even) .deckcard__cap{ background:#fff8d8; } #work .deckcard:nth-child(3n) .deckcard__cap{ background:var(--pink-paper) center/cover; } #work .deckcard:nth-child(5n) .deckcard__cap{ background:#e5fff9; } #proof{ background: radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--pink) 18%, transparent) 0 calc(80 * var(--pu)), transparent calc(82 * var(--pu))), radial-gradient(circle at 92% 18%, rgba(169,255,240,.18) 0 calc(96 * var(--pu)), transparent calc(98 * var(--pu))), var(--ink); } #proof .brands{ transform:none; background:none; border:0; overflow:visible; } #proof .brands div{ min-height:clamp(calc(54 * var(--pu)),5vw,calc(70 * var(--pu))); padding:.9rem .65rem; border:0; overflow:visible; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:100% 100%; color:var(--ink); font-size:clamp(.76rem,1vw,.96rem); position:relative; } #proof .brands div:nth-child(1){background-image:url("../assets/brand-sticker-01.png");transform:rotate(-.35deg)} #proof .brands div:nth-child(2){background-image:url("../assets/brand-sticker-02.png");color:#fff;transform:rotate(.4deg)} #proof .brands div:nth-child(3){background-image:url("../assets/brand-sticker-03.png");transform:rotate(-.25deg)} #proof .brands div:nth-child(4){background-image:url("../assets/brand-sticker-04.png");color:#fff;transform:rotate(.45deg)} #proof .brands div:nth-child(5){background-image:url("../assets/brand-sticker-05.png");transform:rotate(-.3deg)} #proof .brands div:nth-child(6){background-image:url("../assets/brand-sticker-06.png");color:#fff;transform:rotate(.35deg)} #proof .brands div:nth-child(7){background-image:url("../assets/brand-sticker-07.png");color:var(--cobalt);transform:rotate(-.2deg)} #proof .brands div:nth-child(8){background-image:url("../assets/brand-sticker-03.png");transform:rotate(.3deg)} #proof .brands div:nth-child(9){background-image:url("../assets/brand-sticker-04.png");color:#fff;transform:rotate(-.4deg)} #proof .brands div:nth-child(10){background-image:url("../assets/brand-sticker-01.png");transform:rotate(.25deg)}#proof .case::after, #proof .quote::after, .aud__cell::after, #ways .track::after, #contact .form::after{ content:""; position:absolute; pointer-events:none; width:calc(62 * var(--pu)); height:calc(15 * var(--pu)); background:rgba(255,255,255,.5); border:1px solid rgba(21,20,15,.18); transform:rotate(-4deg); } #proof .case::after{ left:2rem; top:calc(-8 * var(--pu)); } #proof .quote{ transform:rotate(.7deg); } #proof .quote:nth-child(2){ transform:rotate(-.7deg); } #proof .quote::after{ right:1.1rem; top:calc(-8 * var(--pu)); } #audience{ background: linear-gradient(180deg,var(--pink) 0 34%,#ece5d9 34% 100%); }#audience .aud__cell:nth-child(1){ background:#fff8ed; } #audience .aud__cell:nth-child(2){ background:var(--pink-paper) center/cover; color:var(--ink); } #audience .aud__cell:nth-child(3){ background:var(--mint); } #audience .aud__cell:nth-child(4){ background:#f6efe3; } #audience .aud__cell--blue .aud__k, #audience .aud__cell--blue .aud__n{ color:rgba(21,20,15,.72); } .aud__cell::after{ right:1.1rem; top:calc(-7 * var(--pu)); } #audience .audlist{ background:rgba(248,242,232,.64); border:1.5px solid var(--ink); padding:1rem 1.05rem; } #audience .audbar{ background:rgba(21,20,15,.14); } #audience .svcmore{ background:var(--green); } #ways{ background: linear-gradient(90deg,#f1e7d9 0 50%,var(--pink) 50% 100%); } #ways .tracks{ border-radius:0 calc(24 * var(--pu)) calc(24 * var(--pu)) 0; overflow:visible; /* the painted dashes hang outside the pair */ } #ways .track{ background:#f8f2e8; } #ways .track--b{ background:var(--green); color:#fff; } #ways .track::after{ right:1.6rem; top:.8rem; transform:rotate(5deg); } #ways .typeindex{ background:#eafffb; } #ways .typeitem i{ background:var(--pink-paper) center/cover; } #contact{ background: radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--pink) 20%, transparent) 0 calc(92 * var(--pu)), transparent calc(94 * var(--pu))), radial-gradient(circle at 88% 76%, rgba(169,255,240,.16) 0 calc(120 * var(--pu)), transparent calc(122 * var(--pu))), var(--ink); } /* The enquiry card keeps its field labels; no numbered step markers. */ #contact .form{ position:relative; border-color:var(--ink); } #contact .form label{ display:grid; grid-template-columns:minmax(0,1fr); align-items:center; margin-bottom:clamp(.6rem,1.4vw,.95rem); } #contact .form label::before{ content:none; display:none; } #contact .form .label{ grid-column:1; grid-row:1; margin-bottom:.3rem; } #contact .form input, #contact .form select, #contact .form textarea{ grid-column:1; grid-row:2; padding:.62rem .8rem; } #contact .form textarea{min-height:calc(72 * var(--pu))} /* the "What are you after?" list is drawn in the page (site.js) so it tilts with the paper. The real