@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --header-height: 3rem;

    /* Light theme — warm cream base, navy primary + amber accent */
    --first-color: #08132b;            /* primary navy */
    --first-color-second: #08132b;     /* deep navy (footer) */
    --first-color-alt: #163473;        /* lifted navy — hover states */
    --first-color-lighter: #aac1ec;    /* soft light blue */
    --accent: #08132b;                 /* icons embrace primary in light mode */
    --button-text: #ffffff;            /* text on primary buttons */
    --title-color: #1a1916;            /* warm near-black ink */
    --text-color: #5c5750;             /* warm gray body */
    --text-color-light: #8a847b;       /* warm gray muted */
    --input-color: #efece5;            /* recessed field on cream */
    --body-color: #f7f5f0;             /* cream base */
    --container-color: #fffdf8;        /* raised surface */
    --scroll-bar-color: #e6e2d9;
    --scroll-thumb-color: #08132b;     /* navy scroll bar (light mode) */
    --box-shadow: hsla(221, 25%, 30%, .18);  /* slate-tinted shadow */

    /*--------------------------------------------------------------------------------FONT & TYPOGRAPHY*/
    --body-font: 'Satoshi', sans-serif;
    --mono-font: 'JetBrains Mono', ui-monospace, monospace;

    --big-font-size: 2.25rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /*--------------------------------------------------------------------------------FONT WEIGHT*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 700;

    /*--------------------------------------------------------------------------------MARGINS BOTTOM(mb)*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /*--------------------------------------------------------------------------------Z-INDEX*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
    --z-grain: 1100;
}

/*------------------------------------------------------------------------------------FONT SIZE (LARGE DEVICES)*/
@media screen and (min-width: 968px) {
    :root {
        --big-font-size: 3.5rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*------------------------------------------------------------------------------------DARK THEME*/
body.dark-theme{
  --first-color: #e3b341;            /* mustard yellow primary */
  --first-color-second: #100f14;     /* near-black raised footer */
  --first-color-alt: #f0c662;        /* lighter mustard — hover states */
  --first-color-lighter: #f5d98a;
  --accent: #e3b341;                 /* mustard accent */
  --button-text: #08132b;            /* navy text on mustard buttons */
  --title-color: #e8e6e1;            /* warm off-white */
  --text-color: #aeaaa2;             /* warm gray */
  --text-color-light: #7d7a72;
  --input-color: #20242c;
  --body-color: #16151a;             /* warm charcoal */
  --container-color: #1e1d23;        /* raised surface */
  --scroll-bar-color: #2b2a31;
  --scroll-thumb-color: #e3b341;     /* amber scroll bar (dark mode) */
  --box-shadow: hsla(221, 40%, 4%, .5);
}

/*------------------------------------------------------------------------------------BUTTONS FOR DARK THEME TOGGLE*/
.nav_btns{
  display: flex;
  align-items: center;
}

.change-theme{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.2rem;
  color: var(--first-color);
  background-color: var(--container-color);
  border-radius: 50%;
  margin-right: var(--mb-1);
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
}

.change-theme:hover{
  color: var(--button-text);
  background-color: var(--first-color);
}
/*------------------------------------------------------------------------------------BASE CSS*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {scroll-behavior: smooth;}

/* Lenis: disable native smooth-scroll while Lenis drives it */
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; }

/* Scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

body {
  margin: 0 0 var(--header-height) 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: hidden;
}

/*------------------------------------------------------------------------------------CUSTOM CURSOR*/
/* Navy ring cursor in light mode (hotspot centred at 12 12) */
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%237d7a72' d='M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z'/%3E%3C/svg%3E") 12 12, auto;
}

/* Amber ring cursor in dark mode */
body.dark-theme {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23e3b341' d='M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z'/%3E%3C/svg%3E") 12 12, auto;
}

/* Touch devices have no pointer — keep the native cursor there */
@media (hover: none) {
  body, body.dark-theme { cursor: auto; }
}

