/* ==========================================================================
   Cardddle Theme 9 — "Atrium"
   A premium, mobile-first card template for workspace / hospitality brands.
   Everything here is driven by the card's data + layout_config; no brand
   content is baked into the stylesheet.

   Palette tokens are overridden per-card from the theme picker colours
   (--picker1 / --picker2) in the template's inline <style>.
   ========================================================================== */

:root {
    --atr-ink: #1c1f24;
    --atr-ink-soft: #3a4049;
    --atr-muted: #6d7582;
    --atr-faint: #9aa1ab;

    --atr-paper: #f4f0ea;
    --atr-paper-hi: #fbf9f6;
    --atr-paper-lo: #ebe5dc;

    --atr-accent: #336fa6;
    --atr-accent-deep: #24527b;
    --atr-gold: #d2a93f;

    --atr-line: rgba(28, 31, 36, .10);
    --atr-line-soft: rgba(28, 31, 36, .06);
    --atr-shadow: 0 1px 2px rgba(28, 31, 36, .04), 0 10px 30px -18px rgba(28, 31, 36, .28);

    --atr-radius: 20px;
    --atr-radius-sm: 14px;
    --atr-gutter: 18px;

    --atr-ease: cubic-bezier(.22, .61, .36, 1);
    --atr-ease-out: cubic-bezier(.16, 1, .3, 1);

    --atr-font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Canvas
   -------------------------------------------------------------------------- */

html.atr-html {
    background: #15181d;
    overflow-x: hidden;
}

.atr-html body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: transparent;
    color: var(--atr-ink);
    font-family: var(--atr-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.atr-html body * {
    box-sizing: border-box;
}

/* The card itself is always boxed, even when the theme renders inside the
   dashboard preview where <html> carries no class. */
.atr-shell,
.atr-shell * {
    box-sizing: border-box;
}

/* Atmospheric desktop backdrop. Fixed + negative z-index so it never
   participates in the card's own stacking or scrolling. */
.atr-canvas {
    position: fixed;
    inset: -4%;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: saturate(.72);
    transform: scale(1.04);
}

/* One layer per hero frame, crossfaded in step with the hero so the room
   behind the card is always the room on it. */
.atr-canvas__layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1600ms var(--atr-ease);
}

.atr-canvas__layer.is-active {
    opacity: 1;
}

.atr-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(86% 60% at 50% 32%, rgba(21, 24, 29, .52), rgba(18, 21, 26, .90) 58%, #14171c 100%);
}

/* Slow ambient light drift behind the card (desktop only — pure transform). */
.atr-aura {
    position: fixed;
    z-index: -1;
    width: 72vmax;
    height: 72vmax;
    border-radius: 50%;
    pointer-events: none;
    opacity: .5;
    filter: blur(60px);
    display: none;
}

.atr-aura--a {
    top: -28vmax;
    left: -18vmax;
    background: radial-gradient(circle, rgba(51, 111, 166, .34), transparent 62%);
    animation: atr-drift-a 26s var(--atr-ease) infinite alternate;
}

.atr-aura--b {
    bottom: -32vmax;
    right: -20vmax;
    background: radial-gradient(circle, rgba(210, 169, 63, .22), transparent 62%);
    animation: atr-drift-b 32s var(--atr-ease) infinite alternate;
}

@keyframes atr-drift-a {
    to {
        transform: translate3d(14vmax, 8vmax, 0) scale(1.12);
    }
}

@keyframes atr-drift-b {
    to {
        transform: translate3d(-12vmax, -9vmax, 0) scale(1.1);
    }
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */

.atr-shell {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 8px 8px 0;
}

.atr-card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: var(--atr-paper);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14),
        0 40px 80px -32px rgba(0, 0, 0, .68),
        0 2px 10px rgba(0, 0, 0, .28);
    isolation: isolate;
}

/* Cardddle chrome (QR / views / translate) sits above the hero image. */
.atr-chrome {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #fff;
}

.atr-chrome__left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.atr-chrome__right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.atr-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    min-width: 30px;
    padding: 0 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(18, 20, 24, .40);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20);
    color: #fff;
    font: 500 11px/1 var(--atr-font);
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .22s var(--atr-ease), background .22s var(--atr-ease);
}

.atr-chip:active {
    transform: scale(.94);
}

.atr-chip svg {
    display: block;
    flex: 0 0 auto;
}

.atr-chip--static {
    cursor: default;
}

/* --------------------------------------------------------------------------
   Language picker

   Google Translate stays the engine; its own 249-option <select> and the
   banner it injects are taken out of the layout entirely.
   -------------------------------------------------------------------------- */

.atr-goog {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Google pushes the document down by the height of its banner iframe. */
.atr-html body {
    top: 0 !important;
}

iframe.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
    visibility: hidden !important;
}

/* Once translated, Google floats an "Original text / Rate this translation"
   balloon over whatever the pointer touches, and highlights the phrase. Both
   are noise on a card. */
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.jfk-bubble {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Google wraps translated runs in <font>; keep them transparent to layout. */
.atr-html font {
    font: inherit;
    color: inherit;
}

.atr-lang-btn[hidden] {
    display: none;
}

.atr-lang-btn span {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.atr-lang {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(12, 14, 18, .62);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--atr-ease), visibility .3s;
}

.atr-lang[hidden] {
    display: none;
}

.atr-lang.is-open {
    opacity: 1;
    visibility: visible;
}

.atr-lang__panel {
    width: 100%;
    max-width: 440px;
    max-height: min(74vh, 560px);
    display: flex;
    flex-direction: column;
    padding: 8px 0 max(10px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: var(--atr-paper-hi);
    box-shadow: 0 -20px 50px -24px rgba(0, 0, 0, .7);
    transform: translate3d(0, 100%, 0);
    transition: transform .42s var(--atr-ease-out);
}

.atr-lang.is-open .atr-lang__panel {
    transform: none;
}

.atr-lang__grip {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: var(--atr-line);
}

.atr-lang__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--atr-line-soft);
}

.atr-lang__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--atr-ink);
}

.atr-lang__x {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--atr-paper);
    color: var(--atr-ink-soft);
    cursor: pointer;
    transition: transform .22s var(--atr-ease);
}

.atr-lang__x:active {
    transform: scale(.92);
}

.atr-lang__list {
    flex: 1 1 auto;
    margin: 0;
    padding: 6px 10px 4px;
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.atr-lang__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 9px 12px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    transition: background .2s var(--atr-ease);
}

.atr-lang__opt:hover,
.atr-lang__opt:focus-visible {
    background: var(--atr-paper);
}

.atr-lang__opt:active {
    background: var(--atr-paper-lo);
}

.atr-lang__names {
    flex: 1 1 auto;
    min-width: 0;
}

.atr-lang__native {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--atr-ink);
}

.atr-lang__latin {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--atr-muted);
}

.atr-lang__tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--atr-accent);
    color: #fff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .22s var(--atr-ease), transform .28s var(--atr-ease-out);
}

.atr-lang__opt[aria-selected="true"] .atr-lang__tick {
    opacity: 1;
    transform: none;
}

.atr-lang__opt[aria-selected="true"] .atr-lang__native {
    color: var(--atr-accent-deep);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {

    .atr-lang,
    .atr-lang__panel,
    .atr-lang__tick {
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.atr-hero {
    position: relative;
    /* `width` must stay definite: with only `aspect-ratio` + `min-height`,
       the browser solves for width instead and the hero grows wider than
       the card. */
    width: 100%;
    aspect-ratio: 1 / 1.22;
    min-height: 400px;
    max-height: 72vh;
    overflow: hidden;
    background: #1a1d22;
}

/* No aspect-ratio support (older WebKit): fall back to a padded box. */
@supports not (aspect-ratio: 1 / 1.22) {
    .atr-hero {
        height: 62vh;
        min-height: 420px;
    }
}

/* No photography on the card: a tinted architectural panel instead of a
   stretched placeholder. */
.atr-hero--plain {
    aspect-ratio: auto;
    min-height: 0;
    background:
        radial-gradient(130% 90% at 18% 6%, color-mix(in srgb, var(--atr-accent) 62%, #10141a), #10141a 72%);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .atr-hero--plain {
        background: radial-gradient(130% 90% at 18% 6%, #2a4e70, #10141a 72%);
    }
}

.atr-hero--plain .atr-hero__body {
    position: static;
    padding-top: 92px;
}

/* Parallax layer — JS owns its transform, so the entrance zoom lives on the
   frame stack inside it and the two never fight. */
.atr-hero__media {
    position: absolute;
    inset: -5% 0 -5%;
    will-change: transform;
}

.atr-hero__frames {
    position: absolute;
    inset: 0;
    animation: atr-hero-in 1500ms var(--atr-ease-out) 60ms both;
}

@keyframes atr-hero-in {
    from {
        transform: scale(1.08);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* One frame per hero photo, crossfaded. Only the first has a src on load;
   the rest are filled in when the browser is idle. */
.atr-hero__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    filter: saturate(1.1) contrast(1.03);
    opacity: 0;
    transition: opacity 1600ms var(--atr-ease);
    /* A very slow Ken Burns drift, paused while the frame is inactive so
       only one animation is ever running. */
    animation: atr-ken 26s linear infinite alternate;
    animation-play-state: paused;
}

.atr-hero__frame.is-active {
    opacity: 1;
    animation-play-state: running;
}

@keyframes atr-ken {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.07) translate3d(0, -1.2%, 0);
    }
}

/* Hero copy drifts against the image as the sheet rises over it. */
.atr-hero__body {
    will-change: transform, opacity;
}

/* Every copy block shares one grid cell, so the stack takes the height of
   the longest slide and the meta line and action pills below it never move
   as the hero rotates. */
.atr-hero__stack {
    display: grid;
}

.atr-hero__stack > * {
    grid-area: 1 / 1;
    align-self: end;
}

.atr-hero__copy {
    opacity: 0;
    transition: opacity 1200ms var(--atr-ease);
    pointer-events: none;
}

.atr-hero__copy.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* A repeat of the headline on later slides is a <p>, not an <h1>. */
p.atr-hero__name {
    margin: 0;
}

/* Gradient scrim: dark at the bottom for the headline, light touch on top
   for the chrome chips. */
.atr-hero__scrim {
    position: absolute;
    inset: 0;
    /* Weighted to the headline band, because the frames crossfade between a
       dark interior and a bright balcony and the copy has to hold on both. */
    background:
        linear-gradient(to bottom,
            rgba(12, 14, 18, .52) 0%,
            rgba(12, 14, 18, .30) 14%,
            rgba(12, 14, 18, .12) 26%,
            rgba(12, 14, 18, .04) 36%,
            rgba(12, 14, 18, .40) 56%,
            rgba(12, 14, 18, .74) 76%,
            rgba(12, 14, 18, .90) 100%);
}

/* Architectural rules — thin vertical lines that draw themselves in. */
.atr-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.atr-hero__grid span {
    border-right: 1px solid rgba(255, 255, 255, .13);
    transform: scaleY(0);
    transform-origin: top;
    animation: atr-rule 1200ms var(--atr-ease-out) forwards;
}

.atr-hero__grid span:nth-child(1) {
    animation-delay: 260ms;
}

.atr-hero__grid span:nth-child(2) {
    animation-delay: 360ms;
}

.atr-hero__grid span:nth-child(3) {
    animation-delay: 460ms;
}

.atr-hero__grid span:last-child {
    border-right: 0;
}

@keyframes atr-rule {
    to {
        transform: scaleY(1);
    }
}

/* A single slow light sweep across the hero. */
.atr-hero__sweep {
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -40%;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .10) 45%, transparent);
    transform: translate3d(0, 0, 0) rotate(8deg);
    animation: atr-sweep 11s linear 2.4s infinite;
}

@keyframes atr-sweep {

    0%,
    62% {
        transform: translate3d(0, 0, 0) rotate(8deg);
    }

    100% {
        transform: translate3d(330%, 0, 0) rotate(8deg);
    }
}

/* Brand lockup, top-left over the photography. */
.atr-hero__logo {
    position: absolute;
    z-index: 4;
    left: var(--atr-gutter);
    top: 52px;
    width: 118px;
    max-width: 44%;
    height: auto;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45));
}

