/* =========================================================================
   Aqsa Kayani — design system + theme styles
   Light theme. Structure and motion matched to jingjinghan.com (1440x900).
   Colour derived from the AQSA KAYANI logo (sky #A9D5F2, orange #EA7431,
   wordmark #121316), confirmed by the client.

   CONTRAST FLOOR: every text/ground pair in this file clears WCAG AA 4.5:1.
     ink #121316 on white ....... 18.58   white on ink ........... 18.58
     sky #A9D5F2 on white .......  1.56 -> SURFACE ONLY, never text
     ink on sky #A9D5F2 ......... 11.93
     orange #EA7431 on white ....  2.98 -> DECORATION ONLY, never text
     orange #B34A15 ............. 5.37 white / 5.15 on #FAFAFA
     sky-deep #2B6DA6 ...........  5.47
     ink alpha floor is a0.60 (4.88). a0.55 = 4.12 FAILS.
   ========================================================================= */

:root {
	/* ---------- 1. brand primitives (from the logo) */
	--ak-sky:    #A9D5F2;
	--ak-orange: #EA7431;
	--ak-ink:    #121316;

	/* ---------- 2. grounds */
	--ak-bg:        #FFFFFF;
	--ak-bg-soft:   #FAFAFA;
	--ak-bg-sunken: #F4F6F8;
	--ak-bg-wash:   #EFF7FD;
	--ak-bg-raise:  #F0F2F5;

	/* ---------- 3. ink ramp (floor a0.60) */
	--ak-fg:        #121316;
	--ak-fg-strong: rgba(18,19,22,.85);
	--ak-fg-muted:  rgba(18,19,22,.70);
	--ak-fg-faint:  rgba(18,19,22,.60);
	--ak-fg-ghost:  rgba(18,19,22,.45);   /* decorative / large display only */

	--ak-line:       rgba(18,19,22,.14);
	--ak-line-soft:  rgba(18,19,22,.08);
	--ak-line-sky:   rgba(169,213,242,.85);

	/* ---------- 4. accent roles */
	--ak-sky-wash:    rgba(169,213,242,.34);
	--ak-sky-faint:   rgba(169,213,242,.16);
	--ak-sky-deep:    #2B6DA6;
	--ak-orange-deep: #B34A15;
	--ak-orange-wash: rgba(234,116,49,.14);

	/* ---------- 5. gradients */
	--ak-grad-hero:
		radial-gradient(620px 480px at 50% 34%, var(--ak-sky-wash), transparent 68%),
		radial-gradient(420px 320px at 82% 78%, var(--ak-orange-wash), transparent 70%),
		linear-gradient(180deg, #FFFFFF 0%, var(--ak-bg-soft) 100%);
	--ak-grad-footer:
		radial-gradient(700px 420px at 50% 0%, var(--ak-sky-wash), transparent 66%),
		radial-gradient(380px 300px at 16% 30%, var(--ak-orange-wash), transparent 70%);
	/* ink -> sky -> orange: all three logo colours in one sweep */
	--ak-grad-text: linear-gradient(96deg, var(--ak-ink) 0%, var(--ak-sky-deep) 52%, var(--ak-orange-deep) 100%);
	--ak-grad-rule: linear-gradient(90deg, transparent, var(--ak-sky), transparent);
	--ak-dots: radial-gradient(circle, rgba(18,19,22,.10) 1.1px, transparent 1.3px);
	--ak-dots-size: 22px 22px;
	--ak-scrim: linear-gradient(to top, rgba(18,19,22,.70) 0%, rgba(18,19,22,.18) 52%, transparent 100%);

	/* ---------- 6. elevation (sky-tinted, never neutral black) */
	--ak-shadow-sm: 0 2px 8px -3px rgba(43,109,166,.24);
	--ak-shadow:    0 14px 34px -20px rgba(43,109,166,.42);
	--ak-shadow-lg: 0 30px 60px -34px rgba(43,109,166,.50), 0 6px 18px -12px rgba(18,19,22,.10);

	/* ---------- 7. type */
	--ak-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ak-w-regular: 400;
	--ak-w-medium:  500;

	/* ---------- 8. spacing (reference scale) */
	--ak-s1: 4px;  --ak-s2: 8px;  --ak-s3: 12px; --ak-s4: 16px;
	--ak-s6: 24px; --ak-s7: 28px; --ak-s8: 32px; --ak-s12: 48px;
	--ak-s24: 96px; --ak-s32: 128px;

	/* ---------- 9. radii */
	--ak-r-sm: 12px; --ak-r: 16px; --ak-r-lg: 24px; --ak-r-pill: 999px;

	/* ---------- 10. layout */
	--ak-max: 1274px;
	--ak-gutter: 24px;
	--ak-header: 72px;

	/* ---------- 11. motion (reference curves) */
	--ak-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ak-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ak-dur: .3s;
	--ak-dur-slow: .7s;
}

@media (min-width: 768px) { :root { --ak-gutter: 40px; --ak-header: 84px; } }

/* --------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--ak-header); }

body.ak {
	margin: 0; background: var(--ak-bg); color: var(--ak-fg);
	font-family: var(--ak-font); font-size: 16px; line-height: 1.6;
	font-weight: var(--ak-w-regular);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--ak-w-medium); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ak-sky); color: var(--ak-fg); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ak-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ak-fg); color: #fff; padding: 12px 20px; }
.ak-skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ak-sky-deep); outline-offset: 3px; border-radius: 3px; }

/* =====================================================
   PAGE REVEAL — load curtain
   ===================================================== */
.ak-reveal-screen {
	position: fixed; inset: 0; z-index: 9999;
	background: var(--ak-bg);
	display: grid; place-items: center;
	transition: opacity .6s var(--ak-ease), visibility .6s;
}
.ak-reveal-screen__mark {
	font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: var(--ak-w-medium);
	letter-spacing: -.03em; color: var(--ak-fg);
	display: flex; align-items: baseline; gap: .12em;
}
.ak-reveal-screen__dot {
	width: .22em; height: .22em; border-radius: 50%; background: var(--ak-orange);
	animation: ak-blink 1s var(--ak-ease) infinite;
}
@keyframes ak-blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.ak-reveal-screen__bar {
	position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--ak-grad-text);
	transition: width .5s var(--ak-ease-out);
}
body.ak-loaded .ak-reveal-screen { opacity: 0; visibility: hidden; pointer-events: none; }