/* Paper-grain overlay — fixed, never blocks interaction */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.dark-theme::after {
  mix-blend-mode: overlay;
  opacity: .06;
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  letter-spacing: -.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul {list-style: none;}

a {text-decoration: none;}

img {
  max-width: 100%;
  height: auto;
}

/*------------------------------------------------------------------------------------ACCESSIBILITY*/
:focus-visible {
  outline: 2px solid var(--first-color-alt);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: var(--z-modal);
  background-color: var(--first-color);
  color: #fff;
  padding: .5rem 1rem;
  border-radius: .5rem;
  transition: top .3s;
}

.skip-link:focus {
  top: 1rem;
}

/*------------------------------------------------------------------------------------REUSEABLE CSS*/
.section {padding: 2rem 0 4rem;}

.section_title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  letter-spacing: -.02em;
}

.section_subtitle {
  display: block;
  font-family: var(--mono-font);
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--first-color);
  margin-bottom: var(--mb-3);
}

.section_title, .section_subtitle {text-align: center;}

/*------------------------------------------------------------------------------------LAYOUT CSS*/
.container {
  max-width: 1000px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
  gap: 1.5rem;
}
.header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: transparent;
}

/*------------------------------------------------------------------------------------NAVIGATION CSS*/
.nav{
  max-width: 968px;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav_toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.2rem;
  color: var(--first-color);
  background-color: var(--container-color);
  border-radius: 50%;
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
}

.nav_toggle:hover{
  color: var(--button-text);
  background-color: var(--first-color);
}

.nav_logo{
  color: var(--first-color);
  font-weight: var(--font-medium);
  background-color: var(--container-color);
  padding: .5rem 1.1rem;
  border-radius: 5rem;
  transition: color .3s ease, background-color .3s ease;
}

.nav_logo:hover{
  background-color: var(--first-color);
  color: var(--button-text);
}

@media screen and (max-width: 767px)
{
  .nav_menu{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    z-index: var(--z-modal);
  }

  .nav_menu.show-menu{
    opacity: 1;
    visibility: visible;
  }
  .nav_menu .nav_list{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 4rem;
  }
  .nav_menu .nav_link{
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
    transition: font-size .3s ease, color .3s ease;
  }
  .nav_menu .nav_link.active-link{
    font-size: var(--h1-font-size);
    font-weight: var(--font-semi-bold);
  }
  .nav_menu .nav_icon{
    display: none;
  }

}

.nav_list
{
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav_link
{
  display: flex;
  flex-direction: column; 
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--text-color);
  font-weight: var(--font-regular);
  transition: color .3s ease;
}

.nav_link:hover{color: var(--first-color);}

.nav_icon{font-size: 1.2rem;}


/*------------------------------------------------------------------------------------SHOW MENU*/
/* Fullscreen menu handled via opacity/visibility in mobile media query */

/*------------------------------------------------------------------------------------ACTIVE-LINK*/
.active-link{color: var(--first-color-alt);}

/*------------------------------------------------------------------------------------CHANGE HEADER BG*/
.scroll-header{ /* intentionally empty — no shadow on scroll */ }

/*------------------------------------------------------------------------------------HOME CSS*/
.home{
  min-height: 100dvh;
  display: grid;
  align-items: center;
}

.home_container{
  padding-top: 2rem;
}

