:root{color-scheme:dark}
body.light{color-scheme:light}
@font-face{font-family:"Switzer";src:url("../assets/fonts/Switzer-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#0D0D0C;color:#F3F1EB;font-family:Switzer,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.light{background:#F3F1EB;color:#0D0D0C}
a{color:inherit}
img,video{max-width:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* header + footer: see the end of this file */

/* tiles + motion */
.tile{cursor:url("../assets/cursor_view.svg") 44 44,pointer}
.tile:focus-visible{outline:2px solid #CCFF66;outline-offset:6px}
.skew{transform:skewY(var(--skew,0deg));transform-origin:50% 50%;will-change:transform}
.title-solid{opacity:var(--tp,0)}
.wt{display:block;margin:0;white-space:nowrap;font-size:clamp(120px,25vw,400px);line-height:.86;font-weight:700;letter-spacing:-.025em;padding:.06em .04em .08em 0}
/* "Work" colour reel: frames of colour clipped inside the letters, flashing from one to the next */
.wt-reel{position:relative;color:#232321}
.wt-frame{position:absolute;inset:0;padding:inherit;color:transparent;-webkit-background-clip:text;background-clip:text;background-size:120% 120%;background-position:0% 0%;background-repeat:no-repeat;opacity:0;transition:opacity .12s linear,background-position .9s ease-out}
.wt-frame.on{opacity:1;background-position:100% 100%}
/* "Talk to us" arrow stretches on hover */
.cta-big{display:inline-flex;align-items:center;gap:.16em;color:#0D0D0C;text-decoration:none}
.cta-arrow{position:relative;display:inline-block;width:.72em;height:.46em;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.cta-shaft{position:absolute;left:0;right:.05em;top:50%;height:.07em;margin-top:-.035em;background:currentColor}
.cta-head{position:absolute;right:0;top:0;height:100%;width:.23em;overflow:visible}
.cta-big:hover .cta-arrow,.cta-big:focus-visible .cta-arrow{width:1.4em}
.cta-big:focus-visible{outline:3px solid #0D0D0C;outline-offset:8px}
.bob{animation:bob 1.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(7px);opacity:.3}}
.grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;background-image:url("../assets/grain.png");background-size:160px 160px;opacity:.055;pointer-events:none;z-index:80;animation:grain 1s steps(5) infinite}
.light .grain{opacity:.05}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.intro-grid{display:grid;grid-template-columns:repeat(16,10px);gap:22px}
@media (max-width:600px){.intro-grid{gap:12px}}
.span2{grid-column:span 2}
@media (max-width:760px){.span2{grid-column:auto}}

/* case page: next / previous brand transition pieces (moved by JS, not CSS variables) */
.xfer-frame{width:100%;height:100%;overflow:hidden;background:#1A1A18;will-change:transform}
.xfer-frame img,.curtain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xfer-panel{position:absolute;left:0;right:0;bottom:0;background:#F3F1EB;color:#0D0D0C;padding:clamp(24px,3vw,48px) var(--grid-margin);will-change:transform}
.xfer-kicker{margin:0 0 10px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#55554F}
.xfer-name{margin:0;font-size:clamp(56px,11vw,180px);font-weight:600;letter-spacing:-.05em;line-height:.88}
.xfer-hint{position:absolute;z-index:2;top:calc(var(--hdr-h) + 24px);left:0;right:0;margin:0;text-align:center;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#9B9B94}
.curtain{position:fixed;inset:0;z-index:44;background:#1A1A18;opacity:0;visibility:hidden;pointer-events:none}
.curtain.show{opacity:1;visibility:visible}
.curtain.fade{opacity:0;visibility:visible;transition:opacity .35s ease}
.curtain .xfer-panel{will-change:auto}
/* case pages: header fixed to the top so it can never scroll away during a transition */
.hdr-fixed .site-header{position:fixed;left:0;right:0;top:0}

@media (prefers-reduced-motion: reduce){
  .bob,.grain{animation:none}
  .wt-frame{transition:none}
  .cta-arrow{transition:none}
  .skew{transform:none !important}
  .tile div,.tile img{transition:none !important}
}

/* docking title + sticky filter bar */
.dock-bar{position:sticky;top:var(--hdr-h);z-index:15;background:rgba(13,13,12,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #2A2A27;display:flex;align-items:center;gap:12px clamp(20px,3vw,44px);padding:14px max(var(--grid-margin),calc((100% - 84rem) / 2))}
.dock-label{display:inline-block;flex:none;font-size:clamp(30px,2.6vw,40px);color:#F3F1EB;opacity:0;pointer-events:none}
.dock-filters{flex:1;min-width:0;display:flex;align-items:baseline;gap:4px 26px;overflow-x:auto;scrollbar-width:none}
.dock-filters::-webkit-scrollbar{display:none}
.dock-filters button{white-space:nowrap;flex:none}
.dock-views{flex:none;display:flex;gap:4px;background:#1A1A18;padding:4px;border-radius:999px}
@media (max-width:760px){
  .dock-bar{flex-wrap:wrap;padding-top:10px;padding-bottom:4px}
  .dock-label{font-size:28px}
  .dock-views{margin-left:auto}
  .dock-filters{order:3;flex-basis:100%}
}

/* ============ shapingcompany.com header and footer (copied from the main site) ============ */
:root{--font-display:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;--font-text:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;--color-ink:#151515;--color-paper:#f4f2e9;--color-lime:#cf6;--color-graphite:#5a5954;--color-stone:#888782;--color-ink-hover:#33322e;--color-ink-active:#000;--color-lime-hover:#bdf24d;--color-lime-active:#aee635;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--type-body-size:clamp(1rem,.9536rem + .1905vw,1.125rem);--type-body-line:1.6;--radius-button:.425;--radius-card:2.5rem;--ease-ui:cubic-bezier(.2,0,0,1);--duration-ui:.16s;--grid-margin:1.25rem;--grid-max:84rem;--hdr-h:4.5rem}
@media (min-width:768px){:root{--grid-margin:2.5rem}}
@media (min-width:1200px){:root{--grid-margin:5rem}}
@media (prefers-reduced-motion:reduce){:root{--duration-ui:0s}}
.container{width:100%;max-width:calc(var(--grid-max) + 2 * var(--grid-margin));padding-inline:var(--grid-margin);margin:0 auto}
.on-ink{background:var(--color-ink);color:var(--color-paper)}
.site-header svg,.site-footer svg{max-width:100%;display:block}
.site-header,.site-footer{font-family:var(--font-text);font-size:var(--type-body-size);line-height:var(--type-body-line);-webkit-font-smoothing:antialiased}
.site-header :focus-visible{outline:3px solid var(--color-ink);outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--color-lime)}
.btn{--h:3rem;justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--h);font:600 1rem/1 var(--font-text);border:1.5px solid var(--color-ink);border-radius:0 0 0 calc(var(--h) * var(--radius-button));cursor:pointer;white-space:nowrap;transition:background-color var(--duration-ui) var(--ease-ui),color var(--duration-ui) var(--ease-ui);padding:0 1.25rem;text-decoration:none;display:inline-flex}
.btn--accent{background:var(--color-lime);color:var(--color-ink)}
.btn--accent:hover{background:var(--color-lime-hover)}
.btn--accent:active{background:var(--color-lime-active)}
.site-header{top:env(safe-area-inset-top,0px);z-index:50;background:var(--color-paper);color:var(--color-ink);transition:border-color var(--duration-ui) var(--ease-ui);border-bottom:1px solid transparent;position:sticky}
.site-header.is-scrolled{border-bottom-color:rgba(21,21,21,.12)}
.site-header__inner{align-items:center;gap:var(--space-8);min-height:var(--hdr-h);display:flex}
.brand{color:var(--color-ink);flex:0 0 auto;display:block}
.brand .logo{width:13rem;height:auto}
.brand .sym{width:auto;height:2.25rem;display:none}
.site-header.is-scrolled .brand .logo{display:none}
.site-header.is-scrolled .brand .sym{display:block}
.nav{margin-left:auto}
.nav ul{gap:var(--space-8);margin:0;padding:0;list-style:none;display:flex}
.nav a{border-bottom:2px solid transparent;padding-block:12px;font-size:.95rem;font-weight:500;text-decoration:none;flex-direction:column;align-items:center;display:inline-flex}
.nav a::after{content:attr(data-label);visibility:hidden;pointer-events:none;user-select:none;height:0;font-weight:700;overflow:hidden}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--color-ink)}
.nav a[aria-current="page"]{font-weight:700}
.nav a:focus-visible,.site-header .btn:focus-visible,.brand:focus-visible{outline-offset:6px;border-radius:4px;outline-width:2px}
.nav a:focus:not(:focus-visible){outline:none}
.menu-btn{align-items:center;gap:var(--space-2);min-width:3rem;min-height:3rem;padding:0 var(--space-3);border:1.5px solid var(--color-ink);font:600 .95rem var(--font-text);color:var(--color-ink);cursor:pointer;background:0 0;border-radius:0 0 0 1.25rem;margin-left:auto;display:none}
.menu-btn svg{width:1.25rem;height:1.25rem}
.mobile-menu{background:var(--color-ink);color:var(--color-paper);padding:var(--space-8) var(--grid-margin);align-content:start;gap:var(--space-6);z-index:49;display:grid;position:fixed;inset:var(--hdr-h) 0 0;overflow-y:auto}
.mobile-menu[hidden]{display:none}
.mobile-menu ul{gap:var(--space-4);margin:0;padding:0;list-style:none;display:grid}
.mobile-menu a:not(.btn){color:var(--color-paper);font:700 2rem/1.1 var(--font-display);letter-spacing:-.02em;text-decoration:none}
.mobile-menu__cta{width:100%;margin-top:var(--space-4);justify-content:center}
@media (max-width:960px){.nav,.site-header__inner>.btn{display:none}.menu-btn{display:inline-flex}.brand .logo{width:10.5rem}}
.site-footer{background:var(--color-ink);color:var(--color-paper);border-top-right-radius:calc(var(--radius-card) * 1.5);margin-top:clamp(3rem,2rem + 4vw,6rem)}
.site-footer__grid{gap:var(--space-12);padding-block:var(--space-16) var(--space-8);grid-template-columns:1fr;display:grid}
@media (min-width:900px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer .sym{width:auto;height:4rem;color:var(--color-lime)}
.site-footer .big{font:700 clamp(1.8rem,1.2rem + 2.4vw,3rem)/1.02 var(--font-display);letter-spacing:-.03em;margin:var(--space-6) 0;max-width:14ch}
.site-footer ul{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}
.site-footer a{color:var(--color-paper);text-underline-offset:3px}
.site-footer ul a{padding-block:4px;display:inline-block}
.site-footer .legal{padding-top:var(--space-4);color:var(--color-stone);justify-content:space-between;gap:var(--space-4);border-top:1px solid #3a3935;flex-wrap:wrap;grid-column:1/-1;font-size:.85rem;display:flex}
.footer-social a{text-underline-offset:3px;text-decoration:underline}
.rg-in,html[data-in] .rg-global{display:none}
html[data-in] .rg-in{display:inline}
.footer-on-lime .site-footer{margin-top:0}

/* case page: end strip (replaces the footer, which would block the endless scroll) */
.end-strip{position:absolute;z-index:3;left:0;right:0;bottom:66px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding:18px var(--grid-margin) 22px;border-top:1px solid #2A2A27;font-size:13px;color:#888782}
.end-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.end-strip a{color:#F4F2E9;text-decoration:none}
.end-strip a:hover{color:#CCFF66}
/* case page: floating way back to the Work page (always visible; colour follows what is behind it) */
.back-pill{position:fixed;z-index:45;left:var(--grid-margin);bottom:22px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:#151515;color:#F4F2E9;font-size:15px;font-weight:500;text-decoration:none;box-shadow:0 10px 30px -12px rgba(0,0,0,.45);transition:background-color .25s ease,color .25s ease}
.back-pill:hover{background:#33322e}
.back-pill.on-dark{background:#F4F2E9;color:#151515}
.back-pill.on-dark:hover{background:#CCFF66}
.back-pill span{transition:transform .25s ease}
.back-pill:hover span{transform:translateX(-4px)}