/* RAM-ART
   Layout: svijetli zid galerije; fotografije stoje u paspartuu (.mat) sa zlatnom
   linijom i bijelim kosim rezom; tamni orah za citat, istaknutu uslugu i podnožje,
   bordo pliš za pozive na akciju. Ugao pod 45° (.eyebrow) je ponavljajući motiv. */
/* Self-hosted Google Fonts (SIL OFL, see fonts/OFL.txt); Figtree is variable 400–600 */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/marcellus-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/marcellus-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f6f4ef;
  --wall: #ece7de;
  --sheet: #fcfbf8;
  --walnut: #2a201b;
  --walnut-2: #3b2e27;
  --muted: #6c6158;
  --line: #dcd4c8;
  --plis: #7b1e2c;
  --plis-dark: #5d1520;
  --gilt: #b08a3e;
  --on-dark: #f1ece3;
  --on-dark-muted: #c9bfb2;
  --display: "Marcellus", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--walnut); font: 400 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--plis); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--plis-dark); }
:focus-visible { outline: 2px solid var(--plis); outline-offset: 3px; }
h1, h2, h3, .h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(38px, 5.4vw, 68px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3, .h3 { font-size: 22px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
svg { flex: none; }

/* Page changes: the header stays put while the page fades and rises a little. Browsers
   without cross-document view transitions just load the page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .2s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Entrances. site.js adds .rv (fade and rise) to things below the fold and .dr (draw) to
   gilt lines, then .in when they scroll into view; --i staggers what arrives together.
   Without JS (or with reduced motion) none of these classes are set. */
.rv:not(.in) { opacity: 0; }
.rv.in { animation: rise .7s var(--ease) calc(var(--i, 0) * 80ms) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rule { from { background-size: 0 1.5px; } }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--sheet); padding: 8px 12px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 12px; height: 12px; flex: none; background: linear-gradient(var(--gilt), var(--gilt)) 0 0 / 12px 1.5px no-repeat, linear-gradient(var(--gilt), var(--gilt)) 0 0 / 1.5px 12px no-repeat; }
.eyebrow.dr:not(.in)::before { background-size: 0 1.5px, 1.5px 0; }
.eyebrow.in::before { animation: corner .8s var(--ease) calc(var(--i, 0) * 80ms) both; }
@keyframes corner { 0% { background-size: 0 1.5px, 1.5px 0; } 50% { background-size: 12px 1.5px, 1.5px 0; } 100% { background-size: 12px 1.5px, 1.5px 12px; } }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--walnut-2); max-width: 58ch; }
.note { font-size: 15px; color: var(--muted); }
.center { text-align: center; }
.more { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.more::after { content: "→"; transition: transform .2s; }
.more:hover::after { transform: translateX(3px); }

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border: 1.5px solid var(--plis); border-radius: 2px; background: var(--plis); color: #fff; font: 600 16px/1.2 var(--sans); text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .12s; }
/* Two gilt corners, the eyebrow mark, slide into place on hover or keyboard focus */
.btn::before, .btn::after { content: ""; position: absolute; width: 9px; height: 9px; border: 0 solid var(--gilt); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.btn::before { top: -6px; left: -6px; border-width: 1.5px 0 0 1.5px; transform: translate(4px, 4px); }
.btn::after { bottom: -6px; right: -6px; border-width: 0 1.5px 1.5px 0; transform: translate(-4px, -4px); }
@media (hover: hover) { .btn:hover::before, .btn:hover::after { opacity: 1; transform: none; } }
.btn:focus-visible::before, .btn:focus-visible::after { opacity: 1; transform: none; }
.btn:active { transform: scale(.98); }
.btn:hover { background: var(--plis-dark); border-color: var(--plis-dark); color: #fff; }
.btn.ghost { background: transparent; color: var(--walnut); border-color: var(--walnut); }
.btn.ghost:hover { background: var(--walnut); color: var(--paper); }
.btn.small { padding: 9px 14px; font-size: 15px; }
.btn svg, .actionbar svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.btn svg path[d^="m12 2.8"] { fill: currentColor; stroke: none; }
.btn svg .fill, .actionbar svg .fill { fill: currentColor; stroke: none; }

/* Header */
/* site.js adds .slim once the page is scrolled: lower, with a hairline and soft shadow */
.header { position: sticky; top: 0; z-index: 20; background: rgba(246, 244, 239, .94); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px); transition: border-color .35s, box-shadow .35s; view-transition-name: header; }
.header.slim { border-bottom-color: var(--line); box-shadow: 0 12px 24px -22px rgba(42, 32, 27, .55); }
.nav { display: flex; align-items: center; gap: 28px; min-height: 72px; transition: min-height .35s var(--ease); }
.header.slim .nav { min-height: 60px; }
.logo, .logo:hover { color: var(--plis-dark); display: block; line-height: 0; }
.logo svg { height: 36px; width: auto; transition: height .35s var(--ease); }
.header.slim .logo svg { height: 31px; }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { position: relative; color: var(--walnut); text-decoration: none; font-weight: 500; padding: 6px 0; }
.links a:hover { color: var(--walnut); }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--gilt); transform: scaleX(0); transition: transform .3s var(--ease); }
.links a:hover::after, .links a[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 1.5px solid var(--walnut); border-radius: 2px; padding: 8px 12px; font: 600 15px var(--sans); color: var(--walnut); cursor: pointer; }
.menu-btn i { width: 16px; height: 10px; border-top: 1.5px solid; border-bottom: 1.5px solid; position: relative; }
.menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; top: 2.75px; border-top: 1.5px solid; }