.atr-hero__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0 var(--atr-gutter) 36px;
    color: #fff;
}

.atr-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--atr-faint);
}

.atr-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 1px;
    background: var(--atr-gold);
}

/* Over photography the kicker flips to light. */
.atr-hero .atr-eyebrow,
.atr-spotlight .atr-eyebrow {
    color: rgba(255, 255, 255, .8);
}

.atr-hero__name {
    margin: 0;
    font-size: clamp(27px, 8vw, 34px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.018em;
    overflow-wrap: break-word;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}

.atr-hero__name b {
    font-weight: 500;
    color: #e3bf6b;
}

/* Fallback when there is no tagline: the business name, set as a mark. */
.atr-hero__name--brand {
    font-weight: 300;
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.atr-hero__slogan {
    margin: 10px 0 0;
    max-width: 21em;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, .84);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

.atr-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    margin-top: 10px;
    font-size: 10.5px;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .7);
}

.atr-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.atr-hero__meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--atr-gold);
}

/* Staggered entrance for the hero copy. */
.atr-rise {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    animation: atr-rise 900ms var(--atr-ease-out) forwards;
}

.atr-rise--1 {
    animation-delay: 380ms;
}

.atr-rise--2 {
    animation-delay: 480ms;
}

.atr-rise--3 {
    animation-delay: 580ms;
}

.atr-rise--4 {
    animation-delay: 680ms;
}

@keyframes atr-rise {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* --------------------------------------------------------------------------
   Sheet (content below the hero)
   -------------------------------------------------------------------------- */

.atr-sheet {
    position: relative;
    z-index: 4;
    margin-top: -22px;
    padding: 14px var(--atr-gutter) 0;
    border-radius: 26px 26px 0 0;
    background: var(--atr-paper);
}

.atr-sheet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 28px -16px rgba(20, 23, 28, .5);
    pointer-events: none;
}

/* Identity row — only rendered when the hero carries no logo lockup. */
.atr-plate {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.atr-plate__logo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 17px;
    overflow: hidden;
    background: var(--atr-paper-hi);
    box-shadow: inset 0 0 0 1px var(--atr-line), var(--atr-shadow);
    transform: translate3d(0, 10px, 0) scale(.9);
    opacity: 0;
    animation: atr-plate-in 760ms var(--atr-ease-out) 760ms forwards;
}

.atr-plate__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 7px;
}

@keyframes atr-plate-in {
    to {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

.atr-plate__text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--atr-ink);
}

.atr-plate__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.atr-plate__sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--atr-muted);
}

/* --------------------------------------------------------------------------
   Primary actions
   -------------------------------------------------------------------------- */