/* Fail-safe: the curtain covers the entire page, so it must never be able to
   stay up. This retires it after 4s with no JS involved at all. */
.ak-reveal-screen { animation: ak-curtain-failsafe 0s linear 4s forwards; }
@keyframes ak-curtain-failsafe {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Scroll lock is applied by JS, never by the absence of a class -- otherwise
   a JS failure leaves the page permanently unscrollable. */
body.ak-locked { overflow: hidden; }

/* =====================================================
   CUSTOM CURSOR — difference blend, desktop pointers only
   ===================================================== */
.ak-cursor {
	position: fixed; top: 0; left: 0; z-index: 9998;
	width: 10px; height: 10px; border-radius: 50%;
	background: #fff; mix-blend-mode: difference;
	pointer-events: none; opacity: 0;
	transform: translate3d(-50%, -50%, 0);
	transition: opacity .25s var(--ak-ease), width .25s var(--ak-ease), height .25s var(--ak-ease);
}
.ak-cursor.is-on { opacity: 1; }
/* The dot deliberately does NOT grow. Under difference blend a large white
   disc renders as a solid black blob on a light page — the ring carries the
   hover state instead. */
.ak-cursor.is-lg { width: 6px; height: 6px; }

.ak-cursor-ring {
	position: fixed; top: 0; left: 0; z-index: 9997;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--ak-sky-deep);
	pointer-events: none; opacity: 0;
	transform: translate3d(-50%, -50%, 0);
	transition: opacity .3s var(--ak-ease), transform .12s var(--ak-ease-out), width .25s var(--ak-ease), height .25s var(--ak-ease);
}
.ak-cursor-ring.is-on { opacity: .55; }
.ak-cursor-ring.is-lg { width: 58px; height: 58px; opacity: .9; border-color: var(--ak-orange); border-width: 1.5px; }

@media (hover: none), (pointer: coarse) {
	.ak-cursor, .ak-cursor-ring { display: none; }
}

/* =====================================================
   SHARED
   ===================================================== */
.ak-eyebrow {
	margin: 0 0 var(--ak-s6);
	font-size: 12px; font-weight: var(--ak-w-medium);
	letter-spacing: .16em; text-transform: uppercase; color: var(--ak-fg-faint);
	display: flex; align-items: center; gap: var(--ak-s2);
}
.ak-eyebrow::before {
	content: ""; width: 18px; height: 1px; background: var(--ak-orange); flex: none;
}

.ak-display {
	font-size: clamp(2.75rem, 7vw, 5rem);
	font-weight: var(--ak-w-medium);
	line-height: .9; letter-spacing: -.03em; margin: 0; text-wrap: balance;
}

.ak-section-head { max-width: var(--ak-max); margin: 0 auto; padding: 0 var(--ak-gutter); }
.ak-section-head__line {
	margin: var(--ak-s7) 0 0; max-width: 620px;
	font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.65; color: var(--ak-fg-muted);
}

/* split-text primitives */
.ak-char, .ak-word {
	display: inline-block;
	will-change: transform, opacity;
}
.ak-char {
	opacity: 0; transform: translateY(.42em) rotate(2deg);
	transition: opacity .5s var(--ak-ease-out), transform .6s var(--ak-ease-out);
	transition-delay: calc(var(--i) * 14ms);
}
.is-in .ak-char { opacity: 1; transform: none; }

.ak-word { opacity: .22; transition: opacity .5s var(--ak-ease-out); transition-delay: calc(var(--i) * 22ms); }
.ak-reveal-words.is-in .ak-word { opacity: 1; }

.ak-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--ak-dur-slow) var(--ak-ease-out), transform var(--ak-dur-slow) var(--ak-ease-out); }
.ak-reveal.is-in { opacity: 1; transform: none; }

/* stagger helper for grids */
.ak-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ak-ease-out), transform .6s var(--ak-ease-out); }
.ak-stagger.is-in > * { opacity: 1; transform: none; }
.ak-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.ak-stagger.is-in > *:nth-child(2){transition-delay:70ms}
.ak-stagger.is-in > *:nth-child(3){transition-delay:140ms}
.ak-stagger.is-in > *:nth-child(4){transition-delay:210ms}
.ak-stagger.is-in > *:nth-child(5){transition-delay:280ms}
.ak-stagger.is-in > *:nth-child(6){transition-delay:350ms}

/* =====================================================
   SCROLL PROGRESS — percentage + live section label
   ===================================================== */
.ak-progress {
	position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120;
	background: var(--ak-line-soft); pointer-events: none;
}
.ak-progress__bar { display: block; height: 100%; width: 0; background: var(--ak-grad-text); }

