:root { --bone: oklch(96% 0.015 75); --bone-2: oklch(93% 0.02 70); --bone-3: oklch(88% 0.025 65); --cream: oklch(93% 0.035 140); --ink: oklch(28% 0.04 40); --ink-soft: oklch(42% 0.04 40); --ink-muted: oklch(58% 0.03 45); --terracotta: oklch(52% 0.09 145); --terracotta-deep: oklch(42% 0.08 145); --terracotta-soft: oklch(86% 0.06 145); --clay: oklch(72% 0.09 55); --amber: oklch(68% 0.14 65); --amber-soft: oklch(86% 0.08 75); --sand: oklch(85% 0.04 75); --forest: oklch(45% 0.07 95); --forest-deep: oklch(38% 0.06 90); --moss: oklch(55% 0.06 110); --rust: oklch(52% 0.14 40); --line: oklch(82% 0.025 65); --line-soft: oklch(89% 0.02 70); --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius: 4px; --radius-lg: 8px; --shadow-soft: 0 1px 2px rgba(40, 50, 40, 0.04), 0 8px 24px rgba(40, 50, 40, 0.06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bone); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; margin: 0; line-height: 1.05; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .ph { position: relative; background: oklch(90% 0.04 150); color: var(--ink-muted); display: flex; align-items: flex-end; justify-content: flex-start; padding: 14px; overflow: hidden; border-radius: 2px; } .ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, oklch(0% 0 0 / 0.08)); pointer-events: none; } .ph .ph-label { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.75); padding: 4px 8px; border-radius: 2px; backdrop-filter: blur(4px); } .ph.ph-dark { background: oklch(82% 0.05 150); } .ph.ph-forest { background: oklch(85% 0.055 145); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 2px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; transition: all 150ms ease; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--terracotta-deep); color: var(--bone); } .btn-primary:hover { background: var(--terracotta); } .btn-ghost { border-color: var(--line); color: var(--ink); } .btn-ghost:hover { background: var(--bone-2); border-color: var(--ink); } .btn-amber { background: var(--amber); color: var(--ink); } .btn-amber:hover { background: oklch(72% 0.14 65); } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--bone-2); color: var(--ink-soft); border: 1px solid var(--line); } .tag-available { background: oklch(92% 0.08 140); color: oklch(35% 0.12 140); border-color: oklch(80% 0.1 140); } .tag-hold { background: oklch(92% 0.08 75); color: oklch(45% 0.14 55); border-color: oklch(82% 0.1 70); } .tag-sold { background: var(--bone-3); color: var(--ink-muted); } .stack > * + * { margin-top: var(--gap, 16px); } .hairline { height: 1px; background: var(--line); } .hairline-v { width: 1px; background: var(--line); align-self: stretch; } .page { width: 100%; min-height: 100vh; background: var(--bone); } .container { max-width: 1320px; margin: 0 auto; padding: 0 48px; } .container-narrow { max-width: 980px; margin: 0 auto; padding: 0 48px; } .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bone) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; max-width: 1600px; margin: 0 auto; } .nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; } .nav-brand-mark { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #2f5a3a 0%, #1d3a26 70%, #16301f 100%); display: grid; place-items: center; color: #e6b422; font-family: var(--font-display); font-size: 21px; font-weight: 400; line-height: 1; border: 1.5px solid #e6b422; box-shadow: 0 0 0 2px rgba(230,180,34,0.18), inset 0 1px 2px rgba(255,255,255,0.12); letter-spacing: 0; position: relative; } .nav-brand-mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(230,180,34,0.35); pointer-events: none; } .nav-links { display: flex; gap: 28px; font-size: 13px; color: var(--ink-soft); } .nav-links a, .nav-links button { transition: color 150ms; cursor: pointer; padding: 4px 0; border-bottom: 1px solid transparent; } .nav-links a:hover, .nav-links a.active, .nav-links button:hover, .nav-links button.active { color: var(--ink); border-bottom-color: var(--ink); } .footer { margin-top: 120px; padding: 64px 0 40px; border-top: 1px solid var(--line); background: var(--bone-2); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .footer h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; font-weight: 500; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: 8px; font-size: 13px; color: var(--ink-soft); cursor: pointer; } .footer li:hover { color: var(--ink); } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15, 20, 15, 0.94); display: flex; align-items: center; justify-content: center; animation: fade 200ms ease; user-select: none; -webkit-user-select: none; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .lightbox-img { max-width: 88vw; max-height: 82vh; aspect-ratio: 3/2; width: 1100px; } .lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(15,20,15,0.85); border: 1px solid rgba(255,255,255,0.15); color: var(--bone); display: grid; place-items: center; font-size: 20px; z-index: 110; transition: background 150ms; } .lightbox-close:hover { background: rgba(255,255,255,0.16); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(15,20,15,0.85); border: 1px solid rgba(255,255,255,0.15); color: var(--bone); display: grid; place-items: center; font-size: 22px; z-index: 110; } .lightbox-nav:hover { background: rgba(255,255,255,0.14); } .lightbox-prev { left: 32px; } .lightbox-next { right: 32px; } .lightbox-caption { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); color: var(--bone); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(0,0,0,0.4); padding: 8px 14px; border-radius: 2px; } .modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(15, 20, 15, 0.5); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade 180ms ease; } .modal { background: var(--bone); width: 100%; max-width: 560px; border-radius: 4px; box-shadow: 0 40px 80px rgba(0,0,0,0.3); overflow: hidden; animation: pop 220ms cubic-bezier(.2,.8,.2,1); } @keyframes pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } } .modal-header { padding: 24px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .modal-body { padding: 24px 28px; } .modal-body label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; } .modal-body input, .modal-body textarea, .modal-body select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--bone); font-family: var(--font-sans); font-size: 14px; color: var(--ink); margin-bottom: 16px; transition: border-color 150ms; } .modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus { outline: none; border-color: var(--forest); } .modal-body textarea { min-height: 96px; resize: vertical; } .modal-footer { padding: 16px 28px; background: var(--bone-2); display: flex; justify-content: flex-end; gap: 10px; } .inquire-sent { padding: 48px 28px; text-align: center; } .inquire-sent-mark { width: 56px; height: 56px; border-radius: 50%; background: oklch(92% 0.08 140); color: oklch(35% 0.12 140); display: grid; place-items: center; margin: 0 auto 20px; font-size: 24px; } .specimen-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; } .specimen-tile { position: relative; overflow: hidden; border: 1px solid rgba(230,180,34,0.28); background: #0c0f0a; } .specimen-tile.tall { grid-row: span 2; } .specimen-tile.wide { grid-column: span 2; } .specimen-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; transition: none; } .specimen-tile:hover img { transform: none; filter: none; } .specimen-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -60px 50px -30px rgba(10,12,8,0.85); pointer-events: none; } .specimen-tile figcaption { position: absolute; left: 10px; bottom: 9px; font-size: 10.5px; letter-spacing: 0.14em; color: #f0e7cf; text-shadow: 0 1px 4px rgba(0,0,0,0.8); z-index: 2; opacity: 0.85; transition: opacity 300ms, color 300ms; } .specimen-tile:hover figcaption { opacity: 1; color: #e6b422; } .specimen-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(230,180,34,0.7), transparent); opacity: 0; transform: translateY(0); z-index: 2; pointer-events: none; } .specimen-tile:hover .specimen-scan { opacity: 1; animation: specimen-scan-move 1.6s linear infinite; } @keyframes specimen-scan-move { 0% { transform: translateY(0); } 100% { transform: translateY(200px); } } @media (max-width: 760px) { .specimen-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .specimen-tile.wide { grid-column: span 2; } } .collage-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 10px; } .collage-tile { position: relative; overflow: hidden; border: 1px solid rgba(230,180,34,0.22); background: #0c0f0a; } .collage-tile.cwide { grid-column: span 2; } .collage-tile.csmall { grid-column: span 1 !important; grid-row: span 1 !important; } .collage-tile:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; } .collage-tile:nth-child(5n+3) { grid-row: span 2; } .collage-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; transition: none; } .collage-tile:hover img { transform: none; filter: none; } .collage-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); pointer-events: none; } .collage-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 8px 7px; font-size: 10px; letter-spacing: 0.12em; color: #fff; opacity: 1; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.95); background: linear-gradient(transparent, rgba(8,10,6,0.82)); transition: color 300ms; } .collage-tile:hover figcaption { opacity: 1; } @media (max-width: 760px) { .collage-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } .collage-tile:nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .collage-tile:nth-child(5n+3) { grid-row: span 1; } } @media (max-width: 760px) { html, body { overflow-x: hidden; max-width: 100%; } * { max-width: 100%; } .nav-inner { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; } .nav-brand span { font-size: 2.1rem !important; } .nav-brand .mark, .nav-brand span.mark { transform: scale(0.85); } .nav-links { gap: 12px !important; font-size: 11px !important; flex-wrap: wrap; } .container { padding-left: 18px !important; padding-right: 18px !important; } section { padding-left: 0 !important; padding-right: 0 !important; } div[style*="repeat(2"], div[style*="repeat(3"], div[style*="repeat(4"], div[style*="repeat(5"], div[style*="repeat(6"], div[style*="auto-fit"], div[style*="auto-fill"] { grid-template-columns: 1fr !important; } div[style*="1fr 1fr"], div[style*="1fr 1.2fr"], div[style*="1.2fr 1fr"], div[style*="1fr 1.1fr"], div[style*="1.1fr 1fr"], div[style*="1.4fr 1fr"], div[style*="1fr 1.4fr"], div[style*="60px 1fr"], div[style*="120px 1fr"] { grid-template-columns: 1fr !important; } .odd-ones-grid { align-items: start !important; gap: 24px !important; } .odd-ones-grid .odd-ones-text { order: -1; } .odd-ones-grid .odd-ones-images { order: 0; display: flex !important; flex-direction: column; gap: 12px; } .odd-ones-grid .odd-ones-images > * { grid-row: auto !important; width: 100%; } .species-card { grid-template-columns: 1fr !important; gap: 20px !important; } .odd-ones-section { padding-bottom: 8px !important; } #dna > .container { padding-bottom: 0 !important; } #dna { padding-bottom: 0 !important; } .odd-ones-grid .odd-ones-text .btn { margin-bottom: 0 !important; } h1 { font-size: 44px !important; line-height: 1.05 !important; } h2 { font-size: 38px !important; } div[style*="flex: 1 1 4"], div[style*="flex: 1 1 3"], div[style*="flex:1 1 4"], div[style*="flex:1 1 3"] { flex: 1 1 100% !important; min-width: 0 !important; } div[style*="min-width"] { min-width: 0 !important; } .hero-title, h1 { word-break: break-word; } div[style*="margin-left: 20px"][style*="flex-shrink: 0"] { flex-direction: row !important; gap: 8px !important; margin-left: 40px !important; margin-top: 8px !important; } div[style*="18px 48px"][style*="space-between"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 14px !important; } } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); } #thecollection .specimen-tile img, #thecollection .specimen-tile:hover img, #thecollection .specimen-paired .specimen-photo:hover img, #thecollection .collage-tile img, #thecollection .collage-tile:hover img { -webkit-filter: none !important; filter: none !important; -webkit-transform: none !important; transform: none !important; transition: none !important; opacity: 1 !important; visibility: visible !important; } #thecollection .specimen-scan, #thecollection .specimen-tile:hover .specimen-scan { display: none !important; animation: none !important; } #thecollection .specimen-tile::after, #thecollection .collage-tile::after { display: none !important; } #thecollection .specimen-tile, #thecollection .collage-tile { isolation: isolate; } .facility-equipment { background: var(--ink); color: var(--bone); border-top: 1px solid rgba(255,255,255,.08); } .facility-equipment .facility-shell { max-width: 1320px; margin: 0 auto; padding: 112px 48px 72px; } .facility-equipment .facility-intro { display: grid; grid-template-columns: 1.06fr 1fr; gap: 80px; align-items: end; margin-bottom: 64px; } .facility-equipment .facility-eyebrow, .facility-equipment .facility-small-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 1.7; letter-spacing: .13em; } .facility-equipment .facility-eyebrow { margin-bottom: 20px; color: #b9c8a6; } .facility-equipment h2 { font-size: clamp(56px, 6.1vw, 86px); line-height: 1.02; color: var(--bone); } .facility-equipment h2 em { color: #f5c518; } .facility-equipment .facility-intro-copy > p { margin: 0 0 17px; font-size: 15px; line-height: 1.85; color: rgba(245,236,216,.75); } .facility-equipment .facility-intro-copy > p:first-child { font-family: var(--font-display); font-size: 28px; line-height: 1.25; color: var(--bone); } .facility-equipment .facility-jump-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 26px; } .facility-equipment .facility-jump-links a { display: inline-flex; gap: 9px; align-items: center; font-family: var(--font-mono); font-size: 10px; color: #f5c518; padding: 8px 0; border-bottom: 1px solid rgba(245,197,24,.28); } .facility-equipment .facility-jump-links a span:first-child { font-family: var(--font-sans); font-size: 12px; color: var(--bone); } .facility-equipment a:focus-visible { outline: 2px solid #f5c518; outline-offset: 5px; } .facility-equipment .facility-feature { padding: 40px; border-radius: 3px; scroll-margin-top: 100px; } .facility-equipment .facility-feature + .facility-feature { margin-top: 32px; } .facility-equipment .facility-feature-evo { background: var(--bone); color: var(--ink); } .facility-equipment .facility-feature-header { display: grid; grid-template-columns: 1fr 1.35fr; gap: 52px; align-items: start; margin-bottom: 32px; } .facility-equipment .facility-feature-evo .facility-eyebrow { color: var(--terracotta-deep); margin-bottom: 15px; } .facility-equipment h3 { font-size: clamp(36px, 3.7vw, 50px); line-height: 1.08; } .facility-equipment h3 em { color: var(--terracotta-deep); } .facility-equipment .facility-feature-copy p { margin: 0; font-size: 14px; line-height: 1.85; } .facility-equipment .facility-feature-copy p + p { margin-top: 14px; } .facility-equipment .facility-feature-evo .facility-feature-copy { color: var(--ink-soft); } .facility-equipment .facility-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .facility-equipment .facility-photo { margin: 0; min-width: 0; } .facility-equipment .facility-photo-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 270px; padding: 22px; background: #eee8de; overflow: hidden; border-radius: 2px; } .facility-equipment .facility-photo-number { position: absolute; top: 13px; left: 14px; z-index: 1; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: #766b5e; } .facility-equipment .facility-photo-stage img { display: block; width: 100%; height: 100%; object-fit: contain; } .facility-equipment .facility-photo-stage-phone { background: #e4e1d3; padding: 18px; } .facility-equipment .facility-photo figcaption { padding: 18px 2px 0; } .facility-equipment .facility-photo figcaption strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 5px; } .facility-equipment .facility-photo figcaption > span { display: block; color: var(--ink-soft); font-size: 12px; line-height: 1.75; } .facility-equipment .facility-feature-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 28px; } .facility-equipment .facility-feature-footer .facility-small-label { font-size: 9px; letter-spacing: .08em; color: var(--ink-soft); } .facility-equipment .facility-feature-footer a { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; font-weight: 500; } .facility-equipment .facility-feature-footer a:hover { text-decoration: underline; text-underline-offset: 4px; } .facility-equipment .facility-feature-lumenize { background: #384138; color: var(--bone); border: 1px solid rgba(245,236,216,.12); } .facility-equipment .facility-feature-lumenize .facility-eyebrow { color: #c4d0b5; margin-bottom: 15px; } .facility-equipment .facility-feature-lumenize h3 em { color: #f5c518; } .facility-equipment .facility-feature-lumenize .facility-feature-copy { color: rgba(245,236,216,.82); } .facility-equipment .facility-feature-lumenize .facility-photo-stage { background: #e9e8dc; } .facility-equipment .facility-feature-lumenize .facility-photo-number { color: #686d60; } .facility-equipment .facility-feature-lumenize .facility-photo-stage-app { background: #242a24; } .facility-equipment .facility-feature-lumenize .facility-photo-stage-app .facility-photo-number { color: #c3c4b6; } .facility-equipment .facility-photo-stage-lamp { padding: 6px 12px; } .facility-equipment .facility-photo-stage-app { padding: 5px; } .facility-equipment .facility-feature-lumenize .facility-photo figcaption > span { color: rgba(245,236,216,.75); } .facility-equipment .facility-uvi-note { display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: start; border-left: 2px solid #f5c518; padding: 17px 20px; margin-top: 28px; background: rgba(245,236,216,.05); } .facility-equipment .facility-uvi-note .facility-small-label { color: #f5c518; font-size: 9px; line-height: 1.85; } .facility-equipment .facility-uvi-note p { margin: 0; font-size: 12px; line-height: 1.8; color: rgba(245,236,216,.84); } .facility-equipment .facility-feature-lumenize .facility-feature-footer { border-color: rgba(245,236,216,.18); } .facility-equipment .facility-feature-lumenize .facility-feature-footer .facility-small-label { color: rgba(245,236,216,.72); } .facility-equipment .facility-feature-lumenize .facility-feature-footer a { color: #f5c518; } .facility-equipment .facility-image-credit { margin: 23px 0 0; font-size: 10px; line-height: 1.7; color: rgba(245,236,216,.56); } .facility-equipment .facility-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 1050px) { .facility-equipment .facility-shell { padding: 84px 32px 60px; } .facility-equipment .facility-intro { gap: 40px; } .facility-equipment .facility-feature { padding: 30px; } .facility-equipment .facility-feature-header { gap: 32px; grid-template-columns: 1fr 1.25fr; } .facility-equipment .facility-photo-stage { height: 225px; padding: 18px; } .facility-equipment .facility-photo-stage-lamp { padding: 0; } .facility-equipment .facility-photo-stage-app { padding: 0; } .facility-equipment .facility-feature-footer { align-items: flex-start; } } @media (max-width: 760px) { .facility-equipment .facility-shell { padding: 68px 18px 48px; } .facility-equipment .facility-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; } .facility-equipment h2 { font-size: clamp(47px, 10.5vw, 70px) !important; max-width: 470px; } .facility-equipment .facility-intro-copy > p:first-child { font-size: 25px; } .facility-equipment .facility-intro-copy > p { font-size: 14px; } .facility-equipment .facility-jump-links { margin-top: 18px; } .facility-equipment .facility-feature { padding: 26px 20px; } .facility-equipment .facility-feature + .facility-feature { margin-top: 24px; } .facility-equipment .facility-feature-header { grid-template-columns: 1fr; gap: 21px; margin-bottom: 26px; } .facility-equipment h3 { font-size: clamp(34px, 7.8vw, 46px); } .facility-equipment .facility-gallery { grid-template-columns: 1fr; gap: 24px; } .facility-equipment .facility-photo-stage { height: 255px; padding: 20px; } .facility-equipment .facility-photo-stage-phone { height: 290px; } .facility-equipment .facility-photo-stage-lamp { height: 290px; padding: 0; } .facility-equipment .facility-photo-stage-app { height: 290px; padding: 0; } .facility-equipment .facility-photo figcaption { padding-top: 13px; } .facility-equipment .facility-photo figcaption > span { font-size: 12px; } .facility-equipment .facility-feature-footer { flex-direction: column; gap: 15px; margin-top: 24px; } .facility-equipment .facility-feature-footer .facility-small-label { line-height: 1.9; } .facility-equipment .facility-uvi-note { grid-template-columns: 1fr; gap: 7px; padding: 16px; } .facility-equipment .facility-image-credit { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .facility-equipment { scroll-behavior: auto; } } #thecollection .specimen-paired .specimen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; } #thecollection .specimen-paired .specimen-photo { display: block; appearance: none; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #0c0f0a; overflow: hidden; cursor: zoom-in; } #thecollection .specimen-paired .specimen-photo + .specimen-photo { border-left: 1px solid rgba(230, 180, 34, 0.28); } #thecollection .specimen-paired:hover img { transform: none; filter: saturate(1.05) contrast(1.04); } #thecollection .specimen-paired .specimen-photo:hover img { filter: saturate(1.18) contrast(1.08); } #thecollection .specimen-paired .specimen-photo:focus-visible { outline: 2px solid #e6b422; outline-offset: -4px; } #thecollection .specimen-paired figcaption { pointer-events: none; } #thecollection .specimen-tile img, #thecollection .specimen-tile:hover img, #thecollection .specimen-paired .specimen-photo:hover img, #thecollection .collage-tile img, #thecollection .collage-tile:hover img { -webkit-filter: none !important; filter: none !important; -webkit-transform: none !important; transform: none !important; transition: none !important; opacity: 1 !important; visibility: visible !important; } #thecollection .specimen-scan, #thecollection .specimen-tile:hover .specimen-scan { display: none !important; animation: none !important; } #thecollection .specimen-tile::after, #thecollection .collage-tile::after { display: none !important; } #thecollection .specimen-tile, #thecollection .collage-tile { isolation: isolate; } #thecollection .collage-photo-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); height:100%; width:100%; gap:8px; background:#11140f; } #thecollection .collage-pair-photo { position:relative; display:block; min-width:0; width:100%; height:100%; margin:0; padding:0; border:0; background:#0c0f0a; color:#f4efe6; cursor:zoom-in; overflow:hidden; } #thecollection .collage-pair-photo img { width:100%; height:100%; display:block; filter:none!important; transform:none!important; transition:none!important; } #thecollection .collage-pair-caption { position:absolute; left:0; right:0; bottom:0; padding:18px 8px 7px; font-size:10px; letter-spacing:.1em; text-align:left; background:linear-gradient(transparent,rgba(8,10,6,.82)); pointer-events:none; } #thecollection .collage-pair-photo:focus-visible { outline:2px solid #e6b422; outline-offset:-3px; }
/* Keeper app installation button in the header action group. */
.nav .keeper-app-download{display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#244f39,#173f31);color:#f8f4e8;border:1px solid #b99b56;font-size:11px;line-height:1.35;padding:5px 12px;white-space:nowrap;text-decoration:none;box-shadow:0 2px 7px rgba(23,63,49,.14);transition:background .15s ease,box-shadow .15s ease}
.nav .keeper-app-download svg{width:14px;height:14px;color:#e6b422;flex-shrink:0}
.nav .keeper-app-download:hover{background:#244f39;color:#fff;box-shadow:0 3px 10px rgba(23,63,49,.23)}
.nav .keeper-app-download:focus-visible{outline:2px solid #b99b56;outline-offset:3px}
@media(max-width:760px){.nav .nav-inner .nav-app-actions{margin-left:0!important;width:100%!important;flex-direction:row!important;flex-wrap:wrap;gap:6px!important}.nav .nav-app-actions>.btn{flex:1 1 100px!important;min-height:44px;justify-content:center}}

/* Show the albino chuckwalla's full portrait above the mobile hero copy. */
@media (max-width: 760px) {
  img[aria-hidden][src*="slideshow-albino-chuckwalla-v1"] {
    object-fit: contain !important;
    object-position: center 12% !important;
  }
}

/* Keep the red iguana's body and legs visible in the mobile slideshow. */
@media (max-width: 760px) {
  img[aria-hidden][src*="slideshow-red-iguana-v1"] {
    object-fit: contain !important;
    object-position: center 35% !important;
  }
}

/* Show more of the Polychrus body in its mobile slideshow photo. */
@media (max-width: 760px) {
  img[aria-hidden][src*="slideshow-polychrus-peruvianus-v1"] {
    object-fit: contain !important;
    object-position: center 35% !important;
  }
}

/* Widen the orange lizard's mobile view and keep its nose above the copy. */
@media (max-width: 760px) {
  img[aria-hidden][src*="slideshow-orange-lizard-v1"] {
    object-fit: contain !important;
    object-position: center 30% !important;
  }
}

/* Show the green lizard's torso, legs and more tail in its mobile slide. */
@media (max-width: 760px) {
  img[aria-hidden][src*="slideshow-green-black-v1"] {
    object-fit: contain !important;
    object-position: center 35% !important;
  }
}

/* Fit the Phymaturus body and legs into its mobile slideshow photo. */
@media (max-width: 760px) {
  img[aria-hidden][src*="slideshow-phymaturus-agilis-v1"] {
    object-fit: contain !important;
    object-position: center 35% !important;
  }
}

/* Fit the striped lizard's body and legs above the mobile hero copy. */
@media (max-width: 760px) {
  img[aria-hidden][src*="/hero-09-hero-"],
  img[aria-hidden][src*="/hero-09."] {
    object-fit: contain !important;
    object-position: center 25% !important;
  }
}

/* Raise the Fiji iguana slightly on mobile, preserving its existing size. */
@media (max-width: 760px) {
  img[aria-hidden][src*="/hero-v4-hero-"],
  img[aria-hidden][src*="/hero-v4."] {
    object-position: 85% calc(40% - 28px) !important;
  }
}

/* Show more of the dark iguana's body and legs in the mobile slideshow. */
@media (max-width: 760px) {
  img[aria-hidden][src*="/hero-08-hero-"],
  img[aria-hidden][src*="/hero-08."] {
    object-fit: contain !important;
    object-position: center 30% !important;
  }
}

/* Fit the final iguana's body and legs into its mobile slideshow photo. */
@media (max-width: 760px) {
  img[aria-hidden][src*="/hero-10-hero-"],
  img[aria-hidden][src*="/hero-10."] {
    object-fit: contain !important;
    object-position: center 30% !important;
  }
}

/* Audit: keyboard navigation, small-screen heading and footer. */
.nav-links button { font:inherit; letter-spacing:inherit; text-align:left; }
.nav-brand:focus-visible, .nav-links :focus-visible, .footer :focus-visible { outline:2px solid #b58428; outline-offset:4px; }
.footer li { cursor:default; }
.footer li > button { padding:0; text-align:left; font:inherit; cursor:pointer; }
.footer li > a { cursor:pointer; }
#facility { scroll-margin-top:170px; }
@media (max-width:760px) {
  .nav-inner .nav-links { margin-left:0!important; margin-right:0!important; width:100%; }
  .nav-links a, .nav-links button { min-height:36px; display:inline-flex; align-items:center; }
  .hero-banner { font-size:10px!important; letter-spacing:.12em!important; line-height:1.5; padding:5px 12px!important; }
  .hero-heading { padding-top:58px!important; }
  .hero-heading .hero-title { font-size:clamp(30px,8vw,40px)!important; line-height:1.08!important; white-space:normal!important; word-break:normal; overflow-wrap:break-word; }
  .hero-title > span, .hero-title > em { display:block; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-bottom { flex-wrap:wrap; gap:12px 20px; }
}

/* The Keeper app's existing iguana-head icon replaces the install text button. */
.nav .nav-app-actions > .keeper-app-icon {
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  flex:0 0 56px!important;
  align-self:center;
  padding:0;
  gap:0;
  overflow:hidden;
  border:1px solid #b99b56;
  border-radius:12px;
  background:#000;
  box-shadow:0 2px 8px rgba(23,63,49,.2);
}
.nav .keeper-app-icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  flex-shrink:0;
}
.nav .nav-app-actions > .keeper-app-icon:hover {
  background:#000;
  border-color:#e6b422;
  box-shadow:0 3px 12px rgba(23,63,49,.3);
}
@media (max-width:760px) {
  .nav .nav-app-actions > .keeper-app-icon {
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    flex:0 0 48px!important;
    border-radius:10px;
  }
}

/* App installation caption: beneath the icon, alongside it on phones. */
.nav .nav-app-actions > .keeper-app-promo {
  width:128px;
  height:auto;
  min-width:0;
  min-height:56px;
  flex:0 0 auto!important;
  flex-direction:column;
  gap:7px;
  padding:3px 0;
  border:0;
  border-radius:4px;
  background:transparent;
  color:inherit;
  box-shadow:none;
  overflow:visible;
  white-space:normal;
}
.nav .keeper-app-promo img {
  width:56px;
  height:56px;
  border:1px solid #b99b56;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(23,63,49,.2);
}
.nav .keeper-app-caption {
  display:block;
  width:100%;
  min-width:0;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:0;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
}
.nav .nav-app-actions > .keeper-app-promo:hover {
  background:transparent;
  color:inherit;
  box-shadow:none;
}
.nav .keeper-app-promo:hover img {
  border-color:#e6b422;
  box-shadow:0 3px 12px rgba(23,63,49,.3);
}
@media (max-width:760px) {
  .nav .nav-app-actions > .keeper-app-promo {
    width:100%;
    height:auto;
    min-width:0;
    min-height:48px;
    flex:1 1 100%!important;
    flex-direction:row;
    gap:12px;
    padding:3px 0;
  }
  .nav .keeper-app-promo img {
    width:48px;
    height:48px;
    border-radius:10px;
  }
  .nav .keeper-app-caption {
    width:auto;
    max-width:260px;
    flex:0 1 260px;
    font-size:12px;
    text-align:left;
  }
}

/* Header v2: app at the left; stock controls remain stacked on the right. */
.nav .nav-inner .nav-keeper-actions {
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start;
  gap:12px!important;
}
.nav .keeper-install-card { cursor:pointer; border-radius:4px; }
.nav .keeper-install-icon {
  display:block;
  width:56px;
  height:56px;
  object-fit:contain;
  border:1px solid #b99b56;
  border-radius:12px;
  background:#000;
  box-shadow:0 2px 8px rgba(23,63,49,.2);
}
.nav .keeper-install-caption {
  display:block;
  width:100%;
  min-width:0;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:0;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
}
.nav .keeper-install-card:hover .keeper-install-icon {
  border-color:#e6b422;
  box-shadow:0 3px 12px rgba(23,63,49,.3);
}
.nav .keeper-install-card:focus-visible {
  outline:2px solid #b99b56;
  outline-offset:4px;
}
.nav .nav-stock-actions > .btn { justify-content:center; min-height:29px; }
@media (min-width:761px) {
  .nav .nav-links { min-width:0; gap:clamp(10px,1.2vw,22px); }
}
@media (min-width:761px) and (max-width:1200px) {
  .nav .nav-inner { flex-wrap:wrap; gap:12px; }
  .nav .nav-brand { order:0; }
  .nav .nav-inner .nav-keeper-actions { order:1; margin-left:auto!important; }
  .nav .nav-links {
    order:2;
    flex-basis:100%;
    flex-wrap:wrap;
    justify-content:center;
    margin-left:0!important;
    margin-right:0!important;
  }
}
@media (max-width:760px) {
  .nav .nav-inner .nav-keeper-actions {
    width:100%;
    margin-left:0!important;
    margin-top:0!important;
    align-items:center!important;
    gap:10px!important;
  }
  .nav .keeper-install-card {
    width:auto!important;
    min-width:0;
    flex:1 1 0!important;
    flex-direction:row!important;
    justify-content:flex-start;
    gap:8px!important;
  }
  .nav .keeper-install-icon-wrap {
    width:48px!important;
    height:48px!important;
    flex-shrink:0;
  }
  .nav .keeper-install-icon { width:48px; height:48px; border-radius:10px; }
  .nav .keeper-install-caption { flex:1 1 auto; width:auto; text-align:left; }
  .nav .nav-stock-actions { flex-shrink:0; }
  .nav .nav-stock-actions > .btn { min-height:44px; }
}

/* Increase only the Legend Reptiles name by 10% in the website header. */
.nav .nav-brand > span:last-child { font-size:1.65em!important; }
@media (max-width:760px) {
  .nav .nav-brand > span:last-child { font-size:2.31rem!important; }
}

/* Another 10% increase: 21% larger than the original header name. */
.nav .nav-brand > span:last-child { font-size:1.815em!important; }
@media (max-width:760px) {
  .nav .nav-brand > span:last-child { font-size:2.541rem!important; }
}

/* Rich gold labels throughout both Collection photo grids. */
#thecollection .specimen-tile figcaption,
#thecollection .collage-tile figcaption,
#thecollection .collage-pair-caption {
  color:#e6b422!important;
  opacity:1!important;
  font-weight:600;
  text-shadow:0 1px 2px #000,0 0 5px rgba(0,0,0,.95);
}
#thecollection .specimen-tile figcaption {
  max-width:calc(100% - 20px);
  padding:4px 7px;
  border-radius:2px;
  background:rgba(8,10,6,.78);
}
#thecollection .specimen-tile figcaption > span {
  color:inherit;
  opacity:1!important;
}

/* Match the second Collection grid's label backing to the first grid. */
#thecollection .collage-tile figcaption,
#thecollection .collage-pair-caption {
  left:10px;
  right:auto;
  bottom:9px;
  width:fit-content;
  max-width:calc(100% - 20px);
  padding:4px 7px;
  border-radius:2px;
  background:rgba(8,10,6,.78);
}
#thecollection .collage-tile figcaption > span {
  color:inherit;
  opacity:1!important;
}