/* Glass pills, sitting inside the hero over the photograph. */
.atr-actions {
    position: relative;
    z-index: 3;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 7px;
    margin: 16px 0 0;
}

.atr-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 62px;
    padding: 10px 3px 9px;
    border-radius: 15px;
    background: rgba(246, 243, 238, .14);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
    color: #fff;
    text-decoration: none;
    transition: transform .26s var(--atr-ease), background .26s var(--atr-ease), box-shadow .26s var(--atr-ease);
}

.atr-action:hover,
.atr-action:focus-visible {
    color: #fff;
    text-decoration: none;
    background: rgba(246, 243, 238, .24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.atr-action:active {
    transform: scale(.95);
}

.atr-action__icon {
    display: grid;
    place-items: center;
    transition: transform .3s var(--atr-ease-out);
}

.atr-action:hover .atr-action__icon {
    transform: translateY(-2px);
}

.atr-action__icon svg {
    width: 19px;
    height: 19px;
    display: block;
}

.atr-action__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.15;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

/* Without hero photography the pills sit on paper instead. */
.atr-actions--paper {
    margin: 0 0 12px;
}

.atr-actions--paper .atr-action {
    background: var(--atr-paper-hi);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px var(--atr-line), var(--atr-shadow);
    color: var(--atr-ink);
}

.atr-actions--paper .atr-action__icon {
    color: var(--atr-accent);
}

.atr-actions--paper .atr-action__label {
    color: var(--atr-ink-soft);
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   Blocks — shared shell
   -------------------------------------------------------------------------- */

.atr-block {
    --tint: var(--atr-accent);
    margin: 0 0 9px;
    border-radius: var(--atr-radius);
    background: var(--atr-paper-hi);
    box-shadow: inset 0 0 0 1px var(--atr-line), var(--atr-shadow);
    overflow: hidden;
}

.atr-block__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.atr-block__head[aria-expanded] {
    transition: background .24s var(--atr-ease);
}

.atr-block__head:active {
    background: rgba(28, 31, 36, .035);
}

.atr-block--static .atr-block__head {
    cursor: default;
}

.atr-block__glyph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tint) 16%, transparent);
    color: var(--tint);
    transition: transform .4s var(--atr-ease-out), background .3s var(--atr-ease), color .3s var(--atr-ease);
}

/* color-mix fallback for engines without it. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .atr-block__glyph {
        background: rgba(51, 111, 166, .12);
    }
}

.atr-block__glyph svg {
    width: 19px;
    height: 19px;
    display: block;
}

.atr-block.is-open .atr-block__glyph {
    background: var(--tint);
    color: #fff;
}

.atr-block__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.atr-block__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.25;
    color: var(--atr-ink);
}

.atr-block__sub {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--atr-muted);
}

.atr-block__chev {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--atr-faint);
    /* Points right when closed, down when open. */
    transform: rotate(-90deg);
    transition: transform .42s var(--atr-ease-out), color .3s var(--atr-ease);
}

.atr-block__chev svg {
    width: 15px;
    height: 15px;
    display: block;
}

.atr-block.is-open .atr-block__chev {
    transform: rotate(0deg);
    color: var(--tint);
}

.atr-block__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .46s var(--atr-ease-out);
}

.atr-block__inner {
    padding: 0 15px 16px;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity .3s var(--atr-ease) .04s, transform .36s var(--atr-ease-out) .04s;
}

.atr-block.is-open .atr-block__inner {
    opacity: 1;
    transform: none;
}

.atr-block--static .atr-block__panel {
    max-height: none;
    overflow: visible;
}

.atr-block--static .atr-block__inner {
    opacity: 1;
    transform: none;
}

/* Hairline above the body so the panel reads as a drawer. */
.atr-block__rule {
    height: 1px;
    margin: 0 0 13px;
    background: var(--atr-line-soft);
}

/* --------------------------------------------------------------------------
   Block body — rich text
   -------------------------------------------------------------------------- */

.atr-prose {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--atr-ink-soft);
}

.atr-prose + .atr-prose {
    margin-top: 10px;
}

.atr-figure {
    position: relative;
    margin: 0 0 13px;
    border-radius: var(--atr-radius-sm);
    overflow: hidden;
    background: var(--atr-paper-lo);
}

.atr-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.atr-figure figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 12px 10px;
    background: linear-gradient(to top, rgba(14, 16, 20, .78), transparent);
    color: #fff;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.atr-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.atr-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--atr-ink-soft);
}

.atr-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--atr-gold);
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Block body — tiles (horizontally scrolling image cards)
   -------------------------------------------------------------------------- */

/* Three across — the same rhythm as the gallery, so the sheet reads as one
   grid system rather than a stack of unrelated widgets. */
.atr-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

/* One or two tiles look stranded in a 3-up grid. */
.atr-tiles--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atr-tiles--1 {
    grid-template-columns: minmax(0, 1fr);
}