.ak-readout {
	position: fixed; z-index: 119; left: var(--ak-gutter); bottom: var(--ak-s6);
	display: none; align-items: center; gap: var(--ak-s2);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ak-fg-faint);
	background: rgba(255,255,255,.72);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--ak-line-soft); border-radius: var(--ak-r-pill);
	padding: 8px 14px;
	opacity: 0; transition: opacity var(--ak-dur) var(--ak-ease);
}
.ak-readout.is-on { opacity: 1; }
.ak-readout__pct { color: var(--ak-fg); font-variant-numeric: tabular-nums; }
.ak-readout__sep { width: 12px; height: 1px; background: var(--ak-orange); }
@media (min-width: 900px) { .ak-readout { display: inline-flex; } }

/* =====================================================
   HEADER
   ===================================================== */
.ak-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--ak-header); display: flex; align-items: center;
	border-bottom: 1px solid transparent;
	transition: background var(--ak-dur) var(--ak-ease), border-color var(--ak-dur) var(--ak-ease);
}
.ak-header.is-stuck {
	background: rgba(255,255,255,.78);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
	border-bottom-color: var(--ak-line-soft);
}

.ak-header__inner {
	width: 100%; max-width: var(--ak-max); margin: 0 auto; padding: 0 var(--ak-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: var(--ak-s6);
}

/* The real wordmark, 384x74 (5.19:1). Height-constrained so it scales with
   the header rather than the other way round. */
.ak-brand { display: inline-flex; align-items: center; }
.ak-brand img,
.ak-brand__logo,
.ak-brand .custom-logo {
	height: 26px; width: auto; max-width: 52vw;
	object-fit: contain; display: block;
}
@media (min-width: 768px) { .ak-brand img, .ak-brand__logo, .ak-brand .custom-logo { height: 30px; } }

/* curtain wordmark */
.ak-reveal-screen__mark img { height: 34px; width: auto; }
@media (min-width: 768px) { .ak-reveal-screen__mark img { height: 46px; } }

.ak-nav { display: none; }
@media (min-width: 900px) { .ak-nav { display: block; } }
.ak-nav__list { display: flex; align-items: center; gap: var(--ak-s8); }
.ak-nav__list a { position: relative; font-size: 14px; color: var(--ak-fg-muted); transition: color var(--ak-dur) var(--ak-ease); }
.ak-nav__list a::after {
	content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px;
	background: var(--ak-sky); transform: scaleX(0); transform-origin: 100% 50%;
	transition: transform var(--ak-dur) var(--ak-ease);
}
.ak-nav__list a:hover, .ak-nav__list a.is-current { color: var(--ak-fg); }
.ak-nav__list a:hover::after, .ak-nav__list a.is-current::after { transform: scaleX(1); transform-origin: 0 50%; }

.ak-header__meta { display: flex; align-items: center; gap: var(--ak-s4); }

.ak-header__mail {
	display: none; position: relative; overflow: hidden;
	font-size: 13px; letter-spacing: .04em; color: #fff; background: var(--ak-fg);
	border-radius: var(--ak-r-pill); padding: 9px 18px;
	transition: transform var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}
.ak-header__mail span { margin-left: 6px; }
.ak-header__mail::before {
	content: ""; position: absolute; inset: 0; background: var(--ak-sky-deep);
	transform: translateY(101%); transition: transform var(--ak-dur) var(--ak-ease); z-index: -1;
}
.ak-header__mail:hover { transform: translateY(-2px); box-shadow: var(--ak-shadow-sm); }
.ak-header__mail:hover::before { transform: translateY(0); }
@media (min-width: 900px) { .ak-header__mail { display: inline-flex; align-items: center; } }

.ak-burger { padding: 10px; margin: -10px; }
@media (min-width: 900px) { .ak-burger { display: none; } }
.ak-burger__box { display: block; width: 24px; height: 12px; position: relative; }
.ak-burger__box i { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ak-fg); transition: transform var(--ak-dur) var(--ak-ease); }
.ak-burger__box i:nth-child(1) { top: 0; }
.ak-burger__box i:nth-child(2) { bottom: 0; }
.ak-burger[aria-expanded="true"] .ak-burger__box i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ak-burger[aria-expanded="true"] .ak-burger__box i:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.ak-drawer {
	position: fixed; inset: 0; z-index: 90; background: var(--ak-bg);
	background-image: var(--ak-dots); background-size: var(--ak-dots-size);
	display: flex; align-items: center; opacity: 0; visibility: hidden;
	transition: opacity var(--ak-dur) var(--ak-ease), visibility var(--ak-dur);
}
.ak-drawer[hidden] { display: flex; }
.ak-drawer.is-open { opacity: 1; visibility: visible; }
.ak-drawer__inner { width: 100%; padding: var(--ak-header) var(--ak-gutter) var(--ak-s12); }
.ak-drawer__list li + li { margin-top: var(--ak-s2); }
.ak-drawer__list a {
	display: block; font-size: clamp(2.25rem, 11vw, 3.5rem); font-weight: var(--ak-w-medium);
	line-height: 1.1; letter-spacing: -.03em;
	opacity: 0; transform: translateY(18px);
	transition: opacity .45s var(--ak-ease-out), transform .45s var(--ak-ease-out);
}
.ak-drawer.is-open .ak-drawer__list a { opacity: 1; transform: none; }
.ak-drawer.is-open .ak-drawer__list li:nth-child(1) a { transition-delay: 80ms; }
.ak-drawer.is-open .ak-drawer__list li:nth-child(2) a { transition-delay: 140ms; }
.ak-drawer.is-open .ak-drawer__list li:nth-child(3) a { transition-delay: 200ms; }
.ak-drawer.is-open .ak-drawer__list li:nth-child(4) a { transition-delay: 260ms; }
.ak-drawer__foot { margin-top: var(--ak-s12); padding-top: var(--ak-s6); border-top: 1px solid var(--ak-line); display: flex; flex-wrap: wrap; gap: var(--ak-s6); font-size: 14px; color: var(--ak-fg-muted); }
body.ak-drawer-open { overflow: hidden; }

