/* Attewell & Hardwick Eyecare — shared styles (Tailwind CDN handles utilities) */
:root {
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-1: 0 1px 2px rgba(74, 20, 36, .06), 0 4px 12px -4px rgba(74, 20, 36, .08);
  --shadow-2: 0 2px 4px rgba(74, 20, 36, .05), 0 12px 32px -8px rgba(74, 20, 36, .16), 0 32px 64px -24px rgba(30, 27, 38, .18);
  --shadow-3: 0 4px 8px rgba(74, 20, 36, .08), 0 24px 56px -12px rgba(74, 20, 36, .28);
}
html { scroll-behavior: smooth; }
body { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; line-height: 1.7; background: #F3F6F6; color: #1E1B26; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, .font-display { font-family: "Young Serif", Georgia, serif; font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
section[id], [id].anchor { scroll-margin-top: 92px; }
.prose-measure { max-width: 62ch; }

/* Long-form copy (news posts) */
.prose p { margin-top: 1.1em; max-width: 64ch; font-size: 1.125rem; color: #4B4757; }
.prose h2 { margin-top: 1.8em; font-size: 1.9rem; color: #1E1B26; }

/* Grain */
.grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.1  0 0 0 0 0.15  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Buttons: hover/press via overlay opacity + transform only */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .8rem 1.5rem; border-radius: 999px; font-weight: 700; line-height: 1.2; transition: transform .35s var(--spring); }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .25s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .1s; }
.btn:focus-visible, .link:focus-visible, .chip input:focus-visible + span, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid #2E6B4F; outline-offset: 3px; }
.btn-primary { background: #6B1F33; color: #fff; box-shadow: var(--shadow-2); }
.btn-primary::after { background: #4A1424; }
.btn-ghost { background: #fff; color: #1E1B26; box-shadow: inset 0 0 0 1.5px #DCE3E4, var(--shadow-1); }
.btn-ghost::after { background: #F4E9EC; }
.btn-light { background: #fff; color: #4A1424; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 24px -10px rgba(0,0,0,.35); }
.btn-light::after { background: #F4E9EC; }
.btn-outline-light { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn-outline-light::after { background: rgba(255,255,255,.12); }

/* Dark surfaces: white focus rings, light underlines, brighter status dot */
.on-dark :focus-visible, .bg-ink :focus-visible, .bg-claret :focus-visible { outline-color: #fff !important; }
.on-dark .link { text-decoration-color: rgba(255,255,255,.4); }
.on-dark .link:hover { text-decoration-color: currentColor; }
.on-dark .status-dot { background: #5FC08F; }

.link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: rgba(107,31,51,.35); transition: opacity .2s; border-radius: 2px; }
.link:hover { text-decoration-color: currentColor; }
.link:active { opacity: .7; }

/* Header */
.site-header { transition: box-shadow .3s; }
.site-header { box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 28px -12px rgba(0,0,0,.55); }
.nav-link { position: relative; padding: .5rem .1rem; border-radius: 4px; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: #EBA9BA; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: #fff; font-weight: 700; }
.nav-link:active { opacity: .7; }
.logo-ink { filter: brightness(0) saturate(100%) invert(10%) sepia(14%) saturate(900%) hue-rotate(220deg); }
.mobile-menu { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .25s var(--ease-out), transform .35s var(--spring); }
.mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu nav a[aria-current="page"] { background: rgba(255,255,255,.1); box-shadow: inset 3px 0 0 #EBA9BA; font-weight: 700; }

/* The focus pull: every page H1 sharpens like a lens clicking into place.
   site.js adds the blurred copy; without JS the heading simply shows. */
.focus-h1 { position: relative; }
.js .focus-h1 .blurred { position: absolute; inset: 0; filter: blur(9px); pointer-events: none; }
.js .focus-h1 .sharp { display: block; opacity: 0; }
.js.loaded .focus-h1 .blurred { animation: unblur 1.4s var(--ease-out) .25s forwards; }
.js.loaded .focus-h1 .sharp { animation: sharpen 1.1s var(--ease-out) .45s forwards; }
@keyframes unblur { to { opacity: 0; transform: scale(.985); } }
@keyframes sharpen { from { opacity: 0; } to { opacity: 1; } }

.js .rise { opacity: 0; transform: translateY(14px); }
.js.loaded .rise { animation: rise .9s var(--ease-out) forwards; animation-delay: var(--d, 1s); }
@keyframes rise { to { opacity: 1; transform: none; } }

.js .trial-ring { transform: rotate(-50deg); opacity: 0; transform-origin: 50% 50%; }
.js.loaded .trial-ring { animation: dial 1.8s var(--spring) .2s forwards; }
@keyframes dial { 0% { opacity: 0; transform: rotate(-50deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: rotate(0); } }
.js .axis-needle { transform: rotate(-60deg); transform-origin: 50% 50%; }
.js.loaded .axis-needle { animation: needle 2s var(--spring) .6s forwards; }
@keyframes needle { to { transform: rotate(0); } }
.js .lens-photo { opacity: 0; transform: scale(1.06); }
.js.loaded .lens-photo { animation: lensIn 1.4s var(--ease-out) .15s forwards; }
@keyframes lensIn { to { opacity: 1; transform: scale(1); } }

/* Image treatment */
.treated { position: relative; overflow: hidden; isolation: isolate; }
.treated::before { content: ""; position: absolute; inset: 0; background: #6B1F33; mix-blend-mode: multiply; opacity: .14; z-index: 1; pointer-events: none; }
.treated::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 55%); z-index: 1; pointer-events: none; }
.treated.light::after { background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0) 45%); }

/* Eligibility checker */
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #DCE3E4; transition: transform .3s var(--spring); line-height: 1.35; }
.chip span::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px #B8C3C5; background: #fff center/14px no-repeat; }
.chip:hover span { box-shadow: inset 0 0 0 1.5px #6B1F33; }
.chip:active span { transform: scale(.98); }
.chip input:checked + span { background: #E3EFE8; box-shadow: inset 0 0 0 2px #2E6B4F; }
.chip input:checked + span::before { background-color: #2E6B4F; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E"); }
.result-state { transition: opacity .35s var(--ease-out), transform .45s var(--spring); }
.result-state[hidden] { display: block !important; position: absolute; inset: 0; opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }

/* Linked rows and cards */
.svc-row { transition: transform .4s var(--spring); }
.svc-row:hover { transform: translateX(6px); }
.svc-row:active { transform: translateX(3px) scale(.995); }
.svc-row img { transition: transform .6s var(--ease-out); }
.svc-row:hover img { transform: scale(1.06); }
.lift { transition: transform .4s var(--spring); }
.lift:hover { transform: translateY(-4px); }
.lift:active { transform: translateY(-1px) scale(.99); }

/* Jump nav on services */
.jump a { white-space: nowrap; }
.jump a:hover { background: #F4E9EC; }
.jump a:active { opacity: .7; }

/* Brand marquee */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-25%); } }

/* Timeline */
.timeline li { position: relative; padding-left: 2rem; }
.timeline li::before { content: ""; position: absolute; left: 0; top: .55rem; width: 11px; height: 11px; border-radius: 50%; background: #F3F6F6; box-shadow: inset 0 0 0 2.5px #6B1F33; }
.timeline li::after { content: ""; position: absolute; left: 5px; top: 1.6rem; bottom: -1.6rem; width: 1.5px; background: #DCE3E4; }
.timeline li:last-child::after { display: none; }
.timeline li:last-child::before { background: #6B1F33; }

/* Booking CTA only carries bottom padding; after a coloured section it needs top padding too */
:is(.bg-white, .bg-ink, .bg-claret, .bg-claret-soft) + .cta-band { padding-top: 5rem; }
@media (min-width: 1024px) { :is(.bg-white, .bg-ink, .bg-claret, .bg-claret-soft) + .cta-band { padding-top: 7rem; } }

/* Hours */
.hours-row.today { background: #F4E9EC; box-shadow: inset 3px 0 0 #6B1F33; font-weight: 700; }

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details .chev { transition: transform .3s var(--spring); }
details[open] .chev { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
}