/* Custom classes referenced in the markup that Tailwind's JIT can't generate on its own */
.brutalist-border{ border:2px solid #1a1c1c; }
.brutalist-button{
    background:#1a1c1c; color:#fff; border:2px solid #1a1c1c;
    box-shadow:6px 6px 0 #aa3000;
    transition:transform .2s ease, box-shadow .2s ease;
}
.brutalist-button:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 #aa3000; }
.brutalist-button:active{ transform:translate(0,0); box-shadow:3px 3px 0 #aa3000; }
.brutalist-button-secondary{
    background:#ffffff; color:#1a1c1c; border:2px solid #1a1c1c;
    box-shadow:6px 6px 0 #1a1c1c;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.brutalist-button-secondary:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 #1a1c1c; background:#1a1c1c; color:#fff; }
.brutalist-button-secondary:active{ transform:translate(0,0); box-shadow:3px 3px 0 #1a1c1c; }
.grid-overlay{
    background-image:
        linear-gradient(to right, rgba(26,28,28,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26,28,28,.07) 1px, transparent 1px);
    background-size: 48px 48px;
}
.reveal-hidden{
    opacity:0; transform:translateY(24px);
    transition:opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
    .reveal-hidden{ transition:none; opacity:1; transform:none; }
    [class*="animate-"]{ animation:none !important; }
}

/* Material-accent textures — restrained echo of the logotype's mixed-material
   letters (marble/charcoal X, postage-stamp R, foil-neon E), applied only as
   background accents on existing cards/badges. Pure CSS, no new image assets.
   Grain uses the same feTurbulence noise technique as real paper/stone
   micro-texture, not a repeating geometric pattern. */
.material-paper, #site-footer{
    background-color:#fdfdfc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
#site-nav{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.material-marble{
    background-color: #f4f2ef;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% 26%, rgba(26,28,28,.06), transparent 44%),
        radial-gradient(circle at 80% 72%, rgba(170,48,0,.045), transparent 48%);
}
.material-foil{ position: relative; overflow: hidden; }
.material-foil::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform .7s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}
.material-foil:hover::after,
.material-foil:focus-within::after{ transform: translateX(130%); }
.material-stamp{
    background-image: radial-gradient(rgba(26,28,28,.13) 1px, transparent 1px);
    background-size: 6px 6px;
}
@media (prefers-reduced-motion: reduce){
    .material-foil::after{ transition:none; }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Testimonial carousel — quote text uses Cormorant (serif, italic) as a
   deliberate contrast to Anybody's grotesk used everywhere else on the
   site, echoing the editorial pull-quote convention. */
.testimonial-carousel{ position: relative; overflow: hidden; }
.testimonial-track{
    display: flex;
    transition: transform .5s cubic-bezier(0.16,1,0.3,1);
}
.testimonial-page{
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2.5rem 3.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px){
    .testimonial-page{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
    .testimonial-page{ grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.testimonial-card{
    text-align: center;
    padding: 0 0.5rem;
}
.testimonial-card + .testimonial-card{
    border-top: 1px solid rgba(26,28,28,.12);
    padding-top: 1.5rem;
}
@media (min-width: 640px){
    .testimonial-card + .testimonial-card{
        border-top: none;
        border-left: 1px solid rgba(26,28,28,.12);
        padding-top: 0;
        padding-left: 1.5rem;
    }
}
.testimonial-quote{
    font-family: 'Cormorant', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #1a1c1c;
}
.testimonial-name{
    margin-top: 0.75rem;
    font-family: Anybody;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #aa3000;
}
.testimonial-dots{
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.testimonial-dot{
    width: 8px; height: 8px;
    border-radius: 999px;
    background: #1a1c1c;
    opacity: .25;
    border: none;
    cursor: pointer;
    padding: 0;
}
.testimonial-dot[aria-current="true"]{ opacity: 1; }
.testimonial-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid #1a1c1c;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease;
}
.testimonial-arrow:hover{ transform: translateY(-50%) scale(1.08); }
.testimonial-arrow.prev{ left: 0.5rem; }
.testimonial-arrow.next{ right: 0.5rem; }
@media (prefers-reduced-motion: reduce){
    .testimonial-track{ transition: none; }
    .testimonial-arrow:hover{ transform: translateY(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 90s linear infinite;
}