/* =====================================================
   HERO
   ===================================================== */
.ak-hero {
	position: relative; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end;
	background: var(--ak-grad-hero);
	padding: calc(var(--ak-header) + var(--ak-s24)) var(--ak-gutter) var(--ak-s12);
	overflow: hidden;
}
/* dot-grid texture, faded out toward the edges */
.ak-hero::after {
	content: ""; position: absolute; inset: 0;
	background-image: var(--ak-dots); background-size: var(--ak-dots-size);
	-webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 74%);
	mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 74%);
	pointer-events: none;
}
.ak-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--ak-max); margin: 0 auto; }
.ak-hero__eyebrow { margin-bottom: var(--ak-s6); }

.ak-hero__title {
	font-size: clamp(3.25rem, 10.5vw, 7rem);
	font-weight: var(--ak-w-medium);
	line-height: .9; letter-spacing: -.035em; margin: 0 0 var(--ak-s8);
}
.ak-hero__line { max-width: 620px; margin: 0; font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--ak-fg-muted); }

.ak-hero__scroll {
	position: relative; z-index: 1; width: 100%; max-width: var(--ak-max); margin: var(--ak-s12) auto 0;
	display: flex; align-items: center; gap: var(--ak-s3);
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ak-fg-faint);
}
.ak-hero__scroll-line { flex: 1; max-width: 120px; height: 2px; background: var(--ak-line); position: relative; overflow: hidden; border-radius: 2px; }
.ak-hero__scroll-line::after {
	content: ""; position: absolute; inset: 0; background: var(--ak-orange);
	transform: translateX(-100%); animation: ak-sweep 2.4s var(--ak-ease) infinite;
}
@keyframes ak-sweep { 0%{transform:translateX(-100%)} 60%{transform:translateX(100%)} 100%{transform:translateX(100%)} }

/* =====================================================
   MARQUEE
   ===================================================== */
.ak-marquee {
	border-top: 1px solid var(--ak-line-soft); border-bottom: 1px solid var(--ak-line-soft);
	padding: var(--ak-s6) 0; overflow: hidden; background: var(--ak-bg);
}
.ak-marquee__track { display: flex; width: max-content; animation: ak-marquee 38s linear infinite; }
.ak-marquee__group { display: flex; align-items: center; }
.ak-marquee__item { font-size: clamp(1.125rem, 2.2vw, 1.75rem); font-weight: var(--ak-w-medium); letter-spacing: -.02em; white-space: nowrap; padding: 0 var(--ak-s6); }
.ak-marquee__star { color: var(--ak-orange); font-size: .8em; }
@keyframes ak-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ak-marquee:hover .ak-marquee__track { animation-play-state: paused; }

/* =====================================================
   INTRO
   ===================================================== */
.ak-intro { max-width: var(--ak-max); margin: 0 auto; padding: var(--ak-s32) var(--ak-gutter); }
.ak-intro__text {
	margin: 0; max-width: 22ch;
	font-size: clamp(1.75rem, 4.6vw, 3.5rem); font-weight: var(--ak-w-medium);
	line-height: 1.15; letter-spacing: -.03em;
}

/* =====================================================
   FEATURED WORK
   ===================================================== */
.ak-work { padding: var(--ak-s24) 0; background: var(--ak-bg); border-top: 1px solid var(--ak-line-soft); }
.ak-work__body { max-width: var(--ak-max); margin: var(--ak-s24) auto 0; padding: 0 var(--ak-gutter); }
.ak-work__stage { display: none; }
.ak-work__list { border-top: 1px solid var(--ak-line); }
.ak-work__item { border-bottom: 1px solid var(--ak-line); position: relative; }

/* sky sweep behind the hovered row */
.ak-work__item::before {
	content: ""; position: absolute; inset: 0; background: var(--ak-sky-faint);
	transform: scaleY(0); transform-origin: 50% 100%;
	transition: transform var(--ak-dur) var(--ak-ease); pointer-events: none;
}
.ak-work__item:hover::before { transform: scaleY(1); transform-origin: 50% 0%; }

.ak-work__link {
	position: relative; display: grid; grid-template-columns: auto 1fr auto;
	grid-template-areas: "num text arrow" "num year arrow";
	align-items: start; gap: var(--ak-s1) var(--ak-s4);
	padding: var(--ak-s7) 0;
	transition: opacity var(--ak-dur) var(--ak-ease), padding-left var(--ak-dur) var(--ak-ease);
}
@media (min-width: 1000px) { .ak-work__item:hover .ak-work__link { padding-left: var(--ak-s4); } }

.ak-work__num { grid-area: num; font-size: 12px; font-weight: var(--ak-w-medium); letter-spacing: .12em; color: var(--ak-orange-deep); padding-top: 8px; }
.ak-work__text { grid-area: text; min-width: 0; }
.ak-work__name { display: block; font-size: clamp(1.625rem, 4vw, 2.25rem); font-weight: var(--ak-w-medium); line-height: 1.25; letter-spacing: -.025em; }
.ak-work__kicker { display: block; margin-top: var(--ak-s2); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ak-fg-faint); }
.ak-work__excerpt { display: block; margin-top: var(--ak-s3); max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--ak-fg-muted); }

.ak-work__thumb { display: block; margin-top: var(--ak-s6); border-radius: var(--ak-r-sm); overflow: hidden; aspect-ratio: 16/10; background: var(--ak-bg-raise); position: relative; }
.ak-work__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ak-work__thumb::after { content: ""; position: absolute; inset: 0; background: var(--ak-scrim); opacity: .5; }

