/* seo.py: added after the Webflow stylesheet. Keeps the look unchanged after the SEO markup changes. */
/* Home hero: the wrapper became an h1. The site CSS styles h1 by tag (Mattone font, 7.25em, uppercase,
   letter-spacing), so give it back the inherited values the div had. Inner divs became display:block spans. */
h1.div-block-2{font:inherit;letter-spacing:inherit;text-transform:inherit;margin-top:0}
h1.div-block-2>span{display:block}
/* GIF loops replaced by <video>: the same box as the <img> had (.w-richtext figure img + img base rules).
   Width comes from the width attribute (the GIF's width) and is capped by max-width like the image. */
.w-richtext figure video[data-lazy-video]{max-width:100%;height:auto;display:inline-block;vertical-align:middle;border:0}
video[data-lazy-video][width="480"][height="270"]{aspect-ratio:480/270}
video[data-lazy-video][width="640"][height="280"]{aspect-ratio:640/280}
video[data-lazy-video][width="640"][height="360"]{aspect-ratio:640/360}
video[data-lazy-video][width="720"][height="576"]{aspect-ratio:720/576}
video[data-lazy-video][width="800"][height="300"]{aspect-ratio:800/300}
video[data-lazy-video][width="1000"][height="100"]{aspect-ratio:1000/100}
video[data-lazy-video][width="1000"][height="150"]{aspect-ratio:1000/150}
video[data-lazy-video][width="1000"][height="200"]{aspect-ratio:1000/200}
/* Without JavaScript the <noscript> poster image is shown instead. */
html:not(.w-mod-js) video[data-lazy-video]{display:none}
/* Home nav: the links are bare #work/#services/#about/#contact (that is what closes the mobile menu after a
   tap), which turns on Webflow's scroll-spy: it adds w--current to the link of the section in view, and the
   site CSS greys .nav-link-3.w--current. Live, the links are absolute URLs and never get w--current, so keep
   them light as live does, with the same grey on hover. */
.nav-link-3.w--current{color:var(--light-text)}
.nav-link-3.w--current:hover{color:var(--dark-text)}
/* Home WORK grid: zoom the card photo on hover/focus (added 2026-11-10). The photo is an inline
   background-image on .collection-item-2; a ::before copy of it is scaled inside the clipped card, so the
   title bar and link do not move. Only on devices with a real hover, and not with reduced motion. */
.collection-item-2{position:relative;overflow:hidden;isolation:isolate}
.collection-item-2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:inherit;background-position:inherit;background-size:inherit;background-repeat:inherit;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.collection-item-2:hover::before,.collection-item-2:focus-within::before{transform:scale(1.08)}}
/* Project pages: the MORE WORK link (.section-2 > .div-block-10 > a) is a compact card in the style of the home
   page panels (.row.cards: --black-800, rounded corners), sized to its text (added 2026-11-12).
   It reveals (fade, rise, scale) as it scrolls into view: CSS scroll-driven animation, only where
   supported and not with reduced motion; elsewhere the card is simply shown. The reveal animates the
   translate/scale properties, so the hover lift (transform) does not fight it. The negative right margin
   cancels the trailing letter-spacing so the text sits centred. */
.section-2 .div-block-10>a{display:inline-flex;justify-content:center;align-items:center;padding:36px 64px;border-radius:1.5em;background-color:var(--black-800);transition:background-color .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.section-2 .div-block-10>a .text-block-11{margin-right:-10px;transition:color .4s ease}
.section-2 .div-block-10>a:hover,.section-2 .div-block-10>a:focus-visible{background-color:var(--black-700)}
.section-2 .div-block-10>a:hover .text-block-11,.section-2 .div-block-10>a:focus-visible .text-block-11{color:var(--light-text)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.section-2 .div-block-10>a:hover{transform:translateY(-4px)}}
@media screen and (max-width:767px){.section-2 .div-block-10>a{padding:28px 44px}}
@keyframes wof-card-reveal{from{opacity:0;translate:0 80px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.section-2 .div-block-10>a{animation:wof-card-reveal linear both;animation-timeline:view();animation-range:entry 0% cover 35%}}}
/* Phones and small tablets (added 2026-11-12). Images and looping videos in project texts are capped at 60 %
   of the column by Webflow (.w-richtext figure), which leaves them about 160 px wide on an iPhone: let them
   use the full column below 768 px. Desktop is unchanged.
   The same for the two YouTube embeds on CN Tower (60 % wide, height from an inline padding-bottom: back to
   16:9 at full width) and the floated loop on CN Tower (no float, so the text is not squeezed beside it). */
@media screen and (max-width:767px){.w-richtext figure.w-richtext-align-normal{max-width:100%}.w-richtext figure.w-richtext-align-normal.w-richtext-figure-type-video{width:100%;padding-bottom:56.25%!important}.w-richtext figure.w-richtext-align-floatleft{float:none;max-width:100%;margin-right:0}}
/* Bigger touch targets without moving anything: an invisible hit area around the footer links (IG, FB, LN,
   (c) WORKSOFAR: 12-15 px tall) and the menu button (30x23 px), close to the 44 px Apple recommends.
   The 20 px gap between the social links is split between neighbours, so their areas do not overlap. */
.social-link,.footer-bottom .text-link{position:relative}
.social-link::after{content:"";position:absolute;inset:-15px -10px}
.footer-bottom .text-link::after{content:"";position:absolute;inset:-15px -8px}
.menu-button-2::after{content:"";position:absolute;inset:-10px -12px}
/* Mobile menu button: while the menu is open (Webflow adds w--open to the button), the three bars (an
   <img>) turn and fade out and a white X (an inline SVG on ::before) turns and fades in, so the button
   reads as "close" (added 2026-11-12). Without motion it simply swaps. */
.menu-button-2 .image-4{transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.menu-button-2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:rotate(-90deg) scale(.5);transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .25s ease;background:no-repeat center/auto 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5L19 19M19 5L5 19' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.menu-button-2.w--open .image-4{opacity:0;transform:rotate(90deg) scale(.5)}
.menu-button-2.w--open::before{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.menu-button-2 .image-4,.menu-button-2::before{transition:none}}