.home_content{
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Staggered entry — transform + opacity only, reduced-motion safe */
@media (prefers-reduced-motion: no-preference){
  .home_kicker,
  .home_title,
  .home_description,
  .home_actions,
  .home_img{
    opacity: 0;
    transform: translateY(1.5rem);
    animation: home-rise .8s cubic-bezier(.16, 1, .3, 1) forwards;
  }
  .home_kicker{ animation-delay: .05s; }
  .home_title{ animation-delay: .15s; }
  .home_description{ animation-delay: .28s; }
  .home_actions{ animation-delay: .4s; }
  .home_img{ animation-delay: .3s; transform: translateY(2rem) scale(.98); }
}

@keyframes home-rise{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.home_kicker{
  font-family: var(--mono-font);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  letter-spacing: .02em;
  color: var(--first-color);
  margin-bottom: var(--mb-1);
}

.home_title{
  font-size: var(--big-font-size);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: var(--mb-1);
}

.home_description{
  max-width: 46ch;
  line-height: 1.6;
  margin-bottom: var(--mb-2);
}

.home_actions{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.home_textlink{
  position: relative;
  color: var(--title-color);
  font-weight: var(--font-medium);
  padding-bottom: 2px;
}

.home_textlink::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--title-color);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.home_textlink:hover{ color: var(--first-color); }

.home_textlink:hover::after{
  background-color: var(--first-color);
  transform-origin: left;
}

/* Portrait — rounded-square with an offset slate frame for depth */
.home_img{
  position: relative;
  justify-self: center;
  width: min(320px, 78vw);
  margin: 0;
}

.home_img::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(1.1rem, 1.1rem);
  border-radius: 1.5rem;
  border: 1.5px solid var(--first-color);
  opacity: .35;
  z-index: 0;
}

.home_photo{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 24px 60px -24px var(--box-shadow);
}

/*------------------------------------------------------------------------------------BUTTONS CSS*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: var(--button-text);
  padding: 1rem 1.75rem;
  border-radius: .5rem;
  font-family: var(--body-font);
  font-weight: var(--font-medium);
  transition: background-color .3s ease, transform .15s ease;
}

.button:hover{
  background-color: var(--first-color-alt);
}

.button:active{
  transform: scale(.97);
}

.button_icon{
  font-size: 1.25rem;
  margin-left: var(--mb-0-5);
  transition: .3s;
}

.button--flex{
  display: inline-flex;
  align-items: center;
}

.button--small{
  padding: .75rem 1rem;
}

.button--smaller{
  padding: .5rem .75rem;
  margin-bottom: .25rem;
}

.button--link{
  padding: 0;
  background-color: transparent;
  color: var(--first-color);
}

.button--link:hover{
  background-color: transparent;
  color: var(--first-color-alt);
}
/*------------------------------------------------------------------------------------ABOUT CSS*/
.about_container{
  align-items: center;
}

.about_frame::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-1.1rem, 1.1rem);
  border-radius: 1.25rem;
  border: 1.5px solid var(--first-color);
  opacity: .35;
  z-index: 0;
}

.about_image{
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 1.25rem;
  background-color: var(--container-color);
  box-shadow: 0 24px 60px -28px var(--box-shadow);
}

.about_data{
  max-width: 54ch;
}

.about_lead{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
  line-height: 1.45;
  letter-spacing: -.01em;
  margin-bottom: var(--mb-1);
}

.about_description{
  text-align: center;
  line-height: 1.7;
  margin-bottom: var(--mb-2);
}

.about_focus{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: var(--mb-2-5);
}

.about_focus li{
  font-family: var(--mono-font);
  font-size: var(--smaller-font-size);
  color: var(--title-color);
  background-color: var(--input-color);
  padding: .3rem .65rem;
  border-radius: .35rem;
  white-space: nowrap;
}

.about_info{
  display: flex;
  justify-content: center;
  gap: 2.75rem;
  padding-top: var(--mb-1-5);
}

.about_info-title{
  display: block;
  font-family: var(--mono-font);
  font-size: 2rem;
  font-weight: var(--font-semi-bold);
  line-height: 1;
  color: var(--title-color);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--mb-0-5);
}

.about_info-name{
  display: block;
  font-size: var(--smaller-font-size);
  line-height: 1.35;
  color: var(--text-color);
}

.about_status{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: var(--mb-2);
  font-family: var(--mono-font);
  font-size: var(--small-font-size);
  color: var(--text-color);
}

@media (prefers-reduced-motion: no-preference){
  .about_status-dot{ animation: about-pulse 2.2s ease-out infinite; }
}

@keyframes about-pulse{
  0%{ box-shadow: 0 0 0 0 hsla(140, 45%, 45%, .45); }
  70%{ box-shadow: 0 0 0 .5rem hsla(140, 45%, 45%, 0); }
  100%{ box-shadow: 0 0 0 0 hsla(140, 45%, 45%, 0); }
}