.ak-work__year { grid-area: year; align-self: end; font-size: 13px; color: var(--ak-fg-faint); padding-top: var(--ak-s4); }
.ak-work__arrow { grid-area: arrow; font-size: 1.25rem; color: var(--ak-fg-faint); padding-top: 6px; transition: transform var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease); }
.ak-work__link:hover .ak-work__arrow { transform: translate(3px,-3px); color: var(--ak-sky-deep); }

.ak-work__placeholder {
	display: grid; place-items: center; height: 100%;
	font-size: 2rem; font-weight: var(--ak-w-medium); color: var(--ak-fg-faint);
	background: linear-gradient(140deg, var(--ak-bg-wash), var(--ak-bg-sunken));
}

@media (min-width: 1000px) {
	.ak-work__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--ak-s24); align-items: start; }
	.ak-work__body > * { min-width: 0; }
	.ak-work__stage { display: block; position: sticky; top: calc(var(--ak-header) + var(--ak-s8)); }

	.ak-work__frame {
		position: relative; aspect-ratio: 4/3; border-radius: var(--ak-r-lg); overflow: hidden;
		background: var(--ak-bg-sunken); border: 1px solid var(--ak-line-soft);
		box-shadow: var(--ak-shadow-lg);
	}
	.ak-work__shot {
		position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06);
		transition: opacity var(--ak-dur-slow) var(--ak-ease-out), transform 1.1s var(--ak-ease-out);
	}
	.ak-work__shot.is-active { opacity: 1; transform: scale(1); }
	.ak-work__shot img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

	.ak-work__counter { margin: var(--ak-s4) 0 0; font-size: 13px; letter-spacing: .12em; color: var(--ak-fg-faint); font-variant-numeric: tabular-nums; }
	.ak-work__counter i { font-style: normal; margin: 0 6px; color: var(--ak-orange); }

	.ak-work__thumb { display: none; }
	.ak-work__link { padding: var(--ak-s8) 0; }

	.ak-work__item .ak-work__link { opacity: .62; }
	.ak-work__item.is-active .ak-work__link { opacity: 1; }
	.ak-work__body:hover .ak-work__item .ak-work__link { opacity: .62; }
	.ak-work__body:hover .ak-work__item:hover .ak-work__link { opacity: 1; }
}

/* =====================================================
   SERVICES RAIL
   ===================================================== */
.ak-rail { padding: var(--ak-s24) 0; background: var(--ak-bg-wash); border-top: 1px solid var(--ak-line-soft); overflow: hidden; position: relative; }
.ak-rail::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--ak-dots); background-size: var(--ak-dots-size);
	opacity: .55; pointer-events: none;
}
.ak-rail > * { position: relative; }

.ak-rail__hint { max-width: var(--ak-max); margin: var(--ak-s8) auto var(--ak-s4); padding: 0 var(--ak-gutter); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ak-fg-faint); }

/* Vertical padding gives the hover lift somewhere to go. overflow-x:auto
   forces overflow-y to compute as auto, so a card that lifts past the box
   would otherwise be clipped -- this is what was cutting the cards. */
.ak-rail__scroller {
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	padding: var(--ak-s3) 0 var(--ak-s7);
	cursor: grab;
}
.ak-rail__scroller:active { cursor: grabbing; }
.ak-rail__scroller::-webkit-scrollbar { display: none; }
.ak-rail__track { display: flex; gap: 0; width: max-content; padding: 0 var(--ak-gutter); }

/* rail controls */
.ak-rail__bar {
	max-width: var(--ak-max); margin: 0 auto var(--ak-s4);
	padding: 0 var(--ak-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: var(--ak-s4);
}
.ak-rail__nav { display: flex; gap: var(--ak-s2); }
.ak-rail__btn {
	width: 44px; height: 44px; display: grid; place-items: center;
	border: 1px solid var(--ak-line); background: var(--ak-bg);
	color: var(--ak-fg); font-size: 15px;
	transition: background var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease), border-color var(--ak-dur) var(--ak-ease);
}
.ak-rail__btn:hover:not(:disabled) { background: var(--ak-fg); color: #fff; border-color: var(--ak-fg); }
.ak-rail__btn:disabled { opacity: .32; cursor: default; }

/* ---- cards: sharp-cornered, alternating light / ink, no shadow ---- */
.ak-card {
	position: relative; scroll-snap-align: start; flex: none;
	width: min(86vw, 420px); min-height: 500px;
	display: flex; flex-direction: column;
	padding: 40px 28px;
	background: var(--ak-bg);
	color: var(--ak-fg);
	border: 1px solid var(--ak-line);
	border-right-width: 0;
	border-radius: 0;
	transition: transform var(--ak-dur) var(--ak-ease), background var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease);
}
.ak-card:last-child { border-right-width: 1px; }

/* every second card inverts — the alternating rhythm */
.ak-card:nth-child(even) {
	background: var(--ak-fg); color: #fff;
	border-color: rgba(255,255,255,.2);
}

/* accent hairline that draws across the top on hover — stays inside the
   card's own box, so nothing can be clipped by the scroller */
.ak-card::after {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
	background: var(--ak-orange); transform: scaleX(0); transform-origin: 0 50%;
	transition: transform var(--ak-dur) var(--ak-ease);
}
.ak-card:hover { transform: translateY(-4px); }
.ak-card:hover::after { transform: scaleX(1); }

.ak-card__index {
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--ak-orange-deep); font-variant-numeric: tabular-nums;
}
.ak-card:nth-child(even) .ak-card__index { color: var(--ak-orange); }