.atr-tile {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--atr-paper);
    text-decoration: none;
    color: inherit;
    box-shadow: inset 0 0 0 1px var(--atr-line-soft);
    transition: transform .3s var(--atr-ease-out);
}

.atr-tile:active {
    transform: scale(.975);
}

.atr-tile__img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.02;
    overflow: hidden;
    background: var(--atr-paper-lo);
}

.atr-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--atr-ease-out);
}

.atr-tile:hover .atr-tile__img img {
    transform: scale(1.06);
}

.atr-tile__body {
    display: block;
    padding: 8px 9px 10px;
}

.atr-tile__name {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--atr-ink);
    line-height: 1.25;
}

.atr-tile__note {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--atr-muted);
}

.atr-tile__price {
    display: block;
    margin-top: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--atr-accent-deep);
}

/* --------------------------------------------------------------------------
   Block body — plans
   -------------------------------------------------------------------------- */

.atr-plans {
    display: grid;
    gap: 9px;
}

.atr-plan {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 13px;
    border-radius: var(--atr-radius-sm);
    background: var(--atr-paper);
    box-shadow: inset 0 0 0 1px var(--atr-line-soft);
}

.atr-plan--featured {
    background: linear-gradient(180deg, rgba(51, 111, 166, .07), rgba(51, 111, 166, .02));
    box-shadow: inset 0 0 0 1px rgba(51, 111, 166, .22);
}

.atr-plan__main {
    flex: 1 1 auto;
    min-width: 0;
}

.atr-plan__name {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--atr-ink);
}

.atr-plan__note {
    margin: 3px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--atr-muted);
}

.atr-plan__price {
    flex: 0 0 auto;
    text-align: right;
}

.atr-plan__amount {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--atr-ink);
}

.atr-plan__unit {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atr-faint);
}

.atr-plan__was {
    display: block;
    font-size: 11px;
    color: var(--atr-faint);
    text-decoration: line-through;
}

.atr-tag {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(210, 169, 63, .16);
    color: #8a6d16;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.atr-footnote {
    margin: 11px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--atr-faint);
}

/* --------------------------------------------------------------------------
   Block body — features (icon grid)
   -------------------------------------------------------------------------- */

.atr-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.atr-feature {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 10px;
    border-radius: 12px;
    background: var(--atr-paper);
    box-shadow: inset 0 0 0 1px var(--atr-line-soft);
}

.atr-feature__dot {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tint, var(--atr-accent)) 13%, transparent);
    color: var(--tint, var(--atr-accent));
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .atr-feature__dot {
        background: rgba(51, 111, 166, .10);
        color: var(--atr-accent-deep);
    }
}

.atr-feature__dot svg {
    width: 14px;
    height: 14px;
    display: block;
}

.atr-feature span {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--atr-ink-soft);
}

/* --------------------------------------------------------------------------
   Block body — hours
   -------------------------------------------------------------------------- */

.atr-rows {
    display: grid;
    gap: 1px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--atr-line-soft);
}

.atr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    background: var(--atr-paper);
    font-size: 12.5px;
}

.atr-row__k {
    color: var(--atr-ink-soft);
    font-weight: 500;
}

.atr-row__v {
    color: var(--atr-muted);
    text-align: right;
}

.atr-row--closed .atr-row__v {
    color: #a3514b;
}

/* --------------------------------------------------------------------------
   Block body — gallery
   -------------------------------------------------------------------------- */

.atr-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.atr-gallery a {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.08;
    border-radius: 10px;
    overflow: hidden;
    background: var(--atr-paper-lo);
    box-shadow: inset 0 0 0 1px var(--atr-line-soft);
    transition: transform .3s var(--atr-ease-out);
}

.atr-gallery a:active {
    transform: scale(.97);
}

.atr-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--atr-ease-out), opacity .4s var(--atr-ease);
}

.atr-gallery a:hover img {
    transform: scale(1.07);
}

/* --------------------------------------------------------------------------
   Feature card — image beside copy, the sheet's opening statement
   -------------------------------------------------------------------------- */

.atr-feature-card {
    display: flex;
    gap: 12px;
    margin: 0 0 9px;
    padding: 11px;
    border-radius: var(--atr-radius);
    background: var(--atr-paper-hi);
    box-shadow: inset 0 0 0 1px var(--atr-line), var(--atr-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .26s var(--atr-ease), box-shadow .26s var(--atr-ease);
}

.atr-feature-card:hover,
.atr-feature-card:focus-visible {
    color: inherit;
    text-decoration: none;
}

.atr-feature-card:active {
    transform: scale(.99);
}

.atr-feature-card__img {
    flex: 0 0 auto;
    width: 38%;
    max-width: 148px;
    border-radius: 13px;
    overflow: hidden;
    background: var(--atr-paper-lo);
    align-self: stretch;
    min-height: 136px;
}

.atr-feature-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--atr-ease-out);
}

.atr-feature-card:hover .atr-feature-card__img img {
    transform: scale(1.05);
}

.atr-feature-card__body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 2px 2px 0;
}