/*------------------------------------------------------------------------------------SERVICES CSS*/
.services_container{
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

.service_content{
  position: relative;
  background-color: var(--container-color);
  padding: 3.5rem .5rem 1.25rem 1.5rem;
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: .3s;
}

.service_content:hover{
  box-shadow: 0 12px 28px -12px var(--box-shadow);
  transform: translateY(-3px);
}

/* Edge-glow: border lights up near cursor, gradient bleeds inward */
.service_content::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
              var(--accent),
              transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}

.service_content::after{
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background-color: var(--container-color);
  z-index: 0;
  pointer-events: none;
}

.service_content:hover::before{ opacity: 1; }

.service_content > .services_icon,
.service_content > .services_title,
.service_content > .services_button,
.service_content > .services_modal{
  position: relative;
  z-index: 1;
}

.services_icon{
  display: block;
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: var(--mb-1);
}

.services_title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
  font-weight: var(--font-medium);
}

.services_button{
  cursor: pointer;
  font-size: var(--small-font-size);
}

.services_button:hover .button_icon{
  transform: translateX(.5rem);
  transition: 0.5s ease;
}

.services_modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: .5s;
}

.services_modal-content{
  position: relative;
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: .5rem;
}

.services_modal-services{
  row-gap: 1rem;
}

.services_modal-service{
  display: inline-block;
}

.services_modal-title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1-5);
}

.services_modal-close{
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--first-color);
}

.services_modal-close:hover{
  cursor: pointer;
  color: var(--first-color-alt);
}

.services_modal-icon{
  color: var(--accent);
  margin-right: var(--mb-0-25);
}

/* Active Modal (legacy — kept for fallback) */
.active-modal{
  opacity: 1;
  visibility: visible;
}

/* Fixed-size card: content is swapped in place, dimensions never change */
.service_content{
  min-height: 17rem;
  padding-bottom: 3.5rem; /* reserve space for the pinned toggle button */
}

/* Toggle button pinned bottom-left, visible & clickable in both states */
.service_content > .services_button{
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  z-index: 3;
}

/* Default content fades out when expanded */
.service_content > .services_icon,
.service_content > .services_title{
  transition: opacity .4s ease, transform .45s cubic-bezier(.32,.72,0,1);
}
.service_content.card-expanded > .services_icon,
.service_content.card-expanded > .services_title{
  position: absolute;        /* out of flow so the modal defines card height */
  top: 3.5rem;
  left: 1.5rem;
  opacity: 0;
  transform: translateY(-.5rem);
  pointer-events: none;
}

/* Modal becomes an overlay filling the card, above the default content */
.service_content .services_modal{
  position: absolute;
  inset: 0;
  background: none;
  display: block;
  padding: 3.25rem 1.5rem 3.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .4s ease,
              transform .45s cubic-bezier(.32,.72,0,1),
              visibility .4s;
  z-index: 2;
}