@media (max-width: 920px) {
  .nav { gap: 14px; min-height: 64px; }
  .logo svg { height: 30px; }
  .call { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px var(--gutter-r) 18px var(--gutter); box-shadow: 0 18px 30px -20px rgba(42, 32, 27, .4); }
  .links.open { display: flex; }
  .links a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 19px; font-family: var(--display); }
  .links a::after { display: none; }
  .links a[aria-current="page"] { border-bottom-color: var(--gilt); }
  .links li:last-child a { border-bottom: 0; }
  .header.slim .nav { min-height: 56px; }
  .header.slim .logo svg { height: 27px; }
}
@media (max-width: 480px) { .call span { display: none; } .call { padding: 9px 11px; } }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 104px); }
.section.flush { padding-top: 0; }
.tint { background: var(--wall); }
.dark { background: var(--walnut); color: var(--on-dark); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 720px; }
.sec-head p:not(.eyebrow) { color: var(--walnut-2); font-size: 18px; }
.split-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.split-head .sec-head { margin-bottom: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.two-col.top { align-items: start; }
.two-col.reverse > :first-child { order: 2; }
.prose { display: grid; gap: 18px; align-content: start; min-width: 0; }
.prose p { max-width: 62ch; }
.prose h2 + p { margin-top: 2px; }
.prose p + h2 { margin-top: 22px; }
.prose.narrow { max-width: 720px; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col.reverse > :first-child { order: 0; }
}

/* Paspartu frame */
.mat { margin: 0; background: var(--sheet); padding: clamp(14px, 2.6vw, 30px); border: 1px solid var(--line); outline: 1px solid var(--gilt); outline-offset: -7px; box-shadow: 0 22px 40px -28px rgba(42, 32, 27, .55); justify-self: center; max-width: 100%; }
.mat-in { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); background: var(--wall); }
.mat-in img { width: 100%; }
.mat figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); letter-spacing: .02em; text-align: center; }
.dark .mat { background: #f3efe7; border-color: transparent; }

/* Home */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); position: relative; overflow: hidden; isolation: isolate; }
.hero-frames { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* site.js places each frame in free space (--x, --y) and fades it in (.in). One breath is
   2 × --d: grow while fading a little, pause, shrink back, pause. */
.hero-frames span { position: absolute; left: var(--x, -999px); top: var(--y, 0); width: var(--w); aspect-ratio: var(--ar); color: transparent; border: 1px solid currentColor; translate: -50% -50%; transition: color 1.6s ease; animation: breathe calc(var(--d) * 2) ease-in-out var(--delay) infinite; }
.hero-frames span.in { color: var(--line); }
.hero-frames span:nth-child(1) { --w: 170px; --ar: 1; --d: 9.4s; --delay: -0s; }
.hero-frames span:nth-child(2) { --w: 58px; --ar: 1; --d: 6.1s; --delay: -2.3s; }
.hero-frames span:nth-child(3) { --w: 92px; --ar: 4 / 5; --d: 7.7s; --delay: -4.6s; }
.hero-frames span:nth-child(4) { --w: 30px; --ar: 1; --d: 5s; --delay: -1.9s; }
.hero-frames span:nth-child(5) { --w: 130px; --ar: 3 / 4; --d: 10.5s; --delay: -9.2s; }
.hero-frames span:nth-child(6) { --w: 190px; --ar: 1; --d: 11.6s; --delay: -11.5s; }
.hero-frames span:nth-child(7) { --w: 86px; --ar: 4 / 5; --d: 7.2s; --delay: -6.6s; }
.hero-frames span:nth-child(8) { --w: 84px; --ar: 3 / 4; --d: 8.8s; --delay: -7.3s; }
.hero-frames span:nth-child(9) { --w: 56px; --ar: 1; --d: 6.6s; --delay: -5.2s; }
.hero-frames span:nth-child(10) { --w: 38px; --ar: 1; --d: 5.5s; --delay: -4.2s; }
.hero-frames .gilt.in { color: rgba(176, 138, 62, .38); }
.hero-frames .nest::before { content: ""; position: absolute; inset: 13%; border: 1px solid currentColor; }
@keyframes breathe { 0%, 8% { scale: .8; opacity: 1; } 44%, 58% { scale: 1.15; opacity: .55; } 94%, 100% { scale: .8; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-frames span { animation: none; } }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-text { display: grid; gap: 22px; }
.hero-text .btns { margin-top: 6px; }
.hero-art { margin: 0; justify-self: center; }
.hero-art img { width: min(520px, 100%); filter: drop-shadow(0 26px 30px rgba(42, 32, 27, .28)); }
/* Four gilt corners around the photo (added by site.js). On the first visit of a session
   .join slides them in and extends their arms until they meet, like a mitred frame, and
   .intro raises the headline word by word and fades in the rest. */
.hero-pic { display: block; position: relative; }
.hero-pic .c { position: absolute; width: calc(50% + 14px); height: calc(50% + 14px); border: 0 solid var(--gilt); pointer-events: none; }
.hero-pic .tl { top: -14px; left: -14px; border-width: 1.5px 0 0 1.5px; }
.hero-pic .tr { top: -14px; right: -14px; border-width: 1.5px 1.5px 0 0; }
.hero-pic .bl { bottom: -14px; left: -14px; border-width: 0 0 1.5px 1.5px; }
.hero-pic .br { bottom: -14px; right: -14px; border-width: 0 1.5px 1.5px 0; }
.hero.join .c { animation: 1.1s var(--ease) .7s both; }
.hero.join .tl { animation-name: join-tl; }
.hero.join .tr { animation-name: join-tr; }
.hero.join .bl { animation-name: join-bl; }
.hero.join .br { animation-name: join-br; }
@keyframes join-tl { 0% { opacity: 0; transform: translate(-18px, -18px); clip-path: inset(0 88% 88% 0); } 40% { opacity: 1; transform: none; clip-path: inset(0 88% 88% 0); } 100% { clip-path: inset(0); } }
@keyframes join-tr { 0% { opacity: 0; transform: translate(18px, -18px); clip-path: inset(0 0 88% 88%); } 40% { opacity: 1; transform: none; clip-path: inset(0 0 88% 88%); } 100% { clip-path: inset(0); } }
@keyframes join-bl { 0% { opacity: 0; transform: translate(-18px, 18px); clip-path: inset(88% 88% 0 0); } 40% { opacity: 1; transform: none; clip-path: inset(88% 88% 0 0); } 100% { clip-path: inset(0); } }
@keyframes join-br { 0% { opacity: 0; transform: translate(18px, 18px); clip-path: inset(88% 0 0 88%); } 40% { opacity: 1; transform: none; clip-path: inset(88% 0 0 88%); } 100% { clip-path: inset(0); } }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .1em; margin-block: -.1em; }
.hero h1 .w > span { display: inline-block; }
.hero.intro h1 .w > span { animation: word .9s var(--ease) calc(var(--i) * 70ms) both; }
@keyframes word { from { transform: translateY(110%); } }
.hero.intro .hero-text > :not(h1) { animation: rise .7s var(--ease) .35s both; }
.hero.intro .hero-text > .lead { animation-delay: .5s; }
.hero.intro .hero-text > .btns { animation-delay: .62s; }
.hero.intro .hero-art figcaption { animation: fade .6s 1.6s both; }
.hero-art figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; letter-spacing: .02em; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; margin-top: clamp(40px, 6vw, 64px); }
/* The gilt rules above the numbers and the timeline items draw from left to right (.dr) */
.facts li, .timeline li { background: linear-gradient(var(--gilt), var(--gilt)) 0 0 / 100% 1.5px no-repeat; }
.dr:not(.in) > li { background-size: 0 1.5px; }
.dr.in > li { animation: rule .9s var(--ease) both; }
.dr.in > li:nth-child(2) { animation-delay: .12s; }
.dr.in > li:nth-child(3) { animation-delay: .24s; }
.dr.in > li:nth-child(4) { animation-delay: .36s; }
.dr.in > li:nth-child(5) { animation-delay: .48s; }
.facts li { padding-top: 14px; display: grid; gap: 2px; }
.facts strong { font: 400 clamp(30px, 3.4vw, 42px)/1 var(--display); justify-self: start; }
/* The numbers are written in one after another (.write, set by site.js): a soft edge moves
   across each like a nib, and its rule draws beneath it at the same pace. site.js sets
   --w-delay and --w-dur per item. */