.atr-feature-card__title {
    display: block;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.018em;
    color: var(--atr-ink);
    padding-right: 30px;
}

.atr-feature-card__text {
    display: block;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--atr-muted);
}

.atr-feature-card__go {
    position: absolute;
    top: 13px;
    right: 13px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--atr-paper);
    box-shadow: inset 0 0 0 1px var(--atr-line);
    color: var(--atr-ink-soft);
    transition: transform .3s var(--atr-ease-out);
}

.atr-feature-card {
    position: relative;
}

.atr-feature-card:hover .atr-feature-card__go {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Block body — contact rows / links
   -------------------------------------------------------------------------- */

.atr-contacts {
    display: grid;
    gap: 7px;
}

.atr-contact {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--atr-paper);
    box-shadow: inset 0 0 0 1px var(--atr-line-soft);
    text-decoration: none;
    color: inherit;
    transition: transform .24s var(--atr-ease), box-shadow .24s var(--atr-ease);
}

.atr-contact:hover,
.atr-contact:focus-visible {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(28, 31, 36, .15);
}

.atr-contact:active {
    transform: scale(.985);
}

.atr-contact__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(51, 111, 166, .10);
    color: var(--atr-accent-deep);
}

.atr-contact__icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.atr-contact__text {
    flex: 1 1 auto;
    min-width: 0;
}

.atr-contact__k {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atr-faint);
}

.atr-contact__v {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--atr-ink);
    overflow-wrap: anywhere;
}

.atr-contact__go {
    flex: 0 0 auto;
    color: var(--atr-faint);
    transition: transform .3s var(--atr-ease-out);
}

.atr-contact:hover .atr-contact__go {
    transform: translateX(3px);
}

.atr-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.atr-social {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--atr-paper);
    box-shadow: inset 0 0 0 1px var(--atr-line-soft);
    color: var(--atr-ink-soft);
    text-decoration: none;
    transition: transform .26s var(--atr-ease), background .26s var(--atr-ease), color .26s var(--atr-ease);
}

.atr-social:hover,
.atr-social:focus-visible {
    background: var(--atr-accent);
    color: #fff;
    text-decoration: none;
}

.atr-social:active {
    transform: scale(.93);
}

.atr-social svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */

.atr-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0 0 10px;
    border-radius: var(--atr-radius);
    background: var(--atr-paper-hi);
    box-shadow: inset 0 0 0 1px var(--atr-line), var(--atr-shadow);
    overflow: hidden;
}

.atr-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 15px 4px 14px;
    text-align: center;
}

.atr-stat + .atr-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--atr-line);
}

.atr-stat__icon {
    color: var(--atr-accent);
}

.atr-stat__icon svg {
    width: 19px;
    height: 19px;
    display: block;
}

.atr-stat__label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atr-ink-soft);
    line-height: 1.2;
}

.atr-stat__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--atr-ink);
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Spotlight (full-bleed image CTA)
   -------------------------------------------------------------------------- */

.atr-spotlight {
    position: relative;
    display: block;
    margin: 0 0 10px;
    border-radius: var(--atr-radius);
    overflow: hidden;
    min-height: 168px;
    text-decoration: none;
    color: #fff;
    background: #1a1d22;
    box-shadow: var(--atr-shadow);
}

.atr-spotlight:hover,
.atr-spotlight:focus-visible {
    color: #fff;
    text-decoration: none;
}

.atr-spotlight img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--atr-ease-out);
}

.atr-spotlight:hover img {
    transform: scale(1.05);
}

.atr-spotlight__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(10, 12, 16, .86) 2%, rgba(10, 12, 16, .62) 42%, rgba(10, 12, 16, .14) 92%),
        linear-gradient(to top, rgba(10, 12, 16, .5), transparent 58%);
}

.atr-spotlight__body {
    display: block;
    position: relative;
    padding: 20px 86px 20px 17px;
}

.atr-spotlight__title {
    display: block;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.01em;
    max-width: 10em;
}

.atr-spotlight__text {
    display: block;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    max-width: 16em;
}

.atr-spotlight__go {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--atr-ink);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8);
    transition: transform .3s var(--atr-ease-out);
}

.atr-spotlight:hover .atr-spotlight__go {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.atr-footer {
    position: relative;
    margin: 18px calc(var(--atr-gutter) * -1) 0;
    padding: 22px var(--atr-gutter) 26px;
    background: var(--atr-paper-lo);
    text-align: center;
    overflow: hidden;
}

.atr-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--atr-gutter);
    right: var(--atr-gutter);
    height: 1px;
    background: var(--atr-line);
}

.atr-footer__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.atr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    font: 600 12.5px/1 var(--atr-font);
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .24s var(--atr-ease), box-shadow .24s var(--atr-ease), background .24s var(--atr-ease);
}

.atr-btn:active {
    transform: scale(.97);
}

.atr-btn svg {
    width: 15px;
    height: 15px;
    display: block;
    flex: 0 0 auto;
}

