/* ==========================================================================
   main.css - component styles: background, clock, profile card, hero, rail.
   ========================================================================== */

/* ==========================================================================
   1. Page background layer
   ========================================================================== */
.body-background {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}
[data-theme="light"] .body-background { background: var(--white); }
[data-theme="dark"]  .body-background { background: var(--dark);  }

#wrapper { position: relative; z-index: 1; }

/* ==========================================================================
   2. Clock - .tf-header-wrap
   ========================================================================== */
.tf-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;
  position: relative;
  z-index: 6;
  transition: all var(--dur-fast) ease;
}
.tf-header-wrap .left { display: flex; align-items: center; gap: 16px; }

.time-local {
  color: var(--black-56);
  text-align: start;
  margin-right: auto;
}
.time-local .date,
.time-local .clock { display: block; }

@media (min-width: 992px) {
  .tf-header-wrap { position: absolute; top: 52px; left: 32px; padding: 0; }
}
@media (min-width: 1600px) { .tf-header-wrap { left: 48px; } }

@media (max-width: 991px) {
  .tf-header-wrap { position: sticky; top: 0; }
}

/* ==========================================================================
   3. Right profile card - .sidebar-user
   ========================================================================== */
.sidebar-user {
  display: flex;
  align-items: center;
  transition: all var(--dur-fast) ease;
}

@media (min-width: 992px) {
  .sidebar-user {
    position: fixed;
    top: 32px; bottom: 32px; right: 16px;
    width: 100%; max-width: 400px;
    z-index: 5;
  }
}
@media (min-width: 1440px) { .sidebar-user { max-width: 480px; } }
@media (min-width: 1600px) { .sidebar-user { right: 48px; } }
@media (max-width: 991px) {
  .sidebar-user { position: static; max-width: 430px; margin: 0 auto; padding: 0 15px; }
}

