/* Shared styles for Tailor Cut Media case-study pages — matches the main site (dark tungsten + brass, sharp edges) */ :root{ --ink:#15120D; --ink-2:#1B1710; --surface:#221D15; --surface-2:#2B241A; --line:#352C1F; --line-2:#463A28; --text:#EFE8DA; --muted:#A99C86; --faint:#766B58; --brass:#E4A64A; --brass-2:#F0C079; --brass-deep:#B87A2E; --disp:"Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif; --text-face:"Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --pad:clamp(1.2rem,5vw,5rem); --maxw:1180px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0; background:var(--ink); color:var(--text); font-family:var(--text-face); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } a{color:inherit; text-decoration:none;} h1,h2,h3{font-family:var(--disp); font-weight:800; letter-spacing:-.03em; margin:0; text-wrap:balance;} img{max-width:100%; display:block;} .wrap{width:min(var(--maxw),100%); margin-inline:auto; padding-inline:var(--pad);} .eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:0;} /* nav (same mark + horizontal links, hamburger on mobile) */ .nav{position:sticky; top:0; z-index:50; background:rgba(21,18,13,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);} .nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:.7rem;} .brandmark{display:inline-flex; align-items:center;} .brandmark svg{height:46px; width:auto; overflow:visible; display:block;} .brandmark .ph{transform-box:fill-box; transform-origin:center; transform:translate(46px,112px); animation:tcPlay 5.4s ease-in-out infinite;} @keyframes tcPlay{0%{transform:translate(46px,112px) scale(1);}58%{transform:translate(294px,112px) scale(1);}66%{transform:translate(294px,112px) scale(1.7);}78%{transform:translate(294px,112px) scale(1);}90%{transform:translate(294px,112px) scale(1);}100%{transform:translate(46px,112px) scale(1);}} .brandmark .fc{animation:tcFinish 5.4s ease-in-out infinite;} @keyframes tcFinish{0%,56%{fill:#A99C86;}64%{fill:#F0C079;}76%{fill:#E4A64A;}90%,100%{fill:#A99C86;}} @media (prefers-reduced-motion:reduce){ .brandmark .ph{animation:none; transform:translate(170px,112px);} .brandmark .fc{animation:none; fill:#A99C86;} } .navlinks{display:flex; align-items:center; gap:2.2rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;} .navlinks a{color:var(--muted); transition:color .2s;} .navlinks a:hover{color:var(--text);} .navlinks .quote{color:var(--brass);} .burger{display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:.4rem; z-index:60;} .burger span{width:28px; height:2px; background:var(--text); display:block; transition:.25s;} .burger.x span:nth-child(1){transform:translateY(8px) rotate(45deg);} .burger.x span:nth-child(2){opacity:0;} .burger.x span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} @media (max-width:820px){ .navlinks{position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:var(--ink-2); border-left:1px solid var(--line); flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem; padding:2.4rem var(--pad); font-size:1rem; transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.7,.2,1); z-index:55;} .navlinks.open{transform:none;} .navlinks a{color:var(--text);} .burger{display:flex;} } /* links + buttons */ .link{position:relative; display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); width:max-content; cursor:pointer; transition:color .2s;} .link .arw{display:inline-block; transition:transform .25s cubic-bezier(.2,.7,.2,1);} .link.back .arw{transform:scaleX(-1);} .link::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor; opacity:.35; transform-origin:left; transition:opacity .25s;} .link:hover{color:var(--brass-2);} .link:hover.back .arw{transform:scaleX(-1) translateX(6px);} .link:hover:not(.back) .arw{transform:translateX(6px);} .link:hover::after{opacity:1;} .btn{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; padding:.95rem 1.5rem; border-radius:0; cursor:pointer; border:1px solid var(--brass); transition:transform .2s, background .2s, color .2s;} .btn.solid{background:var(--brass); color:var(--ink); font-weight:600;} .btn.solid:hover{background:var(--brass-2); transform:translateY(-2px);} .btn .tri{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;} /* case-study hero */ .cs-top{padding-block:clamp(2rem,5vw,3.4rem) 1.4rem;} .cs-top .back{margin-bottom:1.8rem;} .cs-slate{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:1.3rem;} .cs-slate b{color:var(--brass); font-weight:400;} .cs-title{font-size:clamp(2.2rem,6vw,4.4rem); line-height:.98; letter-spacing:-.035em; text-transform:uppercase; max-width:18ch;} /* media block */ .cs-media{position:relative; margin-top:2rem; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-2);} .cs-media .poster{position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.25) brightness(.72);} .cs-media .veil{position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 45%, transparent 40%, rgba(12,10,7,.55));} .cs-media .cm{position:absolute; width:26px; height:26px; border:2px solid var(--brass);} .cs-media .cm.tl{top:16px;left:16px;border-right:0;border-bottom:0;} .cs-media .cm.tr{top:16px;right:16px;border-left:0;border-bottom:0;} .cs-media .cm.bl{bottom:16px;left:16px;border-right:0;border-top:0;} .cs-media .cm.br{bottom:16px;right:16px;border-left:0;border-top:0;} .cs-media .play{position:absolute; inset:0; margin:auto; width:74px; height:74px; border:2px solid var(--text); border-radius:50%; display:grid; place-items:center; transition:.25s;} .cs-media .play::after{content:""; border-left:20px solid var(--brass); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px;} .cs-media:hover .play{border-color:var(--brass); transform:scale(1.06);} .cs-media .tc{position:absolute; bottom:.9rem; left:1.1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:rgba(239,232,218,.72);} /* embedded Vimeo player */ .cs-embed{position:relative; margin-top:2rem; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line-2); background:#000;} .cs-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .cs-embed .cm{position:absolute; z-index:2; width:24px; height:24px; border:2px solid var(--brass); pointer-events:none;} .cs-embed .cm.tl{top:12px;left:12px;border-right:0;border-bottom:0;} .cs-embed .cm.tr{top:12px;right:12px;border-left:0;border-bottom:0;} /* self-hosted