.facts.write strong { -webkit-mask: linear-gradient(90deg, #000 42%, transparent 58%) 0 0 / 260% 100% no-repeat; mask: linear-gradient(90deg, #000 42%, transparent 58%) 0 0 / 260% 100% no-repeat; }
.facts.write:not(.in) strong { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.facts.write.in strong { animation: write var(--w-dur) cubic-bezier(.45, .05, .35, 1) var(--w-delay) both; }
.facts.write.in > li { animation: rule var(--w-dur) var(--ease) var(--w-delay) both; }
@keyframes write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.facts span { color: var(--muted); font-size: 15px; }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-art img { width: min(420px, 86vw); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: end; }
.pair .mat { padding: clamp(10px, 1.8vw, 20px); outline-offset: -5px; }
.pair.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.project-photos { margin-top: clamp(32px, 5vw, 56px); gap: clamp(18px, 3vw, 36px); }
/* The featured stretcher next to a 180 cm figure; it draws itself in when seen (.dr/.in) */
.scale { margin: 10px 0 0; max-width: 500px; }
.scale svg { width: 100%; height: auto; display: block; overflow: visible; }
.scale text { font: 500 13px var(--sans); fill: var(--muted); }
.scale .big { font: 400 16px var(--display); fill: var(--walnut); }
@media (max-width: 560px) { .scale text { font-size: 17px; } .scale .big { font-size: 20px; } }
.scale figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); letter-spacing: .02em; }
.s-floor { stroke: var(--line); stroke-width: 1.5; }
.s-person { fill: var(--plis); opacity: .85; }
.s-frame { fill: none; stroke: var(--walnut); stroke-width: 2.2; }
.s-brace { fill: none; stroke: var(--walnut-2); stroke-width: 1; opacity: .7; }
.s-dim { fill: none; stroke: var(--muted); stroke-width: 1; }
.scale.dr:not(.in) :is(.s-frame, .s-brace, .s-dim) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scale.dr:not(.in) :is(.s-person, text) { opacity: 0; }
.scale.in .s-person { animation: fade .5s both; }
.scale.in .d1 { animation: line .5s var(--ease) .2s both; }
.scale.in .t1 { animation: fade .5s .5s both; }
.scale.in .s-frame { animation: line 1.3s var(--ease) .4s both; }
.scale.in .s-brace { animation: line .9s var(--ease) 1.1s both; }
.scale.in .d2 { animation: line .6s var(--ease) 1.5s both; }
.scale.in .t2 { animation: fade .5s 1.8s both; }
.scale.in .d3 { animation: line .6s var(--ease) 1.7s both; }
.scale.in .t3 { animation: fade .5s 2s both; }
@keyframes line { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@media (max-width: 560px) { .pair.even { grid-template-columns: minmax(0, 1fr); } }

.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.service-card { display: grid; gap: 10px; color: var(--walnut); text-decoration: none; }
.service-card .thumb, .feature .thumb { display: block; overflow: hidden; background: var(--paper); aspect-ratio: 4 / 3; }
.service-card img, .feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.service-card:hover img, .feature:hover img { transform: scale(1.03); }
.service-card h3 { margin-top: 6px; }
.service-card p { color: var(--walnut-2); font-size: 16px; }
.service-card:hover { color: var(--walnut); }
.service-card:hover h3 { color: var(--plis); }
.feature { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--walnut); color: var(--on-dark); text-decoration: none; }
.feature .thumb { aspect-ratio: auto; height: 100%; min-height: 260px; }
.feature-text { display: grid; gap: 14px; padding: clamp(24px, 4vw, 48px); align-content: center; }
.feature-text .eyebrow { color: var(--on-dark-muted); }
.feature-text .h3 { font-size: clamp(26px, 3vw, 36px); }
.feature-text .more { color: #fff; }
.feature:hover { color: var(--on-dark); }
.center .btn { margin-top: 40px; }
@media (max-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .thumb { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 560px) { .service-grid { grid-template-columns: minmax(0, 1fr); } }

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 6px; }
.points dt { font-weight: 600; margin-bottom: 4px; }
.points dd { color: var(--walnut-2); font-size: 16px; }
@media (max-width: 560px) { .points { grid-template-columns: minmax(0, 1fr); } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; border-top: 1.5px solid var(--walnut); padding-top: 18px; }
.steps li::before { content: counter(step); font: 400 44px/1 var(--display); color: var(--gilt); }
/* When the steps sit in one row site.js adds .track: one line runs through them and fills
   with --p as the section scrolls past, and each step turns gold (.on) when it is reached. */
.steps.track { position: relative; }
.steps.track::before, .steps.track::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--line); }
.steps.track::after { background: var(--gilt); transform-origin: left; transform: scaleX(var(--p, 0)); }
.steps.track li { border-top-color: transparent; position: relative; }
.steps.track li::before { color: var(--line); transition: color .4s; }
.steps.track li::after { content: ""; position: absolute; z-index: 1; top: -5.25px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--wall); border: 1.5px solid var(--line); transition: background .3s, border-color .3s; }
.steps.track li.on::before { color: var(--gilt); }
.steps.track li.on::after { background: var(--gilt); border-color: var(--gilt); }
.steps h3 { font-size: 21px; }
.steps p { color: var(--walnut-2); font-size: 16px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Works */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 36px 24px; }
.work-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work a { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--wall); padding: 8%; }
.tint .work a { background: var(--paper); }
.work img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(42, 32, 27, .28)); transition: transform .3s ease; }
.work a:hover img { transform: translateY(-3px); }
/* Gallery light: on hover a band of warm light crosses the work once. It is masked to the
   photo (site.js sets --shape to the photo's URL and adds .lit), so it never spills onto
   the wall around it. */