/* ---- card shell --------------------------------------------------------- */
.sidebar-user .wrap {
  position: relative;
  display: flex;
  padding: 6px;
  border-radius: 24px;
  max-height: calc(100vh - 48px);
  background-color: var(--white);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .sidebar-user .wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
@media (max-width: 991px) {
  .sidebar-user .wrap { width: 100%; max-height: calc(100vh - 116px); }
}

/* ---- photo well --------------------------------------------------------- */
.sidebar-user .user-image {
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 100%;
  border-radius: 18px;
  background: linear-gradient(#0000000a, #0000000a), #f5f5f5;
  background-blend-mode: plus-darker;
}
.sidebar-user .user-image::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  border: 1px solid var(--black-6);
  border-radius: 18px;
  pointer-events: none;
}
.sidebar-user .user-image .image { position: relative; z-index: 1; }
.sidebar-user .user-image .image img { width: 100%; object-fit: cover; }

/* From 992 up the photo fills the viewport-derived card height rather than
   following its own aspect ratio. .sidebar-user spans top:32 -> bottom:32, so
   the well is 100vh - 64px and .wrap renders 12px taller than its parent from
   the 6px padding - which is exactly the measured 400 x 722 at 773px tall. */
@media (min-width: 992px) {
  .sidebar-user .user-image { height: calc(100vh - 64px); }
  .sidebar-user .user-image .image,
  .sidebar-user .user-image .image img { height: 100%; }
}

/* The portrait is 0.70 wide-to-tall but the well is far taller than that, so
   object-fit:cover crops the sides - and the taller the window, the worse it
   gets (34% of the width was lost at 1080px). Cap the well so the well never
   goes below roughly 0.60, which holds the crop near 14%. The card then floats
   centred on tall screens instead of stretching edge to edge. */
@media (min-width: 992px) {
  .sidebar-user .user-image { max-height: 647px; }   /* well is 388 wide here */
}
@media (min-width: 1440px) {
  .sidebar-user .user-image { max-height: 780px; }   /* well is 468 wide here */
}

[data-theme="dark"] .sidebar-user .user-image { background: var(--dark); }
/* The reference desaturated the portrait in dark mode. We keep it in full
   colour in both themes instead - the warm tones in the photo carry the accent. */

/* below 992 the photo needs its own scrim so the overlaid text stays legible */
@media (max-width: 991px) {
  .sidebar-user .user-image::before {
    content: "";
    position: absolute; inset: auto 0 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(#0000 0%, #000c 40%);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .sidebar-user .user-image .image { max-width: 400px; margin: 0 auto; }
}
@media (max-width: 425px) {
  .sidebar-user .user-image { display: flex; }
  .sidebar-user .user-image .image img { aspect-ratio: .546729; }
}

/* ---- overlay insets (change at 1440) ------------------------------------ */
.sidebar-user .user-logo   { position: absolute; top: 38px; left: 38px;  z-index: 2; }
.sidebar-user .user-social { position: absolute; top: 38px; right: 38px; z-index: 2; }
.sidebar-user .user-info   { position: absolute; bottom: 38px; left: 38px; right: 38px; z-index: 2; }

@media (max-width: 1439px) {
  .sidebar-user .user-logo   { top: 20px; left: 20px; }
  .sidebar-user .user-social { top: 20px; right: 20px; }
  .sidebar-user .user-info   { bottom: 20px; left: 20px; right: 20px; }
}

.sidebar-user .user-logo img { width: 40px; height: 40px; }

/* ---- vertical "Available for Work" tab ---------------------------------- */
.sidebar-user .user-image .meta-left {
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-user .user-image .meta-left .bg-item-svg { display: flex; }
.sidebar-user .user-image .meta-left .bg-item-svg svg,
.sidebar-user .user-image .meta-left .bg-item-svg img {
  width: 32px; height: 227px; display: block;
  /* The shape is authored bulging rightward off a flat left edge. The card now
     sits on the right, so the notch lives on the photo's outer (right) edge and
     the shape is mirrored to bulge inward. */
  transform: scaleX(-1);
}
/* The notch is filled with the page ground so it reads as cut into the photo. */
.sidebar-user .user-image .meta-left .bg-item-svg { color: var(--white); }
[data-theme="dark"] .sidebar-user .user-image .meta-left .bg-item-svg { color: var(--dark); }
.sidebar-user .user-image .avaiable-dot {
  position: absolute; inset: 0;
  z-index: 3;
  justify-content: center;
}
.sidebar-user .user-image .meta-left .avaiable-dot { color: var(--black-72); }
.sidebar-user .user-image .meta-left .text-vertical { font-size: 14px; line-height: 20px; }

@media (max-width: 575px) {
  .sidebar-user .user-image .meta-left { display: none; }
}

/* ---- info block --------------------------------------------------------- */
.sidebar-user .user-info .avaiable-dot {
  margin-bottom: 32px;
  color: var(--white-72);
  position: relative;
}
.sidebar-user .user-info .greeting { padding-bottom: 20px; }
.sidebar-user .user-info .br-line  { margin-block: 32px; }

@media (max-width: 1439px) {
  .sidebar-user .user-info .br-line { margin-block: 20px; }
}
@media (max-width: 991px) {
  .sidebar-user .user-info .avaiable-dot { margin-bottom: 16px; }
}

/* The card overlays a dark photo in BOTH themes, so its ink is white-based
   either way. These are measured values, not derived from the token pairs. */
.sidebar-user .user-info .greeting  { color: #fff; }
[data-theme="dark"] .sidebar-user .user-info .greeting { color: rgba(255, 255, 255, .72); }
.sidebar-user .user-info .introduce { color: rgba(255, 255, 255, .56); }
.sidebar-user .user-info .avaiable-dot,
.sidebar-user .action-down { color: rgba(255, 255, 255, .72); }

.sidebar-user .action-group { display: flex; align-items: center; gap: 20px; }
@media (max-width: 991px) {
  .sidebar-user .action-group { flex-wrap: wrap; gap: 12px; }
}

.sidebar-user .action-down {
  display: flex; align-items: center; gap: 8px;
  transition: color var(--dur-fast) ease;
}
.sidebar-user .action-down:hover { color: var(--primary); }
.sidebar-user .action-down .fi { font-size: 16px; }

/* ---- typewriter --------------------------------------------------------- */
.greeting .cd-headline { display: inline-flex; align-items: baseline; }
.cd-words-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  transition: width .6s var(--ease-out);
}
.cd-words-wrapper b {
  display: inline-block;
  font-weight: inherit;
  white-space: nowrap;
}
.cd-words-wrapper b:not(.is-visible) { display: none; }
/* static caret - 3px x 84%, pinned right, no blink */
.cd-words-wrapper::after {
  content: "";
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  width: 3px; height: 84%;
  background: #fff;
}

/* ---- social buttons ----------------------------------------------------- */
.tf-social-icon-2 { display: flex; align-items: center; gap: 8px; }
.tf-social-icon-2.user-social { display: grid; gap: 8px; }

.tf-social-icon-2 a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: var(--shadow);
  transition: background-color var(--dur-fast) ease;
}
.tf-social-icon-2 a:hover { background-color: #d2d2d2; }
.tf-social-icon-2 .fi { font-size: 20px; }

[data-theme="dark"] .tf-social-icon-2 a {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
  color: #fff;
}

/* ---- pill CTA ----------------------------------------------------------- */
.tf-btn-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tf-btn-action .ic-wrap,
.tf-btn-action .text {
  display: flex; align-items: center; justify-content: center;
  height: 40px;
  border-radius: 999px;
  background-color: var(--primary);
  transition: all var(--dur-mid) ease;
}
.tf-btn-action .ic-wrap { aspect-ratio: 1; }
.tf-btn-action .ic-wrap .fi { transition: transform var(--dur-fast) ease; font-size: 18px; }
.tf-btn-action .text { padding-inline: 20px; }
.tf-btn-action .text,
.tf-btn-action .fi { color: #000; }

/* two icon capsules: #1 leads, #3 is hidden and swaps in on hover */
.tf-btn-action .ic-wrap:nth-child(3) {
  opacity: 0; visibility: hidden;
  margin-left: -48px;
  transform: scale(0);
}
.tf-btn-action:hover .ic-wrap:first-child { margin-right: -48px; transform: scale(0); }
.tf-btn-action:hover .ic-wrap:nth-child(3) {
  opacity: 1; visibility: visible;
  margin-left: 0;
  transform: scale(1);
}
.tf-btn-action:hover .ic-wrap:nth-child(3) .fi { transform: rotate(45deg); }

/* ==========================================================================
   4. Hero - #home.section-intro
   ========================================================================== */
.section-intro .intro-author  { display: flex; align-items: center; gap: 20px; margin-bottom: 43px; }
.section-intro .intro-title   { margin-bottom: 63px; }
/* At 320px the longest headline word is wider than the 288px column and pushes
   the whole page 22px wide. break-word only splits a word that cannot fit on a
   line of its own, so normal widths are unaffected. */
.section-intro .intro-title { overflow-wrap: break-word; }
.section-intro .intro-item    { position: relative; margin-bottom: -65px; }
.section-intro .box-counter   { display: flex; align-items: center; gap: 24px; margin-bottom: 84px; }
.section-intro .intro-client  { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }

@media (max-width: 991px) { .section-intro .intro-author { margin-bottom: 30px; } }
@media (max-width: 575px) {
  .section-intro .intro-title { margin-bottom: 30px; }
  .section-intro .intro-item  { margin-bottom: 30px; }
}

/* ---- author row --------------------------------------------------------- */
.section-intro .intro-author .author-image {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  width: 48px; aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}
.section-intro .intro-author .author-image img { width: 100%; height: 100%; object-fit: cover; }

/* In dark mode the bottom of the portrait (dark shirt) sits at almost the same
   luminance as the page ground, so the circle's lower edge dissolves and the
   avatar reads as a broken shape. A hairline ring defines it regardless of what
   the photo happens to contain. The default --shadow is black-based and is
   invisible against #0f0f0f, which is why it needs its own rule here. */
[data-theme="dark"] .section-intro .intro-author .author-image {
  box-shadow: 0 0 0 1px var(--black-15);
}
.section-intro .intro-author .info_name { color: var(--black); }
.section-intro .intro-author .info_duty { color: var(--black-50); }

/* --black is a fixed #000 (only the alpha steps swap), so every place it is
   used as ink ON THE PAGE GROUND needs an explicit dark-theme counterpart -
   the same pattern the spec already applies to .wg-curve-text .text span. */
[data-theme="dark"] .section-intro .intro-author .info_name { color: var(--white); }

/* ---- headline ----------------------------------------------------------- */
/* The pill's own padding creates the gap either side of the word, so the
   spacing survives no matter how the surrounding copy is edited. It used to
   depend on a literal trailing space in the text field, which the admin panel
   trimmed away - leaving the pill touching the words next to it. */
.intro-title span {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 999px;
  color: var(--primary);
  /* A pill must never split across two lines: its background is a single
     absolutely-positioned ::after, which cannot follow a wrap and collapses
     into a blob at the break. Keeping it on one line moves the whole pill
     down instead, which is what the design intends. */
  white-space: nowrap;
}
.intro-title span::after {
  content: "";
  position: absolute;
  top: 57%; left: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 85%;
  z-index: -1;
  border-radius: 999px;
  background-color: var(--white);
  box-shadow: var(--shadow);
  transition: all var(--dur-slow) ease;
}
.intro-title span.type-2::after { background-color: var(--black); }
/* The pill overhangs its word by 10px each side and sits in the word spaces
   that hero.php prints around it - so the gap survives no matter what text
   the admin panel stores, which a trailing space in the field did not. */
.intro-title span.active::after { width: calc(100% + 20px); }

[data-theme="dark"] .section-intro .intro-title span:not(.type-2) { color: var(--white); }
[data-theme="dark"] .section-intro .intro-title span::after {
  background: linear-gradient(var(--primary) 0%, var(--primary-66) 100%);
}
[data-theme="dark"] .section-intro .intro-title span.type-2::after {
  background: linear-gradient(#fff3 0%, #ffffff0a 100%);
}

/* ---- flipping pill ------------------------------------------------------
   The accent pill swaps its word on a 3D flip. Only the word rotates; the
   pill itself just resizes, so the background never distorts and the words
   around it never jump - a transform costs no layout.

   The width is set in px by the script (measured per word) because a pill
   sized by its content would snap between widths instead of easing. */
.intro-title span.is-flip {
  display: inline-block;
  overflow: visible;          /* the flip travels outside the padded box */
  text-align: center;
  perspective: 600px;
  transition: width var(--dur-slow) cubic-bezier(.4, 0, .2, 1);
}
.intro-title span.is-flip .flip-word {
  display: inline-block;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* Three states, driven from JS: the old word tips away from the reader, the
   new word is parked face-down on the far side without animating, then it
   tips in. Nothing fades - perspective alone squeezes the word to a line as
   it passes 90 degrees, which is what makes it read as a physical flip. */
.intro-title span.is-flip.flip-out .flip-word {
  transform: rotateX(-90deg);
  transition: transform 280ms cubic-bezier(.5, 0, .9, .35);
}
.intro-title span.is-flip.flip-set .flip-word {
  transform: rotateX(90deg);
  transition: none;
}
.intro-title span.is-flip.flip-in .flip-word {
  transform: rotateX(0deg);
  transition: transform 380ms cubic-bezier(.16, .84, .32, 1);
}

/* ---- hero code block ---------------------------------------------------- */
.hero-code-wrap { max-width: 1000px; margin: 0 auto; }

.hero-code {
  display: block;
  width: 100%; height: auto;
  overflow: visible;
  /* Inside an SVG these are user units, so the type scales with the viewBox
     and the block keeps the column-proportional height it always had. */
  font-family: var(--font-mono);
  font-size: 20px;
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  /* The block dissolves into the page ground instead of ending on a hard edge. */
  -webkit-mask-image: radial-gradient(118% 96% at 6% 22%, #000 20%, transparent 86%);
          mask-image: radial-gradient(118% 96% at 6% 22%, #000 20%, transparent 86%);
}
.hero-code.is-typed { opacity: 1; }

/* Restrained palette - two neutral levels, faint punctuation and the accent.
   Deliberately not a full rainbow syntax theme; this is background texture. */
.hero-code text  { fill: var(--black-36); }
.hero-code .k    { fill: var(--primary);  }   /* keywords          */
.hero-code .o    { fill: var(--primary);  }   /* operators         */
.hero-code .n    { fill: var(--primary);  }   /* numbers           */
.hero-code .f    { fill: var(--black-56); }   /* functions/methods */
.hero-code .c    { fill: var(--black-56); }   /* constructors      */
.hero-code .s    { fill: var(--black-56); }   /* strings           */
.hero-code .v    { fill: var(--black-36); }   /* objects           */
.hero-code .p    { fill: var(--black-15); }   /* punctuation       */

/* Each line is clipped to nothing, then wiped open in steps so the glyphs
   appear a few at a time - a typing cadence rather than a smooth slide. */
.hero-code .cl {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s steps(26, end);
}
.hero-code.is-typed .cl { clip-path: inset(0 -4% 0 0); }

.hero-code .cl:nth-of-type(1) { transition-delay: 0s;    }
.hero-code .cl:nth-of-type(2) { transition-delay: .18s;  }
.hero-code .cl:nth-of-type(3) { transition-delay: .36s;  }
.hero-code .cl:nth-of-type(4) { transition-delay: .54s;  }
.hero-code .cl:nth-of-type(5) { transition-delay: .72s;  }
.hero-code .cl:nth-of-type(6) { transition-delay: .90s;  }
.hero-code .cl:nth-of-type(7) { transition-delay: 1.08s; }
.hero-code .cl:nth-of-type(8) { transition-delay: 1.26s; }

/* Cursor parks after the closing brace once the last line lands. */
.hero-code .cur { fill: var(--primary); opacity: 0; }
.hero-code.is-typed .cur { animation: caretBlink 1.06s 1.9s infinite; }

/* Below 576 the badge moves to left:0 and covers half the block, and the type
   would render around 9px - illegible noise rather than code. Hide it there,
   but with visibility so the box still reserves the badge's height. */
@media (max-width: 575px) {
  .hero-code { visibility: hidden; }
}
@keyframes caretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---- rotating badge ----------------------------------------------------- */
.wg-curve-text {
  position: absolute;
  top: -54px; left: 43%;
  display: inline-flex;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: var(--shadow-4);
}
.wg-curve-text .icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.text-rotate {
  display: flex; align-items: center; justify-content: center;
  width: max-content; height: max-content;
  margin: 0;
  background-color: transparent;
  animation: spin 10s linear infinite;
}
.text-rotate .circle { position: relative; width: 166px; height: 166px; border-radius: 50%; }
.text-rotate .text span {
  position: absolute;
  top: 0; left: 50%;
  transform-origin: 0 83px;                 /* = radius */
  padding-top: 4px;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 400;
  letter-spacing: -.08px;
  color: var(--black);
}
@keyframes spin { to { transform: rotate(360deg); } }

[data-theme="dark"] .wg-curve-text {
  background: linear-gradient(#000000e6 0%, #0000000a 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-glass);
}
[data-theme="dark"] .wg-curve-text .text span { color: var(--white); }
[data-theme="dark"] .wg-curve-text .icon path { fill: #fff; }

@media (max-width: 575px) {
  .section-intro .intro-item .wg-curve-text { top: 50%; left: 0; transform: translateY(-50%); }
  .section-intro .text-rotate .circle { width: 150px; height: 150px; }
  .section-intro .text-rotate .text span { transform-origin: 0 75px; }
}

/* ---- stats -------------------------------------------------------------- */
.wg-counter .counter { margin-bottom: 10px; }   /* .h1 → weight 400, display font */
.wg-counter .text { color: var(--black-56); }

/* ---- clients caption ---------------------------------------------------- */
.section-intro .intro-client { color: var(--black); }
.section-intro .intro-client .fi { font-size: 18px; }
[data-theme="dark"] .section-intro .intro-client { color: var(--white); }

/* ---- logo marquee ------------------------------------------------------- */
.infiniteSlide-brand {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000 0%, #000 18% 82%, #0000 100%);
          mask-image: linear-gradient(90deg, #0000 0%, #000 18% 82%, #0000 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media (min-width: 992px) { .infiniteSlide-brand { max-width: 464px; } }

.infiniteSlide-brand .track {
  display: flex;
  width: max-content;
  animation: marquee linear infinite;
}
.infiniteSlide-brand:hover .track { animation-play-state: paused; }
.infiniteSlide-brand .image-brand {
  margin-right: 28px;
  padding-left: 28px;
  flex: 0 0 auto;
}
.infiniteSlide-brand .image-brand img { height: 24px; width: auto; display: block; }
@keyframes marquee { to { transform: translateX(-50%); } }

[data-theme="dark"] .infiniteSlide-brand .track { opacity: .72; }

/* ==========================================================================
   5. Right rail - .sidebar-tools and .tf-left-bar
   ========================================================================== */
.sidebar-tools {
  position: fixed;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  z-index: 97;
  display: grid;
  gap: 8px;
}
@media (min-width: 1600px) { .sidebar-tools { left: 48px; } }

.sidebar-tools .nav-top,
.sidebar-tools .nav-bottom,
.sidebar-tools .nav-list {
  background-color: var(--white);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.sidebar-tools .nav-list { padding: 4px; }
.sidebar-tools .nav-list ul { list-style: none; margin: 0; padding: 0; }
.sidebar-tools .nav-list .br-line {
  width: 12px;
  margin: 4px auto;
  background-color: var(--black-6);
  display: flex;
}

.tf-btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
}
.sidebar-tools .item-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.sidebar-tools .tf-btn-icon,
.sidebar-tools .item-link {
  color: var(--black-40);
  transition: color var(--dur-fast) ease;
}
.sidebar-tools .tf-btn-icon:hover,
.sidebar-tools .tf-btn-icon.active,
.sidebar-tools .item-link:hover,
.sidebar-tools .item-link.active { color: var(--primary); }
.sidebar-tools .item-link.active { transition-delay: .3s; }
.sidebar-tools .fi { font-size: 18px; }

/* tooltip flies out to the left */
.sidebar-tools .item-link .tool-tip {
  position: absolute;
  top: 50%; left: 100%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  height: 28px;
  padding-inline: 12px;
  border-radius: 999px;
  background-color: var(--white);
  color: var(--black);
  font-size: 14px; line-height: 20px;
  letter-spacing: -.005em;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  box-shadow: var(--shadow);
  transition: all var(--dur-fast) ease;
}
.sidebar-tools .item-link:hover .tool-tip,
.sidebar-tools .item-link:focus-visible .tool-tip {
  opacity: 1; visibility: visible;
  left: calc(100% + 12px);
}
@media (max-width: 1199px) { .sidebar-tools .tool-tip { display: none !important; } }

/* go-top fades in past 400px of scroll */
.sidebar-tools .nav-bottom {
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) ease, visibility var(--dur-fast) ease;
}
.sidebar-tools .nav-bottom.is-visible { opacity: 1; visibility: visible; }

/* settings gear, above the rail */
.tf-left-bar { position: fixed; top: 120px; left: 16px; z-index: 97; }
.tf-left-bar .btn-setting-color { font-size: 18px; }
@media (min-width: 1600px) { .tf-left-bar { left: 48px; } }
@media (max-width: 1199px) { .tf-left-bar { top: 100px; } }
@media (max-width: 767px)  { .tf-left-bar { top: 50%; transform: translateY(-50%); } }

.tf-btn-icon.style-2 {
  border-radius: 50%;
  background: #fff;
  color: var(--black-40);
  box-shadow: var(--shadow);
}
.tf-left-bar .btn-setting-color[aria-disabled="true"] { cursor: default; }

[data-theme="dark"] .sidebar-tools .nav-top,
[data-theme="dark"] .sidebar-tools .nav-bottom,
[data-theme="dark"] .sidebar-tools .nav-list,
[data-theme="dark"] .tf-btn-icon.style-2 {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
[data-theme="dark"] .sidebar-tools .tf-btn-icon,
[data-theme="dark"] .sidebar-tools .item-link { color: var(--black-36); }
[data-theme="dark"] .sidebar-tools .nav-list .br-line { background-color: var(--black-8); }

@media (max-width: 991px) {
  .sidebar-tools { top: auto; bottom: 16px; transform: none; }
  .sidebar-tools .nav-list { display: none; }
}

/* ==========================================================================
   6. Real Projects - #work.section-work
   ========================================================================== */

/* ---- shared section header (reusable by later sections) ----------------- */
.section-head { margin-bottom: 48px; }
.section-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  color: var(--primary);
}
.section-eyebrow .fi { font-size: 18px; }
.section-title {
  font-size: clamp(34px, 4.5vw + 6px, 52px);
  line-height: clamp(40px, 5vw + 8px, 56px);
  margin-bottom: 16px;
}
.section-intro-text {
  max-width: 52ch;
  color: var(--black-56);
}
@media (max-width: 767px) { .section-head { margin-bottom: 32px; } }

/* ---- the list ----------------------------------------------------------- */
/* ---- carousel ----------------------------------------------------------- */
/* A real scroll container with scroll-snap, so touch swipe, trackpad and arrow
   keys work natively. JS only drives the buttons, counter and progress bar. */
.work-viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Vertical breathing room so the card shadow and hover lift are not clipped
     by the scroll container. Vertical only - horizontal padding would offset
     where the slides snap to. */
  padding-block: 20px;
  margin-block: -20px;
}
.work-viewport::-webkit-scrollbar { display: none; }
.work-viewport:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 28px; }

.work-track { display: flex; gap: 24px; }
@media (max-width: 575px) { .work-track { gap: 16px; } }

.work-card {
  flex: 0 0 84%;              /* the remainder is the next slide peeking in */
  scroll-snap-align: start;
  padding: 12px;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: var(--shadow);
  color: inherit;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
[data-theme="dark"] .work-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
.work-card.is-link { cursor: pointer; }
.work-card.is-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-4); }
[data-theme="dark"] .work-card.is-link:hover { box-shadow: var(--shadow-glass); }

/* ---- thumbnail ---------------------------------------------------------- */
.work-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 2 / 1;
  background-color: var(--black-6);
}
.work-thumb::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--black-6);
  border-radius: 18px;
  pointer-events: none;
}
.work-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-card.is-link:hover .work-thumb img { transform: scale(1.03); }

.work-year {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center;
  height: 28px; padding-inline: 12px;
  border-radius: 999px;
  background-color: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .work-year {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-glass);
  color: var(--white);
}

/* ---- body --------------------------------------------------------------- */
.work-body { padding: 20px 12px 8px; }
.work-title-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.work-title {
  font-size: clamp(20px, 2vw + 2px, 24px);
  line-height: clamp(24px, 2.5vw + 3px, 32px);
  color: var(--black);
}
[data-theme="dark"] .work-title { color: var(--white); }

.work-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--black-6);
  color: var(--black-56);
  transition: background-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              transform var(--dur-fast) ease;
}
.work-arrow .fi { font-size: 16px; }
.work-card.is-link:hover .work-arrow {
  background-color: var(--primary);
  color: #000;
  transform: rotate(45deg);
}

.work-summary { color: var(--black-56); margin-bottom: 16px; }

.work-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.work-tag {
  display: flex; align-items: center;
  height: 28px; padding-inline: 12px;
  border-radius: 999px;
  background-color: var(--black-6);
  color: var(--black-56);
  letter-spacing: -.005em;
}

/* ---- footer CTA --------------------------------------------------------- */
.work-foot { margin-top: 40px; }
@media (max-width: 767px) { .work-foot { margin-top: 28px; } }

/* ---- section head row (title left, room for controls) ------------------- */
.work-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* ---- controls: progress, counter, prev/next ----------------------------- */
.work-controls {
  display: flex; align-items: center; gap: 20px;
  margin-top: 28px;
}
@media (max-width: 575px) { .work-controls { gap: 14px; margin-top: 20px; } }

.work-progress {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background-color: var(--black-8);
  overflow: hidden;
}
.work-progress-bar {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background-color: var(--primary);
  transition: width var(--dur-mid) var(--ease-out);
}

.work-count {
  flex: 0 0 auto;
  color: var(--black-56);
  font-variant-numeric: tabular-nums;
}
.work-count .work-cur { color: var(--black); }
[data-theme="dark"] .work-count .work-cur { color: var(--white); }

.work-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.work-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--black-56);
  box-shadow: var(--shadow);
  transition: color var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              opacity var(--dur-fast) ease;
}
[data-theme="dark"] .work-btn {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
  color: var(--black-36);
}
.work-btn .fi { font-size: 18px; }
/* One arrow glyph, rotated into a left and a right chevron. */
.work-ic-prev { transform: rotate(-90deg); }
.work-ic-next { transform: rotate(90deg); }

.work-btn:hover:not(:disabled) { color: #000; background-color: var(--primary); }
[data-theme="dark"] .work-btn:hover:not(:disabled) { background: var(--primary); color: #000; }
.work-btn:disabled { opacity: .35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .work-viewport { scroll-behavior: auto; }
  .work-progress-bar { transition: none; }
}

/* ==========================================================================
   7. About - #about
   ========================================================================== */
.about-body { max-width: 60ch; margin-bottom: 36px; }
.about-body p { color: var(--black-56); }
.about-body p + p { margin-top: 16px; }

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background-color: var(--black-8);   /* shows through as the hairline grid */
}
@media (max-width: 575px) { .about-facts { grid-template-columns: 1fr; } }

.about-fact {
  padding: 18px 20px;
  background-color: var(--white);
}
[data-theme="dark"] .about-fact { background-color: var(--dark); }
.about-fact dt { color: var(--black-40); margin-bottom: 4px; }
.about-fact dd { margin: 0; color: var(--black); }
[data-theme="dark"] .about-fact dd { color: var(--white); }

/* ==========================================================================
   8. Highlights - #highlights (timeline)
   ========================================================================== */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* The spine sits behind the dots and stops at the last item. */
.timeline::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 5px;
  width: 1px;
  background-color: var(--black-8);
}

.tl-item { position: relative; padding-left: 32px; }
.tl-item + .tl-item { margin-top: 28px; }

.tl-dot {
  position: absolute; top: 7px; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background-color: var(--primary);
  box-shadow: 0 0 0 4px var(--white);
}
[data-theme="dark"] .tl-dot { box-shadow: 0 0 0 4px var(--dark); }

.tl-period {
  display: flex; align-items: center; gap: 8px;
  color: var(--primary);
  margin-bottom: 6px;
}
.tl-period .fi { font-size: 15px; }
.tl-role {
  font-size: clamp(18px, 1.6vw + 2px, 22px);
  line-height: 1.3;
  color: var(--black);
  margin-bottom: 2px;
}
[data-theme="dark"] .tl-role { color: var(--white); }
.tl-org { color: var(--black-56); margin-bottom: 8px; }
.tl-detail { color: var(--black-56); max-width: 58ch; }

/* ==========================================================================
   9. Services - #service
   ========================================================================== */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-card {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: var(--shadow);
  transition: transform var(--dur-mid) var(--ease-out);
}
[data-theme="dark"] .svc-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
.svc-card:hover { transform: translateY(-3px); }

.svc-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #000;
}
.svc-icon .fi { font-size: 20px; }

.svc-title {
  font-size: clamp(18px, 1.6vw + 2px, 21px);
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--black);
}
[data-theme="dark"] .svc-title { color: var(--white); }
.svc-body { color: var(--black-56); max-width: 42ch; }