.ak-card__kicker {
	margin: 0 0 auto; font-size: 11px; font-weight: var(--ak-w-medium);
	letter-spacing: .22em; text-transform: uppercase; color: inherit; opacity: .62;
}
.ak-card__head { display: flex; align-items: center; gap: var(--ak-s3); margin-bottom: var(--ak-s6); }

.ak-card__title {
	margin: var(--ak-s8) 0 var(--ak-s4);
	font-size: clamp(2rem, 3.4vw, 3.125rem);
	font-weight: var(--ak-w-medium);
	line-height: .94; letter-spacing: -.02em;
	text-transform: uppercase;
}

.ak-card__body { font-size: 16px; line-height: 1.6; color: inherit; opacity: .72; }
.ak-card__body p:last-child { margin-bottom: 0; }

/* deliverables as bordered rows with a trailing arrow, not pills */
.ak-card__tags { display: block; margin-top: var(--ak-s6); }
.ak-card__tags li {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ak-s3);
	font-size: 14px; line-height: 1.3; padding: 11px 0;
	border-top: 1px solid currentColor; border-color: var(--ak-line);
	color: inherit;
}
.ak-card:nth-child(even) .ak-card__tags li { border-color: rgba(255,255,255,.2); }
.ak-card__tags li::after {
	content: "\2192"; color: var(--ak-orange-deep); flex: none;
	transition: transform var(--ak-dur) var(--ak-ease);
}
.ak-card:nth-child(even) .ak-card__tags li::after { color: var(--ak-orange); }
.ak-card__tags li:hover::after { transform: translateX(4px); }

@media (min-width: 768px) { .ak-card { width: 420px; padding: 44px 32px; } }

/* =====================================================
   CLIENTS — 4-up grid in the reference's "Web Design" slot
   ===================================================== */