.service_content.card-expanded .services_modal{
  position: relative;   /* re-enter flow so the card grows to fit content */
  inset: auto;
  padding: 0 1rem .75rem 0;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.service_content .services_modal-content{
  width: auto;
  min-height: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

.service_content .services_modal-close,
.service_content .services_modal-icon{
  display: none;
}

.service_content .services_modal-title{
  display: block;
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

.service_content .services_modal-service{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.service_content .services_modal-service li{
  font-family: var(--mono-font);
  font-size: var(--smaller-font-size);
  background-color: var(--input-color);
  color: var(--title-color);
  padding: .3rem .65rem;
  border-radius: .35rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .4s ease, transform .5s cubic-bezier(.32,.72,0,1);
}

/* Stagger the tags in once expanded */
.service_content.card-expanded .services_modal-service li{
  opacity: 1;
  transform: none;
}
.service_content.card-expanded .services_modal-service li:nth-child(1){ transition-delay: .14s; }
.service_content.card-expanded .services_modal-service li:nth-child(2){ transition-delay: .20s; }
.service_content.card-expanded .services_modal-service li:nth-child(3){ transition-delay: .26s; }
.service_content.card-expanded .services_modal-service li:nth-child(4){ transition-delay: .32s; }
.service_content.card-expanded .services_modal-service li:nth-child(5){ transition-delay: .38s; }

/* Toggle icon: eye -> cross */
.services_button .button_icon--close{ display: none; }
.service_content.card-expanded .services_button .button_icon--eye{ display: none; }
.service_content.card-expanded .services_button .button_icon--close{ display: inline-block; }

/*------------------------------------------------------------------------------------PROJECT CSS*/
.work_carousel{
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: 3.5rem;
}

.work_swiper{
  padding: 1rem 0 1.75rem;
  overflow: hidden;
}

.work_swiper .swiper-slide{
  height: auto;
}

/* Split card: image (no bg) left, content card right */
.work_card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  height: 100%;
}

.work_media{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.work_img{
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: .75rem;
  transition: transform .9s cubic-bezier(.32,.72,0,1);
}

.work_card:hover .work_img{ transform: scale(1.03); }

/* Content card with background */
.work_body{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.5rem 1.5rem 1.4rem;
  background-color: var(--container-color);
  border-radius: 1rem;
  box-shadow: 0 18px 40px -26px var(--box-shadow),
              inset 0 1px 1px rgba(255,255,255,.10);
}

/* Edge-glow: border lights up near cursor, gradient bleeds inward (matches skill cards) */
.work_body::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
              var(--accent), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}

.work_body::after{
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background-color: var(--container-color);
  z-index: 0;
  pointer-events: none;
}

.work_body:hover::before{ opacity: 1; }

.work_body > *{ position: relative; z-index: 1; }

.work_title{
  font-size: var(--h2-font-size);
  font-weight: var(--font-semi-bold);
  letter-spacing: -.01em;
}

.work_desc{
  font-size: var(--small-font-size);
  line-height: 1.6;
  color: var(--text-color);
}

.work_tags{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
}

.work_tags li{
  font-family: var(--mono-font);
  font-size: var(--smaller-font-size);
  color: var(--title-color);
  background-color: var(--input-color);
  padding: .25rem .6rem;
  border-radius: .35rem;
  white-space: nowrap;
}

.work_link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  font-family: var(--mono-font);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  color: var(--first-color);
  transition: color .3s ease;
}

.work_link:hover{ color: var(--first-color-alt); }
.work_link-arrow{ transition: transform .35s cubic-bezier(.32,.72,0,1); }
.work_link:hover .work_link-arrow{ transform: translateX(.4rem); }

.work_lock{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  font-family: var(--mono-font);
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

/* Side arrows */
.work_nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.2rem;
  color: var(--first-color);
  background-color: var(--container-color);
  border: none;
  border-radius: 50%;
  box-shadow: 0 8px 20px -10px var(--box-shadow);
  cursor: pointer;
  transition: transform .4s cubic-bezier(.32,.72,0,1), color .3s ease, background-color .3s ease;
}

.work_nav--prev{ left: 0; }
.work_nav--next{ right: 0; }

.work_nav:hover{
  color: var(--button-text);
  background-color: var(--first-color);
  transform: translateY(-50%) scale(1.08);
}

.work_nav:active{ transform: translateY(-50%) scale(.94); }

.work_nav.swiper-button-disabled{
  opacity: .35;
  pointer-events: none;
}

.work_pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: auto;
  margin-top: 1.25rem;
}

.work_pagination .swiper-pagination-bullet{
  width: .5rem;
  height: .5rem;
  background-color: var(--text-color-light);
  opacity: .5;
  border-radius: 5rem;
  transition: width .45s cubic-bezier(.32,.72,0,1), opacity .3s ease, background-color .3s ease;
}

.work_pagination .swiper-pagination-bullet-active{
  width: 1.5rem;
  opacity: 1;
  background-color: var(--first-color);
}

/* Desktop: image left, content right */
@media screen and (min-width: 768px){
  .work_carousel{ padding-inline: 4.5rem; }
  .work_card{
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .work_nav--prev{ left: 0; }
  .work_nav--next{ right: 0; }
}

/* Mobile: edge-to-edge swiper — after base rules so cascade wins */
@media screen and (max-width: 767px){
  .work_carousel.container{
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .work_swiper{
    overflow: visible;
    padding-inline: 2.25rem;
  }
   _nav{ display: inline-flex; }
  .project{ overflow-x: hidden; }
}

/*------------------------------------------------------------------------------------CONTACT CSS*/
.contact_container{
  row-gap: 3rem;
}

.contact_info{
  display: flex;
  align-items: center;
  gap: var(--mb-0-75);
  margin-bottom: var(--mb-2);
}

.contact_icon{
  font-size: 1.75rem;
  color: var(--accent);
}

.contact_title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

.contact_subtitle{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  transition: color .3s ease;
}

.contact_info a.contact_subtitle:hover{ color: var(--first-color); }

/* Form */
.contact_fields{
  row-gap: 1rem;
}

.contact_content{
  position: relative;
  background-color: var(--input-color);
  border-radius: .5rem;
  padding: .65rem 1rem .35rem;
  border: 1px solid transparent;
  transition: border-color .3s ease;
}

.contact_content:focus-within{
  border-color: var(--first-color);
}

.contact_label{
  display: block;
  font-size: var(--smaller-font-size);
  font-family: var(--mono-font);
  color: var(--text-color-light);
}

.contact_field{
  width: 100%;
  background: none;
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  border: none;
  outline: none;
  padding: .25rem 0 .35rem;
  resize: vertical;
}

.contact_status{
  font-size: var(--small-font-size);
  margin-top: var(--mb-0-5);
  min-height: 1.25rem;
}

.contact_status[data-state="error"]{ color: hsl(0, 65%, 50%); }
.contact_status[data-state="success"]{ color: hsl(140, 45%, 38%); }
.contact_status[data-state="pending"]{ color: var(--text-color-light); }

#contact-submit{
  margin-top: var(--mb-1-5);
}

/*------------------------------------------------------------------------------------FOOTER CSS*/
.footer{
  padding-top: 2rem;

}

.footer_container{
  row-gap: 3.5rem;
}

.footer_bg{
  background-color: var(--first-color-second);
  padding: 2rem 0 3rem;
}

.footer_title{
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-25);
  color: var(--text-color-light);
}

.footer_subtitle{
  font-size: var(--small-font-size);
}

.footer_links{
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

.footer_link:hover{
  color: var(--first-color-lighter);
}

.footer_social-icon{
  font-size: 1.25rem;
  color: gray;
}

.footer_social{
  font-size: 1.25rem;
  margin-right: var(--mb-1-5);
}

.footer_social-icon:hover{
  cursor: pointer; 
  color: var(--first-color-lighter);
}

.footer_copy{
  font-size: var(--smaller-font-size);
  text-align: center;
  color: var(--text-color-light);
  margin-top: var(--mb-1);
}

.footer_title, .footer_subtitle, .footer_link, .footer_social{
  color: #FFF ;
}

/*------------------------------------------------------------------------------------PRIVACY POLICY PAGE*/
.policy{
  max-width: 860px;
  margin: 2rem auto 4rem;
  padding: clamp(1.4rem, 3vw, 2.8rem);
  background-color: var(--container-color);
  border: 1px solid var(--input-color);
  border-radius: 1.5rem;
  box-shadow: 0 18px 45px -20px var(--box-shadow);
  line-height: 1.75;
}

.policy_eyebrow{
  font-family: var(--mono-font);
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--first-color);
  margin-bottom: var(--mb-0-75);
}

.policy_title{
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-0-75);
}