.work a { position: relative; }
.work a.lit::after { content: ""; position: absolute; inset: 0; padding: 8%; pointer-events: none; -webkit-mask: var(--shape) center / contain no-repeat content-box; mask: var(--shape) center / contain no-repeat content-box; background: linear-gradient(110deg, transparent 38%, rgba(255, 244, 214, .42) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat content-box; mix-blend-mode: screen; transition: transform .3s ease; }
@media (hover: hover) { .work a.lit:hover::after { background-position: 0 0; transform: translateY(-3px); transition: background-position 1.1s var(--ease), transform .3s ease; } }
.work-grid { position: relative; }
.work.ghost { position: absolute; margin: 0; pointer-events: none; }
.label { margin-top: 12px; display: grid; gap: 2px; }
.label strong { font-weight: 600; }
.label span { font-size: 14px; color: var(--muted); }
.work[hidden] { display: none; }
@media (max-width: 900px) { .work-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .work-grid.three { grid-template-columns: minmax(0, 1fr); }
  .gallery .label span { font-size: 13px; }
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters[hidden] { display: none; }
.filters button { font: 500 15px var(--sans); color: var(--walnut); background: transparent; border: 1.5px solid var(--line); border-radius: 99px; padding: 8px 16px; cursor: pointer; }
.filters button:hover { border-color: var(--walnut); }
.filters button[aria-pressed="true"] { background: var(--walnut); border-color: var(--walnut); color: var(--paper); }
.insta { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); max-height: 94vh; overflow: visible; touch-action: pan-y pinch-zoom; }
.lightbox::backdrop { background: rgba(24, 18, 15, .88); }
.lightbox figure { margin: 0; display: grid; gap: 14px; justify-items: center; }
.lightbox img { max-height: 80vh; width: auto; }
.lightbox figcaption { color: var(--on-dark); text-align: center; display: grid; gap: 2px; }
.lightbox figcaption span { color: var(--on-dark-muted); font-size: 15px; }
.lightbox button { position: absolute; background: rgba(246, 244, 239, .12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(246, 244, 239, .25); }
.lightbox .count { position: fixed; top: max(24px, env(safe-area-inset-top, 0px)); left: max(20px, env(safe-area-inset-left, 0px)); margin: 0; color: var(--on-dark-muted); font-size: 14px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.lightbox .close { top: -8px; right: -8px; position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.lightbox .prev, .lightbox .next { top: 40%; }
.lightbox .prev { left: -64px; }
.lightbox .next { right: -64px; }
@media (max-width: 900px) {
  .lightbox .prev, .lightbox .next { top: auto; bottom: -60px; }
  .lightbox .prev { left: calc(50% - 56px); }
  .lightbox .next { right: calc(50% - 56px); }
  .lightbox img { max-height: 70vh; }
}

/* Quote */
.quote { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.quote blockquote { margin: 0; display: grid; gap: 22px; }
.quote blockquote p { font: 400 clamp(24px, 2.7vw, 34px)/1.35 var(--display); }
.quote footer { color: var(--on-dark-muted); }
.quote footer strong { color: var(--on-dark); font-weight: 600; }
@media (max-width: 760px) { .quote { grid-template-columns: minmax(0, 1fr); } .quote .mat { max-width: 260px; } }

/* Reviews */
.rating { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; }
.rating strong { font: 400 32px/1 var(--display); }
.stars { display: inline-flex; gap: 2px; color: var(--gilt); }
.stars svg { fill: currentColor; }
.rating .stars.dr:not(.in) svg { opacity: 0; }
.rating .stars.in svg { animation: star .5s var(--ease) .1s both; }
.rating .stars.in svg:nth-child(2) { animation-delay: .21s; }
.rating .stars.in svg:nth-child(3) { animation-delay: .32s; }
.rating .stars.in svg:nth-child(4) { animation-delay: .43s; }
.rating .stars.in svg:nth-child(5) { animation-delay: .54s; }
@keyframes star { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px; }
.review { background: var(--sheet); border: 1px solid var(--line); padding: 26px 28px; display: grid; gap: 14px; align-content: start; }
.review blockquote { margin: 0; }
.review blockquote p { font-size: 17px; }
.review .who { font-size: 15px; color: var(--muted); }
.review .who strong { color: var(--walnut); }
@media (max-width: 760px) { .review-grid { grid-template-columns: minmax(0, 1fr); } }

.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.band > div { display: grid; gap: 14px; max-width: 640px; }

/* Closing call to action */
.cta { background: var(--plis); color: #fff; }
.cta-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px 80px; align-items: center; }
.cta-in > div { display: grid; gap: 18px; }
.cta p { max-width: 54ch; }
.cta .btn { background: var(--paper); color: var(--plis-dark); border-color: var(--paper); }
.cta .btn:hover { background: #fff; border-color: #fff; color: var(--plis-dark); }
.cta .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.cta .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.cta .btn::before, .cta .btn::after { border-color: rgba(255, 255, 255, .8); }
.cta a:not(.btn) { color: #fff; }
.cta .note { color: rgba(255, 255, 255, .78); }
.cta-info { border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 32px; }
@media (max-width: 900px) { .cta-in { grid-template-columns: minmax(0, 1fr); } .cta-info { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 24px; } }

.hours { display: grid; gap: 4px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; max-width: 320px; }
.hours dd { font-variant-numeric: tabular-nums; }

/* Inner pages */
.page-head { padding-block: clamp(44px, 7vw, 88px) clamp(36px, 5vw, 56px); }
.page-head .wrap { display: grid; gap: 18px; }
.page-head h1 { max-width: 16ch; }


.service { padding-block: clamp(44px, 6vw, 72px); border-top: 1px solid var(--line); }
.photo { margin: 0; max-width: 460px; justify-self: center; }
.photo.wide { max-width: 560px; }
.photo img, .photo video { width: 100%; box-shadow: 0 22px 40px -28px rgba(42, 32, 27, .55); }
.photo.is-video { max-width: 320px; }
.photo video { display: block; height: auto; background: var(--wall); }
.photo figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); letter-spacing: .02em; text-align: center; }
.service.text-only .prose { max-width: 760px; }
.fits { color: var(--walnut-2); font-size: 16px; }

.faq { margin-top: 18px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
/* A gilt plus that turns into a minus; site.js slides the answer open and closed and marks
   a closing item with .closing until it has collapsed. */
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.5px; margin-top: -.75px; background: var(--gilt); transition: transform .35s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open]:not(.closing) summary::after { transform: none; }
.faq details p { padding-bottom: 18px; color: var(--walnut-2); max-width: 62ch; overflow: hidden; }

.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.timeline li { padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.timeline h3 { font-size: 22px; }
.timeline p { color: var(--walnut-2); font-size: 16px; }
@media (max-width: 1100px) { .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .timeline { grid-template-columns: minmax(0, 1fr); } }

.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.person { display: grid; gap: 22px; align-content: start; }
.person .mat { padding: 14px; outline-offset: -5px; justify-self: stretch; }
.person .mat-in img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 25%; }
.person > div { display: grid; gap: 6px; }
.role { color: var(--muted); font-size: 15px; letter-spacing: .02em; }
@media (max-width: 760px) { .people { grid-template-columns: minmax(0, 1fr); max-width: 380px; } }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.values dt { font: 400 22px/1.2 var(--display); margin-bottom: 8px; }
.values dd { color: var(--walnut-2); font-size: 16px; }
@media (max-width: 760px) { .values { grid-template-columns: minmax(0, 1fr); } }

.anatomy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.anatomy svg { width: 100%; max-width: 560px; height: auto; }
.anatomy text { font: 500 15px var(--sans); fill: var(--walnut); }
.anatomy .a-n { font-size: 13px; fill: var(--gilt); font-weight: 600; }
.a-frame { fill: var(--walnut-2); }
.a-glass { fill: rgba(150, 182, 190, .22); stroke: #7f9aa5; stroke-width: 1.2; }
.a-shine { stroke: #fff; stroke-width: 2; fill: none; }
.a-mat { fill: var(--sheet); stroke: var(--line); stroke-width: 1.2; }
.a-art { fill: var(--plis); opacity: .85; }
.a-board { fill: #efe9df; stroke: var(--line); stroke-width: 1.2; }
.a-back { fill: #cdbfae; stroke: var(--walnut-2); stroke-width: 1.2; }
.a-hook { stroke: var(--walnut); stroke-width: 2; fill: none; }
.a-line { stroke: var(--muted); stroke-dasharray: 2 3; fill: none; }
.layers { display: grid; gap: 16px; counter-reset: layer; }
.layers li { counter-increment: layer; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; }
.layers li::before { content: counter(layer); grid-row: span 2; font: 400 22px/1.1 var(--display); color: var(--gilt); }
.layers h3 { font: 600 17px/1.3 var(--sans); }
.layers p { color: var(--walnut-2); font-size: 16px; }
/* The layers start stacked as a finished frame and lift apart when seen (.dr/.in); pointing
   at a layer or its description highlights both (.focus/.on, set by site.js). */
.a-layer[data-l="0"] { --c: 110px; }
.a-layer[data-l="1"] { --c: 66px; }
.a-layer[data-l="2"] { --c: 22px; }
.a-layer[data-l="3"] { --c: -22px; }
.a-layer[data-l="4"] { --c: -66px; }
.a-layer[data-l="5"] { --c: -110px; }
.anatomy.dr:not(.in) .a-layer { transform: translateY(var(--c)); }
.anatomy.dr:not(.in) .a-label { opacity: 0; }
.anatomy.in .a-layer { animation: a-open 1.3s var(--ease) .15s both; }
.anatomy.in .a-label { animation: fade .5s 1.1s both; }
@keyframes a-open { from { transform: translateY(var(--c)); } }
.a-layer { transition: opacity .25s; }
.anatomy svg.focus .a-layer:not(.on) { opacity: .22; }
.layers h3 { transition: color .2s; }
.layers li.on h3 { color: var(--plis); }
@media (max-width: 900px) { .anatomy { grid-template-columns: minmax(0, 1fr); } }

.table { overflow-x: auto; background: var(--sheet); border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 560px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
tbody th { font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }


.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { background: var(--sheet); border: 1px solid var(--line); padding: 28px; display: grid; gap: 14px; align-content: start; }
.card h2 { font-size: 24px; }
.card .big { font-size: 20px; }
.card .big a { color: var(--walnut); text-decoration: none; font-family: var(--display); font-size: 28px; }
.card .btns .btn { padding: 10px 14px; font-size: 15px; }
.links-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 1000px) { .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .contact { grid-template-columns: minmax(0, 1fr); } }

.notfound .wrap { display: grid; gap: 20px; justify-items: center; text-align: center; padding-block: 24px 40px; }
.empty-frame { width: 180px; aspect-ratio: 4 / 5; border: 16px solid var(--walnut-2); background: var(--sheet); outline: 1px solid var(--gilt); outline-offset: -26px; box-shadow: inset 0 0 0 10px var(--sheet), inset 0 0 0 11px var(--line), 0 20px 30px -20px rgba(42, 32, 27, .6); margin-bottom: 12px; }

/* Footer */
.footer { background: var(--walnut); color: var(--on-dark); padding-block: 64px 32px; }
.footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
.footer .logo { color: var(--on-dark); }
.footer .logo svg { height: 42px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand p { color: var(--on-dark-muted); max-width: 34ch; }
.footer h2 { font: 600 13px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); margin-bottom: 12px; }
.footer p + p { margin-top: 10px; }
.footer a { color: var(--on-dark); }
.footer a:hover { color: #fff; }
.footer .note { color: var(--on-dark-muted); margin-top: 10px; font-size: 14px; }
.footer .hours div { max-width: 240px; font-size: 15px; }
.foot-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 28px; border-top: 1px solid rgba(241, 236, 227, .16); }
.foot-links a { text-decoration: none; font-size: 15px; }
.copy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; color: var(--on-dark-muted); font-size: 14px; }
.footer .copy p + p { margin-top: 0; }
.copy a { color: var(--on-dark-muted); }
@media (max-width: 900px) { .footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer .wrap { grid-template-columns: minmax(0, 1fr); } }

/* Mobile action bar */
.actionbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .actionbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--walnut); padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, .5); }
  .actionbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; color: var(--on-dark); text-decoration: none; font-size: 12.5px; font-weight: 600; }
  .actionbar a:first-child { color: #fff; }
  .actionbar svg { width: 21px; height: 21px; }
}