.svc-num {
  position: absolute; top: 20px; right: 22px;
  color: var(--black-15);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10. Tech stack - #tech
   ========================================================================== */
.tech-groups { display: grid; gap: 26px; }

.tech-group-name {
  color: var(--primary);
  margin-bottom: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tech-chip {
  display: flex; align-items: center;
  height: 36px;
  padding-inline: 16px;
  border-radius: 999px;
  background-color: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  transition: color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
[data-theme="dark"] .tech-chip {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
  color: var(--white);
}
.tech-chip:hover { color: var(--primary); }

/* ==========================================================================
   11. Testimonials - #testimonial
   --------------------------------------------------------------------------
   Reuses .work-viewport / .work-track / .work-controls so the carousel
   behaviour and the JS are shared; only the card styling differs.
   ========================================================================== */
.tm-card {
  flex: 0 0 84%;
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  padding: 28px 26px 24px;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .tm-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}

.tm-mark {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #000;
}
.tm-mark .fi { font-size: 17px; }

.tm-stars { color: var(--primary); letter-spacing: 3px; margin-bottom: 12px; font-size: 15px; }

.tm-quote {
  color: var(--black);
  margin-bottom: 20px;
  max-width: 52ch;
}
[data-theme="dark"] .tm-quote { color: var(--white-92); }
[data-theme="dark"] .tm-quote { color: rgba(255, 255, 255, .92); }

.tm-by { display: flex; flex-direction: column; gap: 2px; }
.tm-author { font-style: normal; font-weight: 500; color: var(--black); }
[data-theme="dark"] .tm-author { color: var(--white); }
.tm-role { color: var(--black-56); }

/* ==========================================================================
   12. Contact - #contact
   ========================================================================== */
.ct-wrap { display: grid; gap: 28px; }

.ct-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 767px) { .ct-details { grid-template-columns: 1fr; } }

.ct-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  background-color: var(--white);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .ct-detail {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
.ct-ic {
  grid-row: 1 / 3;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background-color: var(--black-6);
  color: var(--primary);
}
.ct-ic .fi { font-size: 17px; }
/* Grid items default to min-width:auto, so a long unbreakable address (an
   email, a URL) refuses to shrink and pushes the card past the viewport. */
.ct-detail > * { min-width: 0; }
.ct-lbl { color: var(--black-40); }
.ct-val {
  color: var(--black);
  text-decoration: none;
  overflow-wrap: anywhere;
}
[data-theme="dark"] .ct-val { color: var(--white); }
a.ct-val:hover { color: var(--primary); }

/* ---- the form ----------------------------------------------------------- */
.ct-form {
  padding: 26px;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .ct-form {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
}
@media (max-width: 575px) { .ct-form { padding: 20px; } }

.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 575px) { .ct-row { grid-template-columns: 1fr; } }

.ct-field { margin-bottom: 16px; }
.ct-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px; line-height: 20px;
  color: var(--black-56);
}
.ct-field input,
.ct-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--black-15);
  background-color: var(--black-4);
  color: var(--black);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
[data-theme="dark"] .ct-field input,
[data-theme="dark"] .ct-field textarea { color: var(--white); }
.ct-field textarea { resize: vertical; min-height: 120px; }
.ct-field input:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background-color: transparent;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: var(--black-36); }

/* Honeypot - off-screen rather than display:none, which some bots skip. */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.ct-submit { margin-top: 4px; border: 0; cursor: pointer; font: inherit; }

.ct-note {
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 14px; line-height: 20px;
}
.ct-note--ok  { background: #3dab2522; border: 1px solid #3dab2555; color: #2f7d1d; }
.ct-note--err { background: #f4433622; border: 1px solid #f4433655; color: #b3271b; }
[data-theme="dark"] .ct-note--ok  { color: #bdf0ae; }
[data-theme="dark"] .ct-note--err { color: #ffb3ad; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 28px 16px 40px;
  margin-top: 8px;
}
.foot-inner {
  width: 1176px; max-width: 100%;
  margin-inline: auto;
  padding-top: 22px;
  border-top: 1px solid var(--black-8);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px;
}
.foot-note,
.foot-credit { color: var(--black-40); margin: 0; }

/* Below 992 the fixed card becomes static, so the footer must clear the rail. */
@media (max-width: 991px) {
  .site-footer { padding-bottom: 84px; }
}