.ak-clients { padding: var(--ak-s24) 0; background: var(--ak-bg); border-top: 1px solid var(--ak-line-soft); }
.ak-clients__grid {
	max-width: var(--ak-max); margin: var(--ak-s12) auto 0; padding: 0 var(--ak-gutter);
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ak-s4);
}
@media (min-width: 700px)  { .ak-clients__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .ak-clients__grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.ak-clients__cell {
	display: grid; place-items: center; padding: var(--ak-s7) var(--ak-s4);
	border: 1px solid var(--ak-line-soft); border-radius: var(--ak-r);
	background: var(--ak-bg-soft); min-height: 108px;
	transition: border-color var(--ak-dur) var(--ak-ease), background var(--ak-dur) var(--ak-ease), transform var(--ak-dur) var(--ak-ease);
}
.ak-clients__cell:hover { border-color: var(--ak-line-sky); background: var(--ak-bg-wash); transform: translateY(-4px); }
.ak-clients__cell img {
	max-height: 40px; width: auto; opacity: .55;
	filter: grayscale(1); transition: opacity var(--ak-dur) var(--ak-ease), filter var(--ak-dur) var(--ak-ease);
}
.ak-clients__cell:hover img { opacity: 1; filter: none; }

/* =====================================================
   ABOUT
   ===================================================== */
.ak-about { max-width: var(--ak-max); margin: 0 auto; padding: var(--ak-s24) var(--ak-gutter); border-top: 1px solid var(--ak-line-soft); }
.ak-about__body { margin-top: var(--ak-s8); max-width: 620px; font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.7; color: var(--ak-fg-muted); }
.ak-about__body p + p { margin-top: 1.2em; }

.ak-about__links { display: flex; flex-wrap: wrap; gap: var(--ak-s3); margin-top: var(--ak-s8); }
.ak-about__links a {
	position: relative; overflow: hidden; font-size: 14px; color: var(--ak-fg);
	border: 1px solid var(--ak-line); border-radius: var(--ak-r-pill); padding: 10px 18px;
	transition: color var(--ak-dur) var(--ak-ease), border-color var(--ak-dur) var(--ak-ease), transform var(--ak-dur) var(--ak-ease);
}
.ak-about__links a::before {
	content: ""; position: absolute; inset: 0; background: var(--ak-fg); z-index: -1;
	transform: translateY(101%); transition: transform var(--ak-dur) var(--ak-ease);
}
.ak-about__links a span { margin-left: 6px; }
.ak-about__links a:hover { color: #fff; border-color: var(--ak-fg); transform: translateY(-2px); }
.ak-about__links a:hover::before { transform: translateY(0); }

@media (min-width: 1000px) {
	.ak-about { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: var(--ak-s24); align-items: start; }
	.ak-about > * { min-width: 0; }
	.ak-about__body { margin-top: var(--ak-s1); }
	.ak-about__head { position: sticky; top: calc(var(--ak-header) + var(--ak-s8)); }
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.ak-words { padding: var(--ak-s24) 0; background: var(--ak-bg-soft); border-top: 1px solid var(--ak-line-soft); }
.ak-words__list { max-width: var(--ak-max); margin: var(--ak-s24) auto 0; padding: 0 var(--ak-gutter); border-top: 1px solid var(--ak-line); }
.ak-words__item { position: relative; padding: var(--ak-s8) 0; border-bottom: 1px solid var(--ak-line); }
.ak-words__role { margin: 0 0 var(--ak-s4); font-size: 12px; font-weight: var(--ak-w-medium); letter-spacing: .16em; text-transform: uppercase; color: var(--ak-orange-deep); }
.ak-words__quote { margin: 0; max-width: 760px; font-size: clamp(1.25rem, 2.8vw, 1.875rem); font-weight: var(--ak-w-regular); line-height: 1.35; letter-spacing: -.02em; color: var(--ak-fg); }
.ak-words__quote p { margin: 0; }
.ak-words__quote p + p { margin-top: .6em; }
.ak-words__num { position: absolute; top: var(--ak-s8); right: 0; font-size: 12px; font-weight: var(--ak-w-medium); letter-spacing: .12em; color: var(--ak-fg-faint); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .ak-words__item { padding: var(--ak-s12) 0; } .ak-words__num { top: var(--ak-s12); } }

/* =====================================================
   FOOTER
   ===================================================== */
.ak-footer { background: var(--ak-bg); border-top: 1px solid var(--ak-line-soft); position: relative; overflow: hidden; }
.ak-footer::before { content: ""; position: absolute; inset: -30% -20% auto -20%; height: 85%; background: var(--ak-grad-footer); pointer-events: none; }

.ak-footer__cta { position: relative; max-width: var(--ak-max); margin: 0 auto; padding: var(--ak-s32) var(--ak-gutter) var(--ak-s24); text-align: center; }
.ak-footer__title { font-size: clamp(3rem, 13vw, 10rem); font-weight: var(--ak-w-medium); line-height: .88; letter-spacing: -.045em; }
.ak-footer__title span { display: block; }
/* the one gradient-clipped headline — all three logo colours */
.ak-footer__title--alt {
	background: var(--ak-grad-text);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

.ak-footer__mailto {
	position: relative; overflow: hidden; z-index: 0;
	display: inline-flex; align-items: center; gap: var(--ak-s2); margin-top: var(--ak-s8);
	font-size: clamp(.9375rem, 1.8vw, 1.125rem); color: #fff; background: var(--ak-fg);
	border-radius: var(--ak-r-pill); padding: 16px 30px;
	transition: transform var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}
.ak-footer__mailto::before {
	content: ""; position: absolute; inset: 0; background: var(--ak-sky-deep); z-index: -1;
	transform: translateY(101%); transition: transform var(--ak-dur) var(--ak-ease);
}
.ak-footer__mailto:hover { transform: translateY(-3px); box-shadow: var(--ak-shadow); }
.ak-footer__mailto:hover::before { transform: translateY(0); }

.ak-footer__grid { position: relative; max-width: var(--ak-max); margin: 0 auto; padding: var(--ak-s12) var(--ak-gutter); display: grid; gap: var(--ak-s8); border-top: 1px solid var(--ak-line-soft); }
@media (min-width: 768px) { .ak-footer__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.ak-footer__col .ak-eyebrow { margin-bottom: var(--ak-s4); }
.ak-footer__list li + li { margin-top: var(--ak-s3); }
.ak-footer__list a { font-size: 15px; color: var(--ak-fg-muted); transition: color var(--ak-dur) var(--ak-ease), padding-left var(--ak-dur) var(--ak-ease); }
.ak-footer__list a span { margin-left: 5px; font-size: .85em; }
.ak-footer__list a:hover { color: var(--ak-sky-deep); padding-left: 5px; }

.ak-footer__big { display: block; font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: var(--ak-w-medium); line-height: 1.35; color: var(--ak-fg); transition: color var(--ak-dur) var(--ak-ease); }
.ak-footer__big:hover { color: var(--ak-sky-deep); }
.ak-footer__big + .ak-footer__big { margin-top: var(--ak-s1); }

.ak-footer__status { display: flex; align-items: center; gap: var(--ak-s2); margin: var(--ak-s4) 0 0; font-size: 13px; color: var(--ak-fg-faint); }
.ak-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ak-orange); flex: none; box-shadow: 0 0 0 0 rgba(234,116,49,.6); animation: ak-pulse 2.4s infinite; }
@keyframes ak-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(234,116,49,.5); }
	70%  { box-shadow: 0 0 0 8px rgba(234,116,49,0); }
	100% { box-shadow: 0 0 0 0 rgba(234,116,49,0); }
}

.ak-footer__widgets { position: relative; max-width: var(--ak-max); margin: 0 auto; padding: 0 var(--ak-gutter) var(--ak-s8); }
.ak-footer__legal {
	position: relative; max-width: var(--ak-max); margin: 0 auto;
	padding: var(--ak-s6) var(--ak-gutter) var(--ak-s8); border-top: 1px solid var(--ak-line-soft);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--ak-s3); font-size: 13px; color: var(--ak-fg-faint);
}
.ak-footer__legal p { margin: 0; }
.ak-totop { display: inline-flex; align-items: center; gap: 7px; transition: color var(--ak-dur) var(--ak-ease); }
.ak-totop:hover { color: var(--ak-sky-deep); }

/* =====================================================
   SINGLE PROJECT
   ===================================================== */
.ak-single { padding: calc(var(--ak-header) + var(--ak-s24)) 0 0; }
.ak-single__head { max-width: var(--ak-max); margin: 0 auto; padding: 0 var(--ak-gutter); }
.ak-single__title { font-size: clamp(2.75rem, 8.5vw, 6rem); font-weight: var(--ak-w-medium); line-height: .92; letter-spacing: -.035em; margin: 0 0 var(--ak-s8); text-wrap: balance; }
.ak-single__lede { max-width: 620px; font-size: clamp(1.0625rem, 1.9vw, 1.375rem); line-height: 1.55; color: var(--ak-fg-muted); margin: 0; }