.policy_meta{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  margin-bottom: var(--mb-2);
}

.policy_section{
  margin-top: var(--mb-1-5);
}

.policy_section h2{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  margin: var(--mb-1-5) 0 var(--mb-0-75);
}

.policy p{
  margin-bottom: var(--mb-0-75);
}

.policy ul{
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--mb-0-75);
}

.policy li{
  margin-bottom: var(--mb-0-25);
}

@media screen and (max-width: 640px){
  .policy{
    margin: 1rem 1rem 2.5rem;
    padding: 1.2rem;
    border-radius: 1.2rem;
  }
}

/*------------------------------------------------------------------------------------SCROLL UP*/
.scrollup{
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--first-color);
  opacity: .8;
  padding: 0 .3rem;
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .5s;
}

.scrollup:hover{
  background-color: var(--first-color-lighter);
}

.scrollup_icon{
  font-size: 1.5rem;
  color: white;
}

.scrollup_icon:hover{
  color: black;
}
/* Show scroll */
.show-scroll{
  bottom: 5rem;
}

/*------------------------------------------------------------------------------------SCROLL BAR*/
::-webkit-scrollbar{
  width: .60rem;
  background-color: var(--scroll-bar-color);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb{
  background-color: var(--scroll-thumb-color);
  border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{
  background-color: var(--text-color-light);
}
/*------------------------------------------------------------------------------------MEDIA SIZES*/
/*---------------------------------------------------------------------SMALL DEVICES*/
@media screen and (max-width: 350px) {
    .container{
      margin-left: var(--mb-1);
      margin-right: var(--mb-1);
    }
    .nav_menu{
      padding: 2rem .25rem 4rem;
    }
    .nav_list{
      column-gap: 0;
    }
    .home_img{
      width: min(260px, 70vw);
    }
    .services_container{
      grid-template-columns: max-content;
    } 
    .service_content{
      padding-right: 1.5rem;
    }
}

/*---------------------------------------------------------------------MEDIUM DEVICES*/
@media screen and (min-width: 568px) {
    .about_container{
      grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .container{
      margin-left: auto;
      margin-right: auto;
    }
    body{
      margin: 0;
    }
    .section{
      padding: 6rem 0 2rem;
    }
    .section_subtitle{
      margin-bottom: 4rem;
    }
    .header{
      top:0;
      bottom: initial;
    }
    .header, .main, .footer_container{
      padding: 0 1rem;
    }
    .nav{
      height: calc(var(--header-height) + 1.5rem);
      column-gap: 1rem;
    }
    .nav_icon, .nav_close, .nav_toggle{
      display: none;
    }
    .nav_list{
      display: flex;
      column-gap: 1.75rem;
      background-color: var(--container-color);
      padding: .65rem 1.5rem;
      border-radius: 5rem;
    }
    .nav_menu{
      margin-left: auto;
    }
    .change-theme{
      margin: 0;
    }
    .home_container{
      padding-top: 0;
    }
    .home_content{
      grid-template-columns: 1.2fr .9fr;
      gap: 3.5rem;
    }
    .home_img{
      justify-self: end;
      width: min(380px, 100%);
    }
    .about_container{
      column-gap: 5rem;
      align-items: center;
    }
    .about_frame{
      width: min(420px, 100%);
      justify-self: start;
    }

    .services_container{
      grid-template-columns: repeat(2, 268px);
      justify-content: center;
    }
    .services_icon{
      font-size: 2rem;
    }
    .service_content{
      padding: 4rem 2.5rem 3.5rem;
    }
    .service_content .services_modal{
      padding: 3.75rem 2.5rem 3.5rem;
    }
    .service_content > .services_button{
      left: 2.5rem;
    }
    .footer_container{
      grid-template-columns: repeat(3, 1fr);
    }
    .footer_bg{
      padding: 3rem 0 3.5rem;
    }
    .footer_links{
      flex-direction: row;
      column-gap: 3rem;
    }
    .footer_socials{
      justify-self: flex-end;
    }
    .footer_copy{
      margin-top: 4.5rem;
    }
    .contact_container{
      grid-template-columns: .9fr 1.1fr;
      align-items: start;
      column-gap: 3rem;
    }
    .contact_fields{
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1rem;
    }
    .contact_content--full{
      grid-column: 1 / -1;
    }
}
/*---------------------------------------------------------------------LARGE DEVICES*/
@media screen and (min-width: 1024px)
{
    .header, .main, .footer_container{
      padding: 0;
    }    
    .home_img{
      width: min(420px, 100%);
    }
    .services_container{
      grid-template-columns: repeat(4, 238px);
    }
    .about_frame{
      width: min(440px, 100%);
    }
}