/*
 * Exodus Core Solutions — shared foundation for the inner pages
 * (work, services, about, contact, legal).
 *
 * The look comes from the Work page, itself a hand translation of Jay's
 * React/Tailwind/Framer reference (docs/GALLERY_PROMPT.md). Tailwind
 * breakpoints are kept: sm = 640px, md = 768px, lg = 1024px, min-width.
 *
 * Each page loads this file first, then its own css/<page>.css.
 * Inner pages do NOT load css/main.css or css/pages.css.
 */

/* ---------------------------------------------------------------------- */
/* Reset + tokens                                                          */
/* ---------------------------------------------------------------------- */

*,
*::before,
*::after{ box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg: #0C0C0C;
  --ink: #D7E2EA;
  --white: #FFFFFF;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --round-xl: 40px;               /* rounded-[40px] sm:[50px] md:[60px] */
  --tuck: 2.5rem;                 /* how far a section slides over the one before it */
  --gutter: 1.25rem;              /* px-5 sm:px-8 md:px-10 */
}

@media (min-width: 640px){ :root{ --round-xl: 50px; --tuck: 3rem; --gutter: 2rem; } }
@media (min-width: 768px){ :root{ --round-xl: 60px; --tuck: 3.5rem; --gutter: 2.5rem; } }

html,
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Kanit', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Lenis (1.x) recommended rules */
html.lenis,
html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }

img,
video{ display: block; max-width: 100%; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3, h4{ font-weight: inherit; font-size: inherit; }

ul[role="list"],
ol[role="list"]{ list-style: none; }

button,
input,
textarea,
select{ font: inherit; color: inherit; }

:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

/* Section anchors and programmatic focus targets: no ring on them. */
[tabindex="-1"]:focus{ outline: none; }

.sr-only{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: .7rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  font-size: .875rem;
  transition: transform .2s var(--ease);
}
.skip-link:focus{ transform: translateY(0); }

/* Main wrapper — overflowX: 'clip' */
.inner-main{
  background: var(--bg);
  overflow-x: clip;
}

/* Missing media: js/inner.js swaps a failed image for a transparent pixel,
   so the box, alt text and any placeholder background survive. */
img.is-missing{ color: transparent; }

/* ---------------------------------------------------------------------- */
/* Custom cursor — the chrome 3D arrow (desktop, fine pointers only).      */
/* Page CSS that sets its own cursor on controls repeats the 48px rule.    */
/* ---------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine){
  html,
  body{ cursor: url("../assets/brand/cursor-32.png") 8 2, auto; }
  a,
  button,
  [role="button"],
  label,
  summary,
  select{ cursor: url("../assets/brand/cursor-48.png") 12 3, pointer; }
  input,
  textarea,
  [contenteditable]{ cursor: text; }
  input[type="checkbox"],
  input[type="radio"],
  input[type="submit"],
  input[type="button"]{ cursor: url("../assets/brand/cursor-48.png") 12 3, pointer; }
  button:disabled{ cursor: url("../assets/brand/cursor-32.png") 8 2, not-allowed; }
}

/* ---------------------------------------------------------------------- */
/* Type                                                                    */
/* ---------------------------------------------------------------------- */

/* .hero-heading — silver gradient text */
.hero-heading{
  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Shared big section heading: font-black uppercase leading-none
   tracking-tight text-center, clamp(3rem, 12vw, 160px) */
.section-heading{
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.025em;
  text-align: center;
  font-size: clamp(3rem, 12vw, 160px);
}
/* Same heading on a white panel: solid near-black instead of silver. */
.section-heading--dark{ color: var(--bg); }

.section-lede{
  max-width: 36rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-weight: 300;
  line-height: 1.6;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}
.panel .section-lede{ color: rgba(12, 12, 12, .65); }
.sheet .section-lede,
.section-lede--ink{ color: rgba(215, 226, 234, .75); }

/* ---------------------------------------------------------------------- */
/* FadeIn — whileInView, once, margin 50px, amount 0.                      */
/* Hidden state lives here so there is no flash before JS runs; the        */
/* <noscript> rule and the reduced-motion block below force it visible.    */
/* ---------------------------------------------------------------------- */

.fade{
  opacity: 0;
  transform: translate3d(var(--fx, 0px), var(--fy, 30px), 0);
  transition:
    opacity var(--fd, .7s) var(--ease) var(--fdl, 0s),
    transform var(--fd, .7s) var(--ease) var(--fdl, 0s);
}
.fade.is-in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* AnimatedText — per-character reveal on scroll (js/inner.js) */
[data-animated-text] .at-word{ display: inline-block; white-space: nowrap; }
[data-animated-text] .at-char{ opacity: .2; }

.magnet{ will-change: transform; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

/* ContactButton — purple → orange gradient pill */
.contact-btn{
  display: inline-block;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
  box-shadow: 0px 4px 4px rgba(181, 1, 167, .25), 4px 4px 12px #7721B1 inset;
  outline: 2px solid #FFFFFF;
  outline-offset: -3px;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;                      /* tracking-widest */
  white-space: nowrap;
  padding: .75rem 2rem;                      /* px-8 py-3 */
  font-size: .75rem; line-height: 1rem;      /* text-xs */
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.contact-btn:hover{ filter: brightness(1.12); }
.contact-btn:active{ transform: scale(.98); }
.contact-btn:focus-visible{
  outline: 2px solid #FFFFFF;
  outline-offset: -3px;
  box-shadow: 0px 4px 4px rgba(181, 1, 167, .25), 4px 4px 12px #7721B1 inset, 0 0 0 3px var(--bg), 0 0 0 5px var(--ink);
}
.contact-btn:disabled{ filter: saturate(.5); opacity: .75; transform: none; }
@media (min-width: 640px){
  .contact-btn{ padding: .875rem 2.5rem; font-size: .875rem; line-height: 1.25rem; }  /* sm:px-10 sm:py-3.5 sm:text-sm */
}
@media (min-width: 768px){
  .contact-btn{ padding: 1rem 3rem; font-size: 1rem; line-height: 1.5rem; }           /* md:px-12 md:py-4 md:text-base */
}

/* Ghost pill (LiveProjectButton) — .live-btn and .ghost-btn are the same */
.live-btn,
.ghost-btn{
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  padding: .75rem 2rem;                      /* px-8 py-3 */
  font-size: .875rem; line-height: 1.25rem;  /* text-sm */
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.live-btn:hover,
.ghost-btn:hover{ background-color: rgba(215, 226, 234, .1); }
@media (min-width: 640px){
  .live-btn,
  .ghost-btn{ padding: .875rem 2.5rem; font-size: 1rem; line-height: 1.5rem; }  /* sm:px-10 sm:py-3.5 sm:text-base */
}
/* Ghost pill on a white panel */
.ghost-btn--dark{ border-color: var(--bg); color: var(--bg); }
.ghost-btn--dark:hover{ background-color: rgba(12, 12, 12, .08); }
.ghost-btn--dark:focus-visible{ outline-color: var(--bg); }
/* Compact ghost pill (TOC chips, small actions) */
.ghost-btn--sm{ padding: .5rem 1.1rem; font-size: .75rem; line-height: 1rem; }
@media (min-width: 640px){ .ghost-btn--sm{ padding: .55rem 1.3rem; font-size: .8rem; line-height: 1.1rem; } }

/* ---------------------------------------------------------------------- */
/* Shared nav — O mark home link + Work / Services / About / Contact       */
/* uppercase, #D7E2EA, font-medium, tracking-wider, justify-between,       */
/* text-sm md:text-lg lg:text-[1.4rem], px-6 md:px-10 pt-6 md:pt-8          */
/* ---------------------------------------------------------------------- */

.site-nav{
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem 1rem;
  padding: 1.5rem 1.5rem 0;                  /* px-6 pt-6 */
}
.site-nav a{
  color: var(--ink);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;                     /* tracking-wider */
  font-size: .875rem; line-height: 1.25rem;  /* text-sm */
  transition: opacity .2s;
}
.site-nav a:hover{ opacity: .7; }
.site-nav a[aria-current="page"]{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

.nav-home{ display: block; flex: 0 0 auto; }
.nav-home img{
  display: block;
  width: clamp(28px, 3vw, 40px);
  height: auto;
  transition: transform .2s var(--ease);
}
.site-nav .nav-home:hover{ opacity: 1; }
.nav-home:hover img,
.nav-home:focus-visible img{ transform: rotate(-8deg) scale(1.06); }
.nav-home:focus-visible{ outline-offset: 4px; border-radius: 999px; }

@media (max-width: 399.98px){
  .site-nav{ padding: 1.25rem 1rem 0; gap: .5rem .75rem; }
  .site-nav a{ font-size: .75rem; letter-spacing: .04em; }
}
@media (min-width: 768px){
  .site-nav{ padding: 2rem 2.5rem 0; }                          /* md:px-10 md:pt-8 */
  .site-nav a{ font-size: 1.125rem; line-height: 1.75rem; }     /* md:text-lg */
}
@media (min-width: 1024px){
  .site-nav a{ font-size: 1.4rem; }                             /* lg:text-[1.4rem] */
}
/* Touch: the links look the same, but each gets an invisible 44px-tall hit
   area (the O mark a 44px square) so a thumb can't miss. */
@media (pointer: coarse){
  .site-nav a{ position: relative; }
  .site-nav a::after{
    content: "";
    position: absolute;
    left: -.3rem; right: -.3rem;
    top: 50%; height: 44px;
    transform: translateY(-50%);
  }
  .site-nav .nav-home::after{ left: 50%; right: auto; width: 44px; transform: translate(-50%, -50%); }
}

/* ---------------------------------------------------------------------- */
/* Hero shell (every inner page): nav, giant heading, bottom bar           */
/* ---------------------------------------------------------------------- */

.hero{
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Wrapped in overflow-hidden container */
.hero__heading-wrap{
  overflow: hidden;
  position: relative;
}

/* font-black uppercase tracking-tight leading-none whitespace-nowrap w-full */
.hero__heading{
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
  padding-bottom: .04em;                     /* keeps glyph bottoms off the clip edge */
}

/* Bottom bar: flex justify-between items-end pb-7 sm:pb-8 md:pb-10 */
.hero__bottom{
  position: relative;
  z-index: 20;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 1.5rem 1.75rem;
}
@media (max-width: 399.98px){ .hero__bottom{ padding-left: 1rem; padding-right: 1rem; } }  /* lines up with the compact nav */
@media (min-width: 640px){ .hero__bottom{ padding-bottom: 2rem; } }
@media (min-width: 768px){ .hero__bottom{ padding: 0 2.5rem 2.5rem; } }

.hero__lede{
  color: var(--ink);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .025em;                    /* tracking-wide */
  line-height: 1.375;                        /* leading-snug */
  font-size: clamp(.75rem, 1.4vw, 1.5rem);
  max-width: 160px;
}
@media (min-width: 640px){ .hero__lede{ max-width: 220px; } }
@media (min-width: 768px){ .hero__lede{ max-width: 260px; } }

/* Page heroes (services, about, contact, legal): no portrait, so the hero
   is only as tall as its content. The one-word heading fills the width at
   the same scale as the Work hero: 86 / 90 / 95 / 97 % of the viewport,
   divided by the word's measured width in em (Kanit 900, -.025em), which
   the page sets as --hero-em on the <h1>. */
.hero--page .hero__heading{
  --hero-em: 4.33;
  font-size: calc(86vw / var(--hero-em));
  margin-top: 1.75rem;
}
.hero--page .hero__bottom{ margin-top: clamp(2rem, 7vw, 5.5rem); }
.hero--page .hero__lede{ max-width: 15rem; }
@media (min-width: 640px){
  .hero--page .hero__heading{ font-size: calc(90vw / var(--hero-em)); margin-top: 1.5rem; }
  .hero--page .hero__lede{ max-width: 19rem; }
}
@media (min-width: 768px){
  .hero--page .hero__heading{ font-size: calc(95vw / var(--hero-em)); margin-top: .5rem; }
  .hero--page .hero__lede{ max-width: 24rem; }
}
@media (min-width: 1024px){
  .hero--page .hero__heading{ font-size: calc(97vw / var(--hero-em)); }
  .hero--page .hero__lede{ max-width: 28rem; }
}
@media (max-width: 479.98px){
  /* The button drops under the lede on narrow phones instead of squeezing it. */
  .hero--page .hero__bottom{ flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ---------------------------------------------------------------------- */
/* Sections: white "panel" and dark "sheet", both with a rounded top.      */
/* A dark section after a white panel tucks up over it (like Projects did  */
/* over Price on the reference).                                           */
/* ---------------------------------------------------------------------- */

.panel,
.sheet{
  position: relative;
  border-radius: var(--round-xl) var(--round-xl) 0 0;
  padding: 5rem var(--gutter);               /* px-5 py-20 */
}
@media (min-width: 640px){ .panel, .sheet{ padding-top: 6rem; padding-bottom: 6rem; } }  /* sm:py-24 */
@media (min-width: 768px){ .panel, .sheet{ padding-top: 8rem; padding-bottom: 8rem; } }  /* md:py-32 */

.panel{
  background: var(--white);
  color: var(--bg);
}
.panel :focus-visible{ outline-color: var(--bg); }

.sheet{
  background: var(--bg);
  color: var(--ink);
}

.panel + .sheet,
.panel + .closing{
  position: relative;
  background: var(--bg);
  border-radius: var(--round-xl) var(--round-xl) 0 0;
  margin-top: calc(-1 * var(--tuck));
}

.section-head{ margin-bottom: 4rem; }        /* mb-16 sm:mb-20 md:mb-28 */
@media (min-width: 640px){ .section-head{ margin-bottom: 5rem; } }
@media (min-width: 768px){ .section-head{ margin-bottom: 7rem; } }

/* Numbered rows (the reference's Services list): huge number left,
   name + description right. Dark on a white panel by default. */
.num-list{
  max-width: 64rem;                          /* max-w-5xl */
  margin: 0 auto;
}
.num-item{
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 0;                           /* py-8 */
  scroll-margin-top: 1.5rem;
}
.num-item + .num-item{ border-top: 1px solid rgba(12, 12, 12, .15); }
@media (min-width: 640px){ .num-item{ padding: 2.5rem 0; gap: 2rem; } }  /* sm:py-10 */
@media (min-width: 768px){ .num-item{ padding: 3rem 0; gap: 3rem; } }    /* md:py-12 */

.num-item__num{
  flex: 0 0 1.32em;                          /* fixed column so every row's title lines up */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--bg);
  font-size: clamp(3rem, 10vw, 140px);
}
.num-item__body{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding-top: .35em;
}
@media (min-width: 768px){ .num-item__body{ gap: .75rem; } }
.num-item__name{
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: clamp(1rem, 2.2vw, 2.1rem);
}
.num-item__desc{
  font-weight: 300;
  line-height: 1.625;                        /* leading-relaxed */
  max-width: 42rem;                          /* max-w-2xl */
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  color: rgba(12, 12, 12, .65);
}

/* Tick list — short bullets with a drawn check mark */
.ticks{
  list-style: none;
  display: grid;
  gap: .6rem;
  margin-top: .75rem;
  max-width: 42rem;
}
.ticks li{
  position: relative;
  padding-left: 1.9em;
  font-weight: 400;
  line-height: 1.5;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
}
.ticks li::before{                           /* the check: a rotated L */
  content: "";
  position: absolute;
  left: .2em;
  top: .32em;
  width: .45em;
  height: .8em;
  border: solid currentColor;
  border-width: 0 .16em .16em 0;
  transform: rotate(45deg);
  opacity: .9;
}

@media (max-width: 479.98px){
  /* Small phones: the number sits above the text so the copy gets the full width. */
  .num-item{ flex-direction: column; gap: .75rem; }
  .num-item__num{ flex-basis: auto; }
  .num-item__body{ padding-top: 0; }
}

/* ---------------------------------------------------------------------- */
/* Closing band + footer                                                   */
/* ---------------------------------------------------------------------- */

.closing{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 6rem 1.25rem 7rem;
  text-align: center;
}
@media (min-width: 640px){ .closing{ padding: 8rem 2rem 9rem; gap: 2.5rem; } }
@media (min-width: 768px){ .closing{ padding: 10rem 2.5rem 11rem; gap: 3rem; } }

.closing__sub{
  color: var(--ink);
  font-weight: 300;
  line-height: 1.625;
  max-width: 34rem;
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.site-footer{
  display: grid;
  gap: 2rem;
  padding: 2.5rem 1.5rem 2.5rem;
  border-top: 1px solid rgba(215, 226, 234, .15);
  color: var(--ink);
}
@media (min-width: 768px){ .site-footer{ padding: 3rem 2.5rem 3rem; gap: 2.5rem; } }

.site-footer__top,
.site-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.site-footer__home{ display: block; flex: 0 0 auto; transition: opacity .2s; }
.site-footer__home img{ display: block; height: 30px; width: auto; }
@media (min-width: 768px){ .site-footer__home img{ height: 34px; } }

.site-footer__links,
.site-footer__contact{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  list-style: none;
}
.site-footer__links a,
.site-footer__contact a,
.site-footer__copy{
  font-weight: 400;
  letter-spacing: .05em;
  font-size: .8rem;
  transition: opacity .2s;
}
.site-footer__links a,
.site-footer__copy{ text-transform: uppercase; }
.site-footer__contact a{ opacity: .85; }
.site-footer__copy{ opacity: .6; }
.site-footer__home:hover,
.site-footer__links a:hover,
.site-footer__contact a:hover{ opacity: .7; }
.site-footer__links a[aria-current="page"]{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
}

/* A footer straight after a white panel (legal) tucks over it too. */
.panel + .site-footer{
  position: relative;
  background: var(--bg);
  border-top: 0;
  border-radius: var(--round-xl) var(--round-xl) 0 0;
  margin-top: calc(-1 * var(--tuck));
  padding-top: 3.5rem;
}
@media (min-width: 768px){ .panel + .site-footer{ padding-top: 4.5rem; } }

@media (max-width: 767.98px){
  .site-footer__top,
  .site-footer__bottom{ flex-direction: column; align-items: flex-start; }
  .site-footer__links{ gap: .6rem 1.25rem; }
}
/* Touch: footer links become 44px-tall tap targets; the rows close their gap
   so the padded boxes sit edge to edge instead of overlapping. */
@media (pointer: coarse){
  .site-footer__links,
  .site-footer__contact{ row-gap: 0; }
  .site-footer__links a,
  .site-footer__contact a{ display: inline-block; padding: .8rem 0; }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion — everything static and visible                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .fade{ opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-animated-text] .at-char{ opacity: 1 !important; }
  .magnet{ transform: none !important; will-change: auto; }
  .skip-link,
  .contact-btn,
  .live-btn,
  .ghost-btn,
  .nav-home img{ transition: none; }
  .nav-home:hover img,
  .nav-home:focus-visible img{ transform: none; }
}