:root {
  color-scheme: light;
  --paper: #f7f8f4;
  --paper-muted: #e6ebe8;
  --ink: #17232b;
  --ink-soft: #5e6b70;
  --line: #cbd4d1;
  --yellow: #ffd20a;
  --yellow-deep: #e3ad00;
  --card-width: min(92vw, 780px);
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; background: var(--paper); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--yellow-deep); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }

.brand-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(4vw, 24px); border-bottom: 1px solid var(--line); background: rgba(247, 248, 244, .96); }
.brand-lockup { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 8px; background: var(--yellow); }
.brand-mark img { display: block; width: 27px; height: 27px; }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy strong { font-size: 17px; font-weight: 800; }
.brand-copy small, .section-label, .header-identity span { color: var(--ink-soft); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.brand-copy small { margin-top: 3px; }
.header-identity { display: grid; margin: 0; text-align: right; line-height: 1.25; }
.header-identity strong { margin-top: 3px; font-size: 15px; }

main { width: 100%; }
.card-presentation { padding: clamp(20px, 3vw, 36px) 0 28px; }
.stage { display: grid; width: 100%; min-height: clamp(248px, calc(57.5vw + 30px), 530px); place-items: center; perspective: 1800px; }
.card-float { width: var(--card-width); aspect-ratio: 261 / 159; animation: idle-float 5.6s ease-in-out infinite; }
.swipe-card { --drag-x: 0px; --drag-rotate: 0deg; position: relative; width: 100%; height: 100%; aspect-ratio: 261 / 159; touch-action: pan-y; cursor: grab; isolation: isolate; will-change: transform; }
.swipe-card.is-dragging, .swipe-card.is-snapping { transform: translate3d(var(--drag-x), 0, 0) rotate(var(--drag-rotate)); }
.swipe-card.is-dragging { transition: none; }
.swipe-card.is-snapping { transition: transform 230ms cubic-bezier(.2, .78, .28, 1); }
.swipe-card.swipe-out-left { animation: swipe-out-left 180ms ease-in both; }
.swipe-card.swipe-out-right { animation: swipe-out-right 180ms ease-in both; }
.swipe-card.swipe-in-left { animation: swipe-in-left 180ms ease-out both; }
.swipe-card.swipe-in-right { animation: swipe-in-right 180ms ease-out both; }
.swipe-card:active { cursor: grabbing; }
.card-face { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .4); border-radius: 8px; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: 0 24px 54px rgba(16, 23, 22, .2), 0 8px 18px rgba(16, 23, 22, .13); opacity: 1; transition: opacity 220ms ease, box-shadow 220ms ease; }
.card-face.front { z-index: 2; background-image: url('assets/petscast-card-front.png'); }
.card-face.contact { z-index: 1; background-image: url('assets/petscast-card-back.png'); opacity: 0; }
.swipe-card[data-side="contact"] .front { z-index: 1; opacity: 0; }
.swipe-card[data-side="contact"] .contact { z-index: 2; opacity: 1; }

.card-toolbar { display: flex; width: var(--card-width); min-height: 52px; align-items: center; justify-content: space-between; gap: 24px; margin: 10px auto 0; }
.side-controls { display: inline-grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); gap: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-muted); }
.side-controls button { min-width: 92px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 6px; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: 15px; font-weight: 800; }
.side-controls button.active, .side-controls button[aria-pressed="true"] { color: #fff; background: var(--ink); box-shadow: 0 4px 10px rgba(16, 23, 22, .18); }
.live-status { min-width: 148px; margin: 0; color: var(--ink-soft); font-size: 14px; font-weight: 700; text-align: right; }

.contact-layout { display: grid; width: min(92vw, 1040px); grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 7vw, 96px); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.section-label { margin: 0 0 12px; }
.identity-block h1 { margin: 0; font-size: 44px; line-height: 1.08; }
.role { margin: 10px 0 0; color: var(--yellow-deep); font-size: 18px; font-weight: 800; }
.contact-details { min-width: 0; overflow-wrap: anywhere; }
.contact-links { display: grid; gap: 8px; }
.contact-links a { display: grid; min-height: 52px; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact-links span { color: var(--ink-soft); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.contact-links strong { font-size: 16px; font-weight: 700; }
address { max-width: 680px; margin-top: 24px; color: var(--ink-soft); font-size: 16px; font-style: normal; line-height: 1.65; }
.save-contact { margin-top: 28px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 6px; color: var(--ink); background: var(--yellow); cursor: pointer; font-weight: 800; }

@keyframes idle-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }
@keyframes swipe-out-left { from { opacity: 1; transform: translate3d(var(--drag-x), 0, 0) rotate(var(--drag-rotate)); } to { opacity: 0; transform: translate3d(-112vw, -2%, 0) rotate(-7deg); } }
@keyframes swipe-out-right { from { opacity: 1; transform: translate3d(var(--drag-x), 0, 0) rotate(var(--drag-rotate)); } to { opacity: 0; transform: translate3d(112vw, -2%, 0) rotate(7deg); } }
@keyframes swipe-in-left { from { opacity: 0; transform: translate3d(112vw, 2%, 0) rotate(7deg); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); } }
@keyframes swipe-in-right { from { opacity: 0; transform: translate3d(-112vw, 2%, 0) rotate(-7deg); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); } }

@media (hover: hover) {
  .contact-links a:hover { color: var(--yellow-deep); border-color: var(--yellow-deep); }
  .side-controls button:not(.active):hover { color: var(--ink); background: #fff; }
}

@media (max-width: 640px) {
  .brand-header { min-height: 64px; gap: 12px; padding: 8px 16px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small, .header-identity span { display: none; }
  .header-identity strong { max-width: 104px; margin: 0; font-size: 13px; }
  .card-presentation { padding: 16px 0 24px; }
  .stage { min-height: calc(57.5vw + 24px); }
  .card-toolbar { align-items: flex-start; gap: 12px; margin-top: 8px; }
  .side-controls { width: 100%; }
  .side-controls button { min-width: 0; font-size: 16px; }
  .live-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  .contact-layout { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .identity-block h1 { font-size: 34px; }
  .contact-links a { grid-template-columns: 1fr; gap: 1px; min-height: 60px; padding: 8px 0; }
  .contact-links strong, address { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }