/* Ocelot CNC — the owner's supplied identity, expressed in gold and ink. */
:root { --ocelot-gold: #e7cb95; }
.ocelot-wordmark { display: inline-flex; flex-direction: column; flex-shrink: 0; align-items: flex-start; gap: 10px; color: var(--ocelot-gold); line-height: 1; }
.wordmark .ocelot-logo,.ocelot-logo { display: block; width: 228px; height: 45px; margin: 0; background: currentColor; mask: url('assets/brand/ocelot-wordmark.webp') center/contain no-repeat; -webkit-mask: url('assets/brand/ocelot-wordmark.webp') center/contain no-repeat; }
.wordmark .brand-descriptor { display: block; margin: 0; font: 500 9px/1 var(--sans); letter-spacing: .23em; color: inherit; }
.header { height: 100px; }
.header .ocelot-wordmark { padding: 0; }
.header .ocelot-logo { background: linear-gradient(110deg,#bb8f4c,#f7e7bc 45%,#d8b475 80%); }
.brand-hallmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 160px; height: 80px; color: var(--ocelot-gold); pointer-events: none; }
.ocelot-face { display: block; width: 32px; height: 65px; background: linear-gradient(150deg,#f4e0ac,#b08848 65%,#f5deab); mask: url('assets/brand/ocelot-mark.webp') center/contain no-repeat; -webkit-mask: url('assets/brand/ocelot-mark.webp') center/contain no-repeat; }
.brand-hallmark .ocelot-face { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); filter: drop-shadow(0 0 9px #e6c88b26); }
.brand-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-stars .gold-twinkle { transform-box: fill-box; transform-origin: center; animation: ocelot-twinkle 5.6s ease-in-out infinite; animation-delay: var(--twinkle-delay,0s); }
@keyframes ocelot-twinkle { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: .95; transform: scale(1.08); filter: drop-shadow(0 0 3px #ffe1a1); } }
.home-hero .brand-eyebrow { font-size: 10px; letter-spacing: .24em; margin: 0 0 20px; color: #d9bd85; }
footer { position: relative; background: #eee9de; border-top: 1px solid #b8a77f40; }
footer .ocelot-wordmark { color: #193c30; gap: 9px; }
footer .wordmark .ocelot-logo { width: 180px; height: 36px; }
footer .wordmark .brand-descriptor { font-size: 8px; letter-spacing: .2em; }
footer > p { font-family: var(--serif); font-size: 22px; color: #3d5145; }
footer > span { font-size: 12px; }
.compact-process { position: relative; isolation: isolate; overflow: hidden; }
.compact-process::before { content: ''; position: absolute; width: 220px; height: 450px; right: 4%; top: 45px; background: #e5cb94; opacity: .035; mask: url('assets/brand/ocelot-mark.webp') center/contain no-repeat; -webkit-mask: url('assets/brand/ocelot-mark.webp') center/contain no-repeat; z-index: -1; pointer-events: none; }
.identity-study { position: relative; aspect-ratio: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12%; overflow: hidden; color: #e8cf9d; background: radial-gradient(ellipse at 60% 35%,#31513e,#0c241c 80%); }
.identity-study::before { content: ''; position: absolute; inset: 25px; border: 1px solid #e1c48c2e; pointer-events: none; }
.identity-study > p { position: absolute; top: 12%; font-size: 10px; letter-spacing: .22em; }
.identity-study .ocelot-logo { width: 100%; height: auto; aspect-ratio: 5.1; }
.identity-rule { height: 1px; width: 45px; background: #d0b27588; margin: 33px 0 19px; }
.identity-caption { font-size: 9px; letter-spacing: .26em; }
@media(max-width:1100px) { .brand-hallmark { width: 95px; } .brand-hallmark .ocelot-face { width: 26px; height: 53px; } }
@media(max-width:900px) and (min-width:761px) { .brand-hallmark { display: none; } }
@media(max-width:760px) {
 .header { height: 88px; }
 .wordmark .ocelot-logo { width: 180px; height: 35px; }
 .wordmark .brand-descriptor { font-size: 8px; letter-spacing: .14em; }
 .ocelot-wordmark { gap: 8px; }
 .header nav { top: 88px; }
 .brand-hallmark { top: 100%; width: 96px; height: 46px; }
 .brand-hallmark .ocelot-face { height: 34px; width: 17px; }
 .home-hero .brand-eyebrow { font-size: 9px; letter-spacing: .15em; margin-bottom: 17px; }
 footer { gap: 26px; }
 footer > p { font-size: 21px; max-width: 290px; }
 .identity-study::before { inset: 18px; }
 .compact-process::before { width: 160px; right: -45px; top: 60px; }
}
@media(prefers-reduced-motion:reduce) { .brand-stars .gold-twinkle { animation: none; opacity: .8; } }

/* Gallery frames: a champagne edge and a recessed inner hairline. */
.hero-pictures[data-carousel] {
 border: 1px solid #d9bd827d;
 border-radius: 7px;
 box-shadow: 0 18px 42px #020d0933, 0 3px 10px #020d0929, 0 0 0 1px #fae4b00c;
 isolation: isolate;
}
.hero-pictures[data-carousel]::after {
 content: ''; position: absolute; inset: 9px; z-index: 2; pointer-events: none;
 border: 1px solid #fff0cc4d; border-radius: 3px;
 box-shadow: 0 0 0 8px #071b171f, inset 0 0 18px #071b1710;
}
.real-feature { border: 1px solid #d9bd8240; border-radius: 8px; box-shadow: 0 14px 35px #020d0926; }
.real-photos.hero-pictures[data-carousel] { border-radius: 7px 0 0 7px; }
@media(max-width:760px) {
 .hero-pictures[data-carousel]::after { inset: 7px; box-shadow: 0 0 0 6px #071b171f; }
 .real-photos.hero-pictures[data-carousel] { border-radius: 7px 7px 0 0; }
}