.atr-btn--primary {
    background: var(--atr-ink);
    color: var(--atr-paper-hi);
    box-shadow: 0 10px 24px -14px rgba(28, 31, 36, .9);
}

.atr-btn--primary:hover,
.atr-btn--primary:focus-visible {
    background: #000;
    color: #fff;
    text-decoration: none;
}

.atr-btn--ghost {
    background: var(--atr-paper-hi);
    color: var(--atr-ink);
    box-shadow: inset 0 0 0 1px var(--atr-line);
}

.atr-btn--ghost:hover,
.atr-btn--ghost:focus-visible {
    background: #fff;
    color: var(--atr-ink);
    text-decoration: none;
}

.atr-footer__brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.atr-footer__by {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--atr-faint);
}

.atr-footer__brand img {
    width: 132px;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   QR sheet
   -------------------------------------------------------------------------- */

.atr-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(12, 14, 18, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--atr-ease), visibility .3s;
}

.atr-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.atr-modal__box {
    width: min(300px, 100%);
    padding: 20px;
    border-radius: 22px;
    background: var(--atr-paper-hi);
    text-align: center;
    transform: translate3d(0, 16px, 0) scale(.96);
    transition: transform .36s var(--atr-ease-out);
}

.atr-modal.is-open .atr-modal__box {
    transform: none;
}

.atr-modal__box svg {
    width: 100%;
    height: auto;
    max-width: 220px;
}

.atr-modal__note {
    margin: 12px 0 0;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--atr-faint);
}


/* --------------------------------------------------------------------------
   Text limits

   Card copy is user-entered and occasionally very long. Clamping keeps the
   composition intact instead of letting one field push the layout around.
   -------------------------------------------------------------------------- */

.atr-hero__name,
.atr-hero__slogan,
.atr-block__title,
.atr-block__sub,
.atr-tile__name,
.atr-tile__note,
.atr-feature-card__title,
.atr-feature-card__text,
.atr-spotlight__title,
.atr-spotlight__text,
.atr-plate__title,
.atr-plate__sub,
.atr-plan__name,
.atr-plan__note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

.atr-hero__name {
    -webkit-line-clamp: 3;
}

.atr-spotlight__title,
.atr-spotlight__text,
.atr-feature-card__title {
    -webkit-line-clamp: 3;
}

.atr-hero__slogan {
    -webkit-line-clamp: 2;
}

.atr-block__title,
.atr-block__sub,
.atr-tile__name,
.atr-tile__note,
.atr-plate__title,
.atr-plate__sub,
.atr-plan__name {
    -webkit-line-clamp: 2;
}

.atr-feature-card__text {
    -webkit-line-clamp: 6;
}

.atr-plan__note {
    -webkit-line-clamp: 3;
}

/* Values people need in full are never clipped. */
.atr-prose,
.atr-list li,
.atr-contact__v,
.atr-row__k,
.atr-row__v,
.atr-feature span {
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Sticky action bar

   The card runs to ~1600px, so the hero's calls to action scroll away and
   never come back. This brings the first two of them along.
   -------------------------------------------------------------------------- */

.atr-sticky {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 440px;
    padding: 0 8px;
    transform: translate3d(-50%, -102%, 0);
    transition: transform .42s var(--atr-ease-out);
    pointer-events: none;
}

.atr-sticky.is-in {
    transform: translate3d(-50%, 0, 0);
}

.atr-sticky__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border-radius: 0 0 20px 20px;
    background: color-mix(in srgb, var(--atr-paper-hi) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: inset 0 -1px 0 var(--atr-line), 0 12px 28px -18px rgba(16, 19, 24, .7);
    pointer-events: auto;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .atr-sticky__inner {
        background: var(--atr-paper-hi);
    }
}

.atr-sticky__logo {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.atr-sticky__text {
    flex: 1 1 auto;
    min-width: 0;
}

.atr-sticky__name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--atr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atr-sticky__sub {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--atr-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atr-sticky__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
}

.atr-sticky__btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--atr-paper);
    box-shadow: inset 0 0 0 1px var(--atr-line);
    color: var(--atr-ink);
    text-decoration: none;
    transition: transform .22s var(--atr-ease), background .22s var(--atr-ease), color .22s var(--atr-ease);
}

.atr-sticky__btn:active {
    transform: scale(.92);
}

.atr-sticky__btn:hover,
.atr-sticky__btn:focus-visible {
    background: var(--atr-accent);
    color: #fff;
    text-decoration: none;
}

.atr-sticky__btn--accent {
    background: var(--atr-accent);
    color: #fff;
    box-shadow: none;
}

.atr-sticky__btn--accent:hover,
.atr-sticky__btn--accent:focus-visible {
    background: var(--atr-accent-deep);
    color: #fff;
}

.atr-sticky__btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Reading progress, riding the bar's bottom edge. */
.atr-sticky__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
}

.atr-sticky__progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--atr-accent), var(--atr-gold));
    transform: scaleX(0);
    transform-origin: left;
}