.ak-single__facts { display: grid; gap: var(--ak-s6); margin: var(--ak-s12) 0 0; padding: var(--ak-s7) 0; border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); }
@media (min-width: 700px) { .ak-single__facts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ak-single__fact dt { font-size: 12px; font-weight: var(--ak-w-medium); letter-spacing: .16em; text-transform: uppercase; color: var(--ak-fg-faint); margin-bottom: var(--ak-s2); }
.ak-single__fact dd { margin: 0; font-size: 15px; }
.ak-single__fact dd a { color: var(--ak-sky-deep); border-bottom: 1px solid var(--ak-line); padding-bottom: 2px; }
.ak-single__fact dd a:hover { border-color: var(--ak-sky-deep); }

.ak-single__cover { max-width: var(--ak-max); margin: var(--ak-s24) auto 0; padding: 0 var(--ak-gutter); }
.ak-single__cover img { width: 100%; border-radius: var(--ak-r-lg); border: 1px solid var(--ak-line-soft); box-shadow: var(--ak-shadow-lg); }

.ak-single__content { max-width: 760px; margin: var(--ak-s24) auto; padding: 0 var(--ak-gutter); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.75; color: var(--ak-fg-muted); }
.ak-single__content h2, .ak-single__content h3 { color: var(--ak-fg); letter-spacing: -.025em; margin: 2em 0 .6em; font-weight: var(--ak-w-medium); }
.ak-single__content h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; }
.ak-single__content h3 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.25; }
.ak-single__content a { color: var(--ak-sky-deep); border-bottom: 1px solid var(--ak-line); }
.ak-single__content a:hover { border-color: var(--ak-sky-deep); }
.ak-single__content ul { list-style: disc; padding-left: 1.2em; margin: 1em 0; }
.ak-single__content li { margin-bottom: .5em; }
.ak-single__content img { border-radius: var(--ak-r-sm); margin: 2em 0; }

.ak-single__nav { max-width: var(--ak-max); margin: 0 auto; padding: var(--ak-s8) var(--ak-gutter) var(--ak-s24); border-top: 1px solid var(--ak-line); display: flex; justify-content: space-between; gap: var(--ak-s4); font-size: 15px; color: var(--ak-fg-muted); }
.ak-single__nav a:hover { color: var(--ak-sky-deep); }

/* =====================================================
   PAGE / ARCHIVE / 404
   ===================================================== */
.ak-page { padding: calc(var(--ak-header) + var(--ak-s24)) 0 var(--ak-s24); }
.ak-page__head { max-width: var(--ak-max); margin: 0 auto var(--ak-s12); padding: 0 var(--ak-gutter); }
.ak-page__content { max-width: 760px; margin: 0 auto; padding: 0 var(--ak-gutter); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.75; color: var(--ak-fg-muted); }
.ak-page__content h1, .ak-page__content h2, .ak-page__content h3 { color: var(--ak-fg); letter-spacing: -.025em; margin: 1.8em 0 .6em; font-weight: var(--ak-w-medium); }
.ak-page__content a { color: var(--ak-sky-deep); border-bottom: 1px solid var(--ak-line); }

.ak-grid { max-width: var(--ak-max); margin: 0 auto; padding: 0 var(--ak-gutter); display: grid; gap: var(--ak-s7); }
@media (min-width: 700px)  { .ak-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .ak-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.ak-tile__media { border-radius: var(--ak-r-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--ak-bg-sunken); border: 1px solid var(--ak-line-soft); position: relative; }
.ak-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ak-dur-slow) var(--ak-ease-out); }
.ak-tile:hover .ak-tile__media img { transform: scale(1.05); }
.ak-tile__title { margin: var(--ak-s4) 0 var(--ak-s1); font-size: 1.5rem; font-weight: var(--ak-w-medium); letter-spacing: -.025em; }
.ak-tile__meta { font-size: 13px; color: var(--ak-fg-faint); }

.ak-pagination { max-width: var(--ak-max); margin: var(--ak-s12) auto 0; padding: 0 var(--ak-gutter); display: flex; gap: var(--ak-s2); flex-wrap: wrap; font-size: 15px; }
.ak-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--ak-line); border-radius: var(--ak-r-pill); color: var(--ak-fg-muted);
	transition: background var(--ak-dur) var(--ak-ease), color var(--ak-dur) var(--ak-ease), border-color var(--ak-dur) var(--ak-ease);
}
.ak-pagination .page-numbers.current, .ak-pagination .page-numbers:hover { background: var(--ak-fg); color: #fff; border-color: var(--ak-fg); }

.ak-btn {
	position: relative; overflow: hidden; z-index: 0;
	display: inline-flex; align-items: center; gap: var(--ak-s2); margin-top: var(--ak-s8);
	padding: 14px 26px; background: var(--ak-fg); color: #fff;
	border-radius: var(--ak-r-pill); font-size: 15px;
	transition: transform var(--ak-dur) var(--ak-ease), box-shadow var(--ak-dur) var(--ak-ease);
}
.ak-btn::before { content: ""; position: absolute; inset: 0; background: var(--ak-sky-deep); z-index: -1; transform: translateY(101%); transition: transform var(--ak-dur) var(--ak-ease); }
.ak-btn:hover { transform: translateY(-2px); box-shadow: var(--ak-shadow); }
.ak-btn:hover::before { transform: translateY(0); }

.ak-comments { margin-top: var(--ak-s12); padding-top: var(--ak-s8); border-top: 1px solid var(--ak-line); }
.ak-comments__list { margin: var(--ak-s6) 0; }

/* =====================================================
   MOTION OPT-OUT
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.ak-word, .ak-char { opacity: 1; transform: none; }
	.ak-reveal, .ak-stagger > * { opacity: 1; transform: none; }
	.ak-marquee__track { animation: none; }
	.ak-cursor, .ak-cursor-ring { display: none; }
	.ak-reveal-screen { display: none; animation: none; }
}