@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap');

@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --paper: #FBFAF7;
  --paper-2: #F1EFEA;
  --ink: #1A1D1C;
  --ink-60: #1A1D1C99;
  --ink-40: #1A1D1C66;
  --ink-20: #1A1D1C26;
  --rule: #1A1D1C1A;
  --felt: #4C7766;
  --felt-deep: #35564A;
  --felt-10: #4C776614;
  --felt-20: #4C776630;
  --g: 'Gilroy', sans-serif;
  --b: 'DM Sans', sans-serif;
  --m: 'DM Sans', sans-serif;
  --w: 1320px;
  --r: 20px;
  --r-lg: 28px;
  --card: #2E4A3F;
  --algocard: #F2F5F8;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #141917;
  --paper-2: #1E2523;
  --ink: #F0EFEA;
  --ink-60: #F0EFEA99;
  --ink-40: #F0EFEA66;
  --ink-20: #F0EFEA26;
  --rule: #F0EFEA1F;
  --algocard: #F2F5F8;
  --felt: #86B39F;
  --felt-deep: #A8CCBB;
  --felt-10: #86B39F30;
  --felt-20: #86B39F33;
  --card: #24352E;
  color-scheme: dark;
}



* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--b);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--felt); text-decoration: none; }
a:hover { color: var(--felt-deep); }
::selection { background: var(--felt-20); }
:focus-visible { outline: 2px solid var(--felt); outline-offset: 3px; border-radius: 8px; }
h1,h2,h3,h4 { font-family: var(--g); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink-20); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--felt); }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.5; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes loaddot { 0%,70%,100% { opacity: 0.18; } 30% { opacity: 1; } }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.algobanner { background: #FFFFFF; }

.algoline { color: #5C7FA8; }
.logooutline figure > div { overflow: visible !important; }
@keyframes kcA { 0%,100% { transform: translateY(0) rotate(-0.5deg) } 50% { transform: translateY(-9px) rotate(0.4deg) } }
@keyframes kcB { 0%,100% { transform: translateY(-3px) rotate(0.4deg) } 50% { transform: translateY(-13px) rotate(-0.5deg) } }
@keyframes kcC { 0%,100% { transform: translateY(-2px) rotate(0.3deg) } 50% { transform: translateY(-8px) rotate(-0.6deg) } }
.logomark img { filter: none; }
.logoglow img { filter: none; }
:root { --miru: #1C5AA1; --miru-20: rgba(28,90,161,0.28); --miru-10: rgba(28,90,161,0.09); }
[data-theme="dark"] { --miru: #7FB2F0; --miru-20: rgba(127,178,240,0.34); --miru-10: rgba(127,178,240,0.12); }

/* Miru banner: looping unfurl + drifting steel gradient with a fine texture */
.mirubanner { position: relative; overflow: hidden; background: #123C72; }
/* a slow vertical sweep of hairlines, like a scanning pass over the plate */
.mirubanner::after { content: ""; position: absolute; inset: -50% 0; pointer-events: none; opacity: 0.55;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, rgba(255,255,255,0) 1px 7px);
  animation: miruscan 15s linear infinite; }
.mirubanner > .miruwrap { position: relative; z-index: 1; }
/* rings ripple outward from the center of the plate */
.mirurings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.mirurings i { position: absolute; left: 0; top: 0; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 1px solid rgba(186,216,255,0.5); opacity: 0; animation: mirurings 12s linear infinite; }
.mirurings i:nth-child(2) { animation-delay: 3s; }
.mirurings i:nth-child(3) { animation-delay: 6s; }
.mirurings i:nth-child(4) { animation-delay: 9s; }
@keyframes mirurings {
  0% { transform: scale(0.12); opacity: 0; }
  8% { opacity: 0.55; }
  70% { opacity: 0.14; }
  100% { transform: scale(9); opacity: 0; }
}
.mirurings.sm i { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-color: rgba(186,216,255,0.42); animation-duration: 10s; }
.mirurings.sm i:nth-child(2) { animation-delay: 2.5s; }
.mirurings.sm i:nth-child(3) { animation-delay: 5s; }
.mirurings.sm i:nth-child(4) { animation-delay: 7.5s; }
@media (prefers-reduced-motion: reduce) { .mirurings { display: none; } }
@keyframes miruscan { 0% { transform: translateY(0); } 100% { transform: translateY(7px); } }
@keyframes miruslide { 0%, 10% { transform: translateX(31.33%); } 45%, 78% { transform: translateX(0); } 97%, 100% { transform: translateX(31.33%); } }
@keyframes miruclip { 0%, 10% { clip-path: inset(0 62.67% 0 0); } 45%, 78% { clip-path: inset(0 0 0 0); } 97%, 100% { clip-path: inset(0 62.67% 0 0); } }
.miruloop { display: block; animation: miruslide 7s cubic-bezier(0.22,1,0.36,1) infinite; }
.miruloop img { display: block; width: 100%; height: auto; animation: miruclip 7s cubic-bezier(0.22,1,0.36,1) infinite; }

/* Capability wheel */
.capwheel path, .capwheel circle, .capwheel text { transition: fill .3s ease, opacity .3s ease; }
.caplist { display: none; }
@media (max-width: 780px) { .capwheel { display: none; } .caplist { display: grid; } }

/* Miru lockup: M sits centred, "iru" unfurls to its right on hover, then the
   whole lockup settles back to centre */
.mirumark { display: block; transform: translateX(31.33%); transition: transform .5s cubic-bezier(0.22,1,0.36,1) 0s; }
.mirumark img { display: block; width: 100%; height: auto; clip-path: inset(0 62.67% 0 0); transition: clip-path .45s cubic-bezier(0.22,1,0.36,1) 0s; }
a:hover .mirumark { transform: translateX(0); transition: transform .6s cubic-bezier(0.22,1,0.36,1) 0s; }
a:hover .mirumark img { clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(0.22,1,0.36,1) 0s; }
@media (prefers-reduced-motion: reduce) { .mirumark, .mirumark img, a:hover .mirumark, a:hover .mirumark img { transition: none; } }

.logoplate { background: transparent; }
[data-theme="dark"] .logoplate img, [data-theme="dark"] .logooutline img { filter: drop-shadow(0 0 16px rgba(255,255,255,0.21)) drop-shadow(0 0 3px rgba(255,255,255,0.25)); }
.alborder img { border: 1px solid #AEAEAE; border-radius: 12px; box-sizing: border-box; }
.alborder .logoplate img, .alborder .logooutline img { border: none; }

.phoneframe { border: 1px solid transparent; }
[data-theme="dark"] .phoneframe { border-color: rgba(240,239,234,0.28); }

.imgedge { border: 1px solid #E8E8E8; }
.entryedge { border: 1px solid transparent; }
[data-theme="dark"] .entryedge { border: 1px solid rgba(240,239,234,0.13); }
[data-theme="dark"] .imgedge { border: 1px solid rgba(240,239,234,0.13); }

.reveal { opacity: 0; }
.reveal.in { animation: rise 0.75s cubic-bezier(0.22,1,0.36,1) forwards; }

.btn-arrow .ic { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; color: inherit; transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(0.22,1,0.36,1); }
.btn-arrow:hover .ic { background: var(--paper); color: var(--felt); transform: translateX(4px); }

/* Discover cover: gradient orbs drifting very slowly */
.orbdrift { animation: orbdrift 13s ease-in-out infinite alternate; will-change: transform; }
@keyframes orbdrift {
  0% { transform: translate3d(-4%, -3%, 0) scale(1.08); }
  50% { transform: translate3d(4%, 3.5%, 0) scale(1.14); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .orbdrift { animation: none; } }

/* phone: swipe replaces the carousel arrows, and the side rail steps aside */
@media (max-width: 700px) { .cnav { display: none; } }

/* About hero: two columns on desktop, photo above the bio on phones */
.aboutrow { grid-template-columns: minmax(0,1fr) clamp(340px,34vw,540px); }
@media (max-width: 820px) {
  .aboutrow { grid-template-columns: minmax(0,1fr); }
  .aboutrow > *:first-child { order: 2; }
  .aboutrow > *:last-child { order: 1; }
}

/* work grid on phones: a smaller AlgoLink mark, and the Travel App pins nudged clear of the crop */
@media (max-width: 700px) {
  .kglogo { width: 27.6% !important; }
  .pinset { transform: translateY(9%); }
}

/* Featured work: a full screen of its own on desktop, straight after the hero on phones */
.featured { padding: clamp(40px,6vh,72px) clamp(20px,4vw,56px); min-height: 100vh; }
@media (max-width: 700px) {
  .featured { min-height: 0; padding: clamp(26px,4vh,40px) 20px clamp(40px,6vh,56px); }
}

@media (max-width: 700px) { .kglogoc { top: calc(50% + 12px) !important; } }

/* carousel cards run shorter on phones only */
@media (max-width: 700px) { .cframe { height: clamp(247px,38vh,403px) !important; } }

/* case studies: image/text pairs stack on tablet, image rows go full width on phones */
@media (max-width: 1024px) {
  .stackpair { grid-template-columns: minmax(0,1fr) !important; }
  .stackimgs { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 700px) {
  .stackimgs { grid-template-columns: minmax(0,1fr) !important; }
  .stackflow { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto !important; }
  .stackflow > *:nth-child(1) { order: 1; }
  .stackflow > *:nth-child(3) { order: 2; }
  .stackflow > *:nth-child(5) { order: 3; }
  .stackflow > *:nth-child(2) { order: 4; margin-top: clamp(26px,5vw,40px); }
  .stackflow > *:nth-child(4) { order: 5; }
  .stackflow > *:nth-child(6) { order: 6; }
}

/* Travel App banner: the pin + label groups scale down so nothing crops at narrow widths */
.mappin { zoom: 1; }
@media (max-width: 1100px) { .mappin { zoom: 0.8; } }
@media (max-width: 860px) { .mappin { zoom: 0.62; } }
@media (max-width: 700px) { .mappin { zoom: 0.48; } }

/* Travel App: prototypes stay three across; the final screens go two per line on phones */
@media (max-width: 700px) {
  .finalset { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .protoset { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

/* Fulcrum: the ILTACON photo goes full width once it sits under the copy, and the
   closing CTA paragraph stops wrapping short once the button drops below it */
@media (max-width: 700px) {
  .iltafig { width: 100% !important; }
  .ctacopy { max-width: none !important; }
}

/* every case-study banner shares the Discover banner's height */
.casebanner { box-sizing: border-box; height: calc(2 * clamp(48px,7vw,96px) + clamp(71px,10.3vw,148px)); display: grid; place-items: center; overflow: hidden; }