/* --------------------------------------------------------------------------
   Image placeholders

   Deferred images leave an empty box for a beat. A shimmer makes that read
   as loading rather than broken; the class is dropped once the file lands,
   which also stops the animation.
   -------------------------------------------------------------------------- */

.atr-ph {
    position: relative;
    overflow: hidden;
}

.atr-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            transparent 20%,
            color-mix(in srgb, var(--atr-paper-hi) 70%, transparent) 50%,
            transparent 80%);
    transform: translate3d(-100%, 0, 0);
    animation: atr-shimmer 1.5s var(--atr-ease) infinite;
    pointer-events: none;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .atr-ph::after {
        background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    }
}

@keyframes atr-shimmer {
    to {
        transform: translate3d(100%, 0, 0);
    }
}

.atr-ph.is-loaded::after {
    content: none;
}

.atr-ph img {
    opacity: 0;
    transition: opacity .45s var(--atr-ease);
}

.atr-ph.is-loaded img {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.atr-toast {
    position: fixed;
    z-index: 1100;
    left: 50%;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(340px, calc(100vw - 32px));
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(22, 25, 30, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .9);
    color: #fff;
    font: 500 12.5px/1.3 var(--atr-font);
    opacity: 0;
    transform: translate3d(-50%, 14px, 0);
    transition: opacity .3s var(--atr-ease), transform .36s var(--atr-ease-out);
    pointer-events: none;
}

.atr-toast.is-in {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

.atr-toast svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--atr-gold);
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.atr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 16px;
    background: rgba(10, 12, 15, .94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--atr-ease), visibility .3s;
}

.atr-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.atr-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}

.atr-lightbox__x,
.atr-lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    color: #fff;
    cursor: pointer;
    transition: background .22s var(--atr-ease), transform .22s var(--atr-ease);
}

.atr-lightbox__x:active,
.atr-lightbox__nav:active {
    transform: scale(.92);
}

.atr-lightbox__x {
    top: 14px;
    right: 14px;
}

.atr-lightbox__nav--prev {
    left: 10px;
    top: 50%;
    margin-top: -22px;
}

.atr-lightbox__nav--next {
    right: 10px;
    top: 50%;
    margin-top: -22px;
}

.atr-lightbox__caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .84);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.atr-lightbox__caption:empty {
    display: none;
}

/* The thumbnail morphs into the full image where View Transitions exist. */
::view-transition-old(atr-shot),
::view-transition-new(atr-shot) {
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.atr-reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .62s var(--atr-ease-out), transform .62s var(--atr-ease-out);
    will-change: opacity, transform;
}

.atr-reveal.is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

/* 360px-class devices: tighten the gutter so copy keeps its measure. */
@media (max-width: 374px) {
    :root {
        --atr-gutter: 14px;
    }

    .atr-shell {
        padding: 6px 6px 0;
    }

    .atr-action {
        min-height: 68px;
        padding: 10px 2px 9px;
    }

    .atr-action__icon {
        width: 28px;
        height: 28px;
    }

    .atr-action__label {
        font-size: 8.5px;
        letter-spacing: .07em;
    }

    .atr-tile {
        width: 138px;
    }

    .atr-spotlight__body {
        padding-right: 76px;
    }
}

/* Wide phones / small tablets: a touch more air. */
@media (min-width: 430px) {
    :root {
        --atr-gutter: 20px;
    }

    .atr-hero__name {
        font-size: 44px;
    }
}

/* Desktop: the card stays a card — the backdrop does the talking. */
@media (min-width: 900px) {
    .atr-aura {
        display: block;
    }

    .atr-shell {
        padding: 34px 8px;
    }

    .atr-card {
        border-radius: 30px;
    }

    .atr-hero {
        max-height: 540px;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .atr-hero__frames,
    .atr-hero__frame,
    .atr-hero__grid span,
    .atr-hero__sweep,
    .atr-plate__logo,
    .atr-rise,
    .atr-aura,
    .atr-ph::after {
        animation: none !important;
    }

    .atr-hero__frames,
    .atr-plate__logo,
    .atr-rise {
        opacity: 1 !important;
        transform: none !important;
    }

    /* The first frame stays; the rotation never starts. */
    .atr-hero__frame.is-active {
        opacity: 1 !important;
    }

    .atr-ph::after {
        content: none;
    }

    .atr-ph img {
        opacity: 1 !important;
    }

    .atr-sticky,
    .atr-toast,
    .atr-lightbox,
    .atr-canvas__layer {
        transition-duration: .01ms !important;
    }

    ::view-transition-old(atr-shot),
    ::view-transition-new(atr-shot) {
        animation: none !important;
    }

    .atr-hero__grid span {
        transform: scaleY(1) !important;
    }

    .atr-hero__sweep {
        display: none;
    }

    .atr-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .atr-block__panel,
    .atr-block__inner,
    .atr-block__chev,
    .atr-block__glyph,
    .atr-modal,
    .atr-modal__box,
    .atr-tile__img img,
    .atr-spotlight img,
    .atr-gallery img {
        transition-duration: .01ms !important;
    }
}