@layer components{.pic{display:block;position:relative;background-image:var(--lqip);background-size:cover;background-position:center}.pic img{display:block;width:100%;height:auto}.work{padding-block:clamp(var(--s-9),12vw,var(--s-10));padding-inline:clamp(var(--s-4),6vw,var(--s-10));background:var(--bg)}.work__head{max-inline-size:40ch;margin-block-end:var(--s-7)}.work__eyebrow{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.14em;color:var(--text-faint);margin-block-end:var(--s-4)}.work__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-3);line-height:var(--leading-display);letter-spacing:-0.02em;text-transform:uppercase;text-wrap:balance;color:var(--text-muted)}.work__title em{font-style:normal;color:var(--accent)}.work__more{margin-block-start:var(--s-7)}.beforeafter{margin:0 0 var(--s-9);max-inline-size:min(100%,920px)}.beforeafter__stage{--pos:50%;position:relative;inline-size:100%;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-2);background:var(--surface-1);isolation:isolate;touch-action:pan-y}.beforeafter__after,.beforeafter__before{position:absolute;inset:0}.beforeafter__after .pic,.beforeafter__before .pic{position:absolute;inset:0;height:100%}.beforeafter__after img,.beforeafter__before img{width:100%;height:100%;object-fit:cover}.beforeafter__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.beforeafter__tag{position:absolute;top:var(--s-3);z-index:2;padding:var(--s-1) var(--s-2);font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.1em;text-transform:uppercase;color:var(--text);background:color-mix(in srgb,var(--bg) 65%,transparent);border-radius:var(--r-1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.beforeafter__tag--before{left:var(--s-3)}.beforeafter__tag--after{right:var(--s-3)}.beforeafter__range{position:absolute;inset:0;z-index:3;inline-size:100%;block-size:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize;touch-action:pan-y}.beforeafter__range:focus{outline:none}.beforeafter__range::-webkit-slider-runnable-track{background:transparent;height:100%}.beforeafter__range::-moz-range-track{background:transparent;height:100%}.beforeafter__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:48px;height:1200px;background:transparent;cursor:ew-resize}.beforeafter__range::-moz-range-thumb{width:48px;height:1200px;border:0;background:transparent;cursor:ew-resize}.beforeafter__divider{position:absolute;inset-block:0;left:var(--pos);z-index:2;width:2px;transform:translateX(-1px);background:color-mix(in srgb,var(--text) 75%,transparent);pointer-events:none}.beforeafter__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);inline-size:var(--s-7);block-size:var(--s-7);display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-2)}.beforeafter__grip::before{content:"\2039\2009\203A";font-weight:700}.beforeafter__range:focus-visible ~ .beforeafter__divider .beforeafter__grip{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--accent),var(--shadow-2)}@media (prefers-reduced-motion:no-preference){.beforeafter__grip.is-teaching{animation:ba-teach var(--dur-base) var(--ease-tactile) 2}@keyframes ba-teach{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}}.beforeafter__controls{display:flex;gap:var(--s-3);margin-block-start:var(--s-4)}.beforeafter__btn{min-block-size:44px;padding:var(--s-2) var(--s-5);border:1px solid var(--hairline);border-radius:var(--r-2);background:transparent;color:var(--text);font-family:var(--font-sans);font-size:var(--step--1);letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;transition:background-color var(--dur-1) var(--ease-out)}.beforeafter__btn:hover{background:var(--surface-2)}.gallery-ba{margin-block-end:clamp(var(--s-8),10vw,var(--s-9))}.gallery-ba__title{font-size:var(--step-2);margin-block-start:var(--s-2)}.gallery-ba__hint{margin-block:var(--s-3) var(--s-6);max-inline-size:60ch;color:var(--text-muted);font-size:var(--step--1)}.gallery-ba__pairs{display:grid;grid-template-columns:1fr;gap:var(--s-6)}@media (min-width:900px){.gallery-ba__pairs{grid-template-columns:1fr 1fr;align-items:start}}.gallery-ba .beforeafter{margin:0;max-inline-size:100%}.gallery__radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}.gallery__tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-end:var(--s-6)}.gallery__tabs label{display:inline-flex;align-items:center;gap:var(--s-1);min-block-size:48px;padding:var(--s-2) var(--s-4);border:1px solid var(--hairline);border-radius:var(--r-2);font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}.gallery__tabs label:hover{color:var(--text)}.gallery__tabs label:active{transform:scale(0.97)}.gallery__tab-n{font-variant-numeric:tabular-nums}#gf-all:checked ~ .gallery__tabs label[for="gf-all"],#gf-exterior:checked ~ .gallery__tabs label[for="gf-exterior"],#gf-interior:checked ~ .gallery__tabs label[for="gf-interior"],#gf-marine:checked ~ .gallery__tabs label[for="gf-marine"],#gf-before-after:checked ~ .gallery__tabs label[for="gf-before-after"],#gf-correction:checked ~ .gallery__tabs label[for="gf-correction"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}#gf-all:focus-visible ~ .gallery__tabs label[for="gf-all"],#gf-exterior:focus-visible ~ .gallery__tabs label[for="gf-exterior"],#gf-interior:focus-visible ~ .gallery__tabs label[for="gf-interior"],#gf-marine:focus-visible ~ .gallery__tabs label[for="gf-marine"],#gf-before-after:focus-visible ~ .gallery__tabs label[for="gf-before-after"],#gf-correction:focus-visible ~ .gallery__tabs label[for="gf-correction"]{outline:2px solid var(--accent);outline-offset:2px}.gallery__grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}.page-gallery .gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:560px){.page-gallery .gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:900px){.page-gallery .gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.tile--rh{display:none}.gallery__grid--showcase{gap:var(--s-5);grid-template-columns:repeat(2,1fr)}@media (min-width:600px){.gallery__grid--showcase{gap:var(--s-6)}}@media (min-width:900px){.gallery__grid--showcase{grid-template-columns:repeat(4,1fr)}}.tile__fig{overflow:hidden;transition:border-color var(--dur-base) var(--ease-tactile),box-shadow var(--dur-base) var(--ease-tactile),transform var(--dur-base) var(--ease-tactile)}.tile__fig img{transition:transform var(--dur-reveal) var(--ease-tactile);transform-origin:center}.tile:hover .tile__fig,.tile:focus-within .tile__fig{border-color:var(--tactile-border);box-shadow:var(--shadow-2)}.tile__link:active .tile__fig{transform:scale(0.98);border-color:var(--tactile-border)}@media (prefers-reduced-motion:no-preference){.tile:hover .tile__fig,.tile:focus-within .tile__fig{transform:translateY(var(--lift))}.tile:hover .tile__fig img,.tile:focus-within .tile__fig img{transform:scale(var(--img-zoom))}}#gf-all:checked ~ .gallery__grid .tile:not([data-cat~="all"]),#gf-exterior:checked ~ .gallery__grid .tile:not([data-cat~="exterior"]),#gf-interior:checked ~ .gallery__grid .tile:not([data-cat~="interior"]),#gf-marine:checked ~ .gallery__grid .tile:not([data-cat~="marine"]),#gf-before-after:checked ~ .gallery__grid .tile:not([data-cat~="before-after"]),#gf-correction:checked ~ .gallery__grid .tile:not([data-cat~="correction"]){display:none}.tile{margin:0}.tile__fig{position:relative;margin:0;aspect-ratio:4 / 3;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-2);background:var(--surface-1)}.tile__fig .pic{position:absolute;inset:0;height:100%}.tile__fig img{width:100%;height:100%;object-fit:cover}.tile__cap{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--s-4) var(--s-3) var(--s-3);font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:0.03em;color:var(--text);background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 88%,transparent))}.tile__ctx{color:var(--text-faint)}@media (hover:hover) and (pointer:fine){.tile__cap{opacity:0;transform:translateY(8px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}.tile:hover .tile__cap,.tile:focus-within .tile__cap{opacity:1;transform:none}}}