/* ==========================================================================
   New Portfolio — main.css
   Shared shell (header, menu, preloader, cursor, smooth scroll, reveals) +
   home-page sections. The animation blocks are ported verbatim from
   Old Portfolio/index.css with the colours swapped for the tokens below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

/* Both families are self-hosted from assets/fonts/ — there is no Google Fonts
   request. Each is a *variable* font, so one file covers the whole weight range
   (the `font-weight: 100 900` range syntax is what tells the browser that).
   The %2C in the Zalando filenames is the literal comma in "wdth,wght". */
@font-face {
  font-family: 'Zalando Sans';
  src: url('../assets/fonts/Zalando_Sans/ZalandoSans-VariableFont_wdth%2Cwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans';
  src: url('../assets/fonts/Zalando_Sans/ZalandoSans-Italic-VariableFont_wdth%2Cwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Tobias is a commercial typeface (Dinamo) and must be self-hosted.
   NOTE: these are the TRIAL files — fine for local work, but a trial licence does
   not cover a public site. Swap in the licensed release before going live. */
@font-face {
  font-family: 'Tobias';
  src: url('../assets/fonts/Tobias/TobiasVF-TRIAL.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tobias';
  src: url('../assets/fonts/Tobias/Tobias-TRIAL-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --orange: #ff5d1a;
  --orange-deep: #fd4400;
  --black: #020202;
  --white: #ffffff;
  --gray: #a6a6a6;
  --line: #333333;
  --font-sans: 'Zalando Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Tobias', Georgia, 'Times New Roman', serif;
  --content: 1160px;
  --gutter: 140px;
  --pad: 20px;
  --header-h: 90px;
}

/* --------------------------------------------------------------------------
   2. Reset / common  (old index.css 1–76)
   -------------------------------------------------------------------------- */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:focus {
  outline: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
}
* {
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  outline: none;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
}
h1, h2, h3, h4, h5, h6, ul, ol, p, button, figure {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}
ul, ol {
  list-style: none;
}
a, a:hover, a:focus {
  outline: none;
  color: inherit;
  text-decoration: none;
}
img {
  border: none;
  outline: none;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.inner-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: var(--content);
}
section {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Flex utilities  (old index.css 78–156)
   -------------------------------------------------------------------------- */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: initial !important;
}
.flexDirectionRow { flex-direction: row; }
.flexDirectionCol { flex-direction: column; }
.flexWrap { flex-wrap: wrap; }
.flexWrapReverse { flex-wrap: wrap-reverse; }
.flexJustifyBetween { justify-content: space-between; }
.flexJustifyStart { justify-content: flex-start; }
.flexJustifyEnd { justify-content: flex-end; }
.flexJustifyCenter { justify-content: center; }
.flexAlignItemsCenter { align-items: center; }
.flexAlignItemsBaseline { align-items: baseline; }
.flexAlignItemsStart { align-items: flex-start; }
.flexAlignItemsEnd { align-items: flex-end; }

/* --------------------------------------------------------------------------
   4. Header + menu  (old index.css 159–190, 257–324 + new nav/overlay)
   -------------------------------------------------------------------------- */
header.ss-header {
  top: 0;
  left: 0;
  z-index: 12;
  width: 100%;
  height: var(--header-h);
  padding: 0;
  position: fixed;
  background-color: transparent;
  -webkit-transition: ease 0.4s;
  -moz-transition: ease 0.4s;
  -ms-transition: ease 0.4s;
  transition: ease 0.4s;
}
header.ss-header.active {
  background-color: var(--black);
}
/* Home page: there is no header over the first screen at all, at any size. The contact
   row you see there is .hero-contact — part of the hero's own layout, so it scrolls
   away with it. The real header sits off-screen and drops in only when the second
   section arrives (.active).
   (It could not simply be position:absolute instead: .ss-header is a sibling of
   .scroll-container, and it is that container — not the window — which scrolls, so an
   absolutely-positioned header would never move either.) */
.home-page .ss-header {
  transform: translateY(-100%);
  transition: background-color .4s ease,
              transform .5s cubic-bezier(.165, .84, .44, 1);
}
.home-page .ss-header.active {
  transform: none;
}

/* Hero contact row — the first screen's own version of the links */
.hero-contact {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.hero-contact .inner-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}
.hero-logo {
  display: block;
  width: 40px;
  height: 40px;
  margin-right: auto;
}
.hero-contact a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 3px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--black);
}
.hero-contact a.hover-anim:before,
.hero-contact a.hover-anim:after {
  background: var(--black);
}
/* Mobile / iPad: the three links do not fit on one row, so the hero shows a single
   "CONTACT" word that opens the popup instead. */
@media only screen and (max-width: 1000px) {
  .hero-contact a:not(.contact-trigger) {
    display: none;
  }
  .hero-contact .contact-trigger {
    display: inline-flex;
  }
}
header .inner-wrapper {
  height: 100%;
  position: relative;
}
.header-logo {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--white);
  position: relative;
  z-index: 2;
}
.header-logo img {
  display: block;
  width: 100%;
  height: 100%;
}
/* Home page: the hero wordmark already carries "Samanta." at full size, so the
   header logo would be a duplicate on the first screen. It is held back and fades
   in only once the floating header appears (i.e. from the second section on). */
.home-page .ss-header .header-logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .45s ease, visibility .45s ease, transform .45s ease;
}
.home-page .ss-header.active .header-logo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Case-study pages swap the signature for "← Back" (same arrow as Next Project) */
.header-back {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.header-back-arrow {
  display: block;
  width: 26px;
  color: var(--orange);
  transform: rotate(180deg);
  transition: transform .4s cubic-bezier(.165, .84, .44, 1);
}
.header-back-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}
.header-back:hover .header-back-arrow {
  transform: rotate(180deg) translateX(0.18em);
}
.header-nav {
  gap: 40px;
}
.header-contact {
  display: flex;
  gap: 30px;
}
.header-contact a {
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding: 3px 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
/* LinkedIn icon: colour just follows currentColor, same as the text links
   around it (black over the orange hero, white once the black header is
   active) — no extra colour rules needed. */
.hero-contact .contact-linkedin,
.header-contact .contact-linkedin {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.contact-linkedin svg {
  display: block;
  width: 18px;
  height: 18px;
}
/* Home page: dark header text over the orange hero until scrolled */
.home-page .ss-header:not(.active) .header-logo,
.home-page .ss-header:not(.active) .header-contact a {
  color: var(--black);
}
.home-page .ss-header:not(.active) a.hover-anim:before,
.home-page .ss-header:not(.active) a.hover-anim:after {
  background: var(--black);
}

/* Two-bar relay underline (old 267–324) */
a.hover-anim:after,
a.hover-anim:before {
  content: "";
  position: absolute;
  top: 94%;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
  right: 0;
  background: var(--orange);
}
a.hover-anim:before {
  -webkit-transform: translate3d(-102%, 0, 0);
  transform: translate3d(-102%, 0, 0);
  opacity: 0;
}
a.hover-anim:after {
  transition: -webkit-transform .8s cubic-bezier(.165, .84, .44, 1);
  transition: transform .8s cubic-bezier(.165, .84, .44, 1);
  transition: transform .8s cubic-bezier(.165, .84, .44, 1), -webkit-transform .8s cubic-bezier(.165, .84, .44, 1);
  -webkit-transform: translate3d(102%, 0, 0);
  transform: translate3d(102%, 0, 0);
  opacity: 1;
}
a.hover-anim:hover:before {
  transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1);
  transition: transform .6s cubic-bezier(.165, .84, .44, 1);
  transition: transform .6s cubic-bezier(.165, .84, .44, 1), -webkit-transform .6s cubic-bezier(.165, .84, .44, 1);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 1;
}
a.hover-anim:hover:after {
  transition: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 0;
}
/* --------------------------------------------------------------------------
   4b. Contact trigger + popup  (mobile / iPad: replaces the old overlay menu)
   -------------------------------------------------------------------------- */
/* The icon button shown instead of the three inline links on smaller screens.
   Hidden on desktop, where the links themselves fit on one row. Colour just
   follows currentColor, like the LinkedIn icon above. */
.contact-trigger {
  display: none;
  align-items: center;
  position: relative;
  padding: 0;
  color: var(--white);
  background: none;
  border: 0;
}
.contact-trigger svg {
  display: block;
  width: 29px;
  height: 29px;
}
.contact-trigger svg rect {
  opacity: 0.5;
  transition: opacity .3s ease;
}
.contact-trigger svg circle {
  transition: opacity .3s ease;
}
.contact-trigger:hover svg rect {
  opacity: 0.9;
}
.contact-trigger:hover svg circle {
  opacity: 0.5;
}
.hero-contact .contact-trigger {
  color: var(--black);
}

.contact-popup {
  position: fixed;
  inset: 0;
  z-index: 120;
  visibility: hidden;
  pointer-events: none;
}
.contact-popup.is-open {
  visibility: visible;
  pointer-events: auto;
}
.contact-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 2, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .45s ease;
}
.contact-popup.is-open .contact-popup-backdrop {
  opacity: 1;
}
.contact-popup-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  padding: 40px 28px 32px;
  background: radial-gradient(circle, #333333 0%, #020202 100%);
  color: var(--white);
  border-radius: 28px 28px 0 0;
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.contact-popup.is-open .contact-popup-panel {
  transform: translateY(0);
}
.contact-popup-title {
  margin: 0 0 40px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.contact-popup-list li + li {
  margin-top: 30px;
}
.contact-popup-list a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
  word-break: break-word;
}
.contact-popup-list li + li.contact-popup-social {
  margin-top: 90px;
}
.contact-popup-social {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.contact-popup-social a {
  display: block;
  color: var(--white);
}
.contact-popup-social svg {
  display: block;
  width: 30px;
  height: 30px;
}
/* Rows stagger in behind the panel */
.contact-popup-title,
.contact-popup-list li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.contact-popup.is-open .contact-popup-title,
.contact-popup.is-open .contact-popup-list li {
  opacity: 1;
  transform: none;
}
.contact-popup.is-open .contact-popup-title     { transition-delay: .20s; }
.contact-popup.is-open .contact-popup-list li:nth-child(1) { transition-delay: .28s; }
.contact-popup.is-open .contact-popup-list li:nth-child(2) { transition-delay: .35s; }
.contact-popup.is-open .contact-popup-list li:nth-child(3) { transition-delay: .42s; }

.contact-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  color: var(--white);
  background: none;
  border: 0;
}
.contact-popup-close span {
  position: absolute;
  left: 11px;
  top: 19px;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.contact-popup-close span:nth-child(1) { transform: rotate(45deg); }
.contact-popup-close span:nth-child(2) { transform: rotate(-45deg); }
body.contact-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .contact-popup-backdrop,
  .contact-popup-panel,
  .contact-popup-title,
  .contact-popup-list li {
    transition-duration: .01ms;
  }
}

/* --------------------------------------------------------------------------
   5. Intro stagger  (old index.css 191–256)
   -------------------------------------------------------------------------- */
.fadeInDown {
  -webkit-transition: all ease-in-out 1s;
  -moz-transition: all ease-in-out 1s;
  -ms-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
  -webkit-transform: translate3d(0, -100%, 0);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
}
.fadeInLoad {
  -webkit-transition: all ease-in-out 1s;
  -moz-transition: all ease-in-out 1s;
  -ms-transition: all ease-in-out 1s;
  transition: all ease-in-out 1s;
  -webkit-transform: translate3d(0, 10%, 0);
  transform: translate3d(0, 10%, 0);
  opacity: 0;
  visibility: hidden;
}
.loaded .fadeInLoad {
  -webkit-transform: translateZ(0);
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
}
.loaded .fadeInDown {
  -webkit-transform: translateZ(0);
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
}
.loaded .header-logo,
.loaded .header-back {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.loaded .header-contact { transition-delay: 0.4s; }
.loaded .hero-meta { transition-delay: 0.6s; }
.loaded .wordmark { transition-delay: 0.8s; }
.loaded .cs-hero .fadeInLoad { transition-delay: 0.2s; }

/* No preloader on this load — a repeat visit within the session, or a case-study page,
   which never has one. The delays above were paced to land as the panels cleared; with
   no panels there is nothing to wait for, so they would just hold the hero empty for
   about a second. Collapse them and shorten the reveal so the page arrives at once. */
.no-preloader .fadeInLoad,
.no-preloader .fadeInDown {
  -webkit-transition-duration: 0.55s;
  transition-duration: 0.55s;
}
.no-preloader .loaded .header-contact,
.no-preloader .loaded .hero-meta,
.no-preloader .loaded .wordmark,
.no-preloader .loaded .cs-hero .fadeInLoad {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.no-preloader .text-layer span {
  transition-delay: 0s;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

/* --------------------------------------------------------------------------
   6. Custom cursor  (old index.css 342–411)
   -------------------------------------------------------------------------- */
/* Cuberto-style cursor: a small solid dot that tracks tightly and inflates into a
   soft disc over anything interactive. Brand orange instead of the reference's black. */
.circle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  width: 12px;
  height: 12px;
  user-select: none;
  border-radius: 100%;
  pointer-events: none;
  background-color: var(--orange);
  will-change: transform;
  transition: width 400ms cubic-bezier(.165, .84, .44, 1),
              height 400ms cubic-bezier(.165, .84, .44, 1),
              background-color 400ms ease;
  opacity: 0.9;
}
/* Links / buttons: grows into a translucent disc the underlying label reads through */
.circle.circle-active {
  width: 48px;
  height: 48px;
  background-color: rgba(255, 93, 26, 0.35);
}
/* Project cards: same translucent disc, sized to the "View project" button's own
   height (46px, see .btn-view) rather than a bigger custom puck */
.circle.card-active {
  width: 46px;
  height: 46px;
  background-color: rgba(255, 93, 26, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .circle { display: none; }
}

/* --------------------------------------------------------------------------
   7. Preloader + masked text reveal  (old index.css 413–535)
   -------------------------------------------------------------------------- */
.preloader {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  overflow: hidden;
  background-color: #FFFFFF;
}
/* Set by the inline script in head.php on a repeat visit within the same session */
.no-preloader .preloader {
  display: none;
}
.text-layer {
  display: block;
  overflow: hidden;
  position: relative;
}
.text-layer span {
  display: block;
  overflow: hidden;
  position: relative;
  -webkit-transform: translate3d(0, 100px, 0);
  transform: translate3d(0, 100px, 0);
  transition: -webkit-transform .8s cubic-bezier(.215, .61, .355, 1);
  transition: transform .8s cubic-bezier(.215, .61, .355, 1);
  transition: transform .8s cubic-bezier(.215, .61, .355, 1), -webkit-transform .8s cubic-bezier(.215, .61, .355, 1);
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.loaded .load-active .text-layer span {
  -webkit-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
}
h1.preloader-text {
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 100%;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 600;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
}
#text-rotate div {
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation: pulsate 2s ease-out;
  animation-iteration-count: infinite;
}
@-webkit-keyframes pulsate {
  0% { opacity: 1; -webkit-transform: scale(1.0); transform: scale(1.0); }
  50% { opacity: 1.0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}
@keyframes pulsate {
  0% { opacity: 1; -webkit-transform: scale(1.0); transform: scale(1.0); }
  50% { opacity: 1.0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}
.preloader:before,
.preloader:after,
.preloader span:before,
.preloader span:after {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  position: absolute;
  background-color: #000000;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}
.preloader:before {
  -webkit-transform: translate(-100%, -100%);
  transform: translate(-100%, -100%);
}
.preloader.active:before {
  -webkit-transform: translate(-49%, -49%);
  transform: translate(-49%, -49%);
}
.preloader:after {
  -webkit-transform: translate(-100%, 100%);
  transform: translate(-100%, 100%);
}
.preloader.active:after {
  -webkit-transform: translate(-49%, 49%);
  transform: translate(-49%, 49%);
}
.preloader.active span:before {
  -webkit-transform: translate(50%, -49%);
  transform: translate(50%, -49%);
}
.preloader span:before {
  -webkit-transform: translate(100%, -100%);
  transform: translate(100%, -100%);
}
.preloader.active span:after {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.preloader span:after {
  -webkit-transform: translate(100%, 100%);
  transform: translate(100%, 100%);
}

/* --------------------------------------------------------------------------
   8. Smooth-scroll container, card wipe, background lines  (old 540–606)
   -------------------------------------------------------------------------- */
.scroll-container {
  height: 100vh;
}
.no-smooth-scroll .scroll-container {
  height: auto;
}
.content-wrapper {
  position: relative;
  background: radial-gradient(#333333 0%, var(--black) 100%);
}
.content-wrapper .inner-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: var(--content);
  position: relative;
}
.img-loader {
  z-index: 3;
  left: -25%;
  width: 150%;
  bottom: -25%;
  height: 150%;
  position: absolute;
  background-color: var(--black);
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  transition-delay: 0.3s;
}
.home-project-list-item.active .img-loader {
  height: 0px;
  opacity: 1;
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
}

/* --------------------------------------------------------------------------
   9. Home — hero
   -------------------------------------------------------------------------- */
.banner-section.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ff5d1a 0%, #ff5d1a 40%, #fd4400 92%, #fd4400 100%);
}
.hero-headline {
  position: absolute;
  right: var(--gutter);
  top: 13%;
  margin: 0;
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(24px, 3.75vw, 54px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--black);
}
.hero-meta {
  position: absolute;
  left: var(--gutter);
  top: 57%;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
}
.hero-meta p {
  margin: 0 0 10px;
}
.hero-meta strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--black);
  position: relative;
  overflow: hidden;
  padding: 2px 0;
}
.hero-more svg {
  width: 7px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-more.hover-anim:before,
.hero-more.hover-anim:after {
  background: var(--black);
}
/* The hero mark is two separate SVGs — swastik.svg and samanta.svg — reassembled
   here into the single composition they used to share.
   Geometry comes straight from the original artboard: SWASTIK occupied x 0–1440,
   y 620–840, and the signature x 772–1300.33, y 468–643.16. SWASTIK sets the box,
   so the signature's offsets are expressed as fractions of it:
     left   =  772   / 1440 = 53.6111%
     width  =  528.33/ 1440 = 36.6896%
     bottom = (840 - 643.16) / 220 = 89.4727%
   Both marks use fill="currentColor", so the colours are set below, not in the files. */
.wordmark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.21vw;
  line-height: 0;
  pointer-events: none;
}
.wordmark-inner {
  position: relative;
  width: 100%;
}
.wm-swastik {
  display: block;
  width: 100%;
  color: var(--white);
}
.wm-samanta {
  position: absolute;
  left: 53.6111%;
  bottom: 89.4727%;
  width: 36.6896%;
  color: var(--black);
}
.wm-swastik svg,
.wm-samanta svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Signature writing animation — the mark is filled outlines, not centreline strokes,
   so a stroke-dashoffset "pen draw" is not possible on it. Instead each glyph has its
   own clip rect in samanta.svg, and the rects are scaled open left-to-right in writing
   order: S-swash, a, m, a, n, t, a, full stop, then the underline flourish.
   Durations are proportional to each glyph's width, so the pen holds a roughly constant
   speed instead of every letter taking the same time. js/main.js adds .is-drawn once the
   preloader has cleared. */
.wm-samanta .sig-wipe {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0s linear;
}
.wm-samanta.is-drawn .sig-wipe {
  transform: scaleX(1);
}
/* glyph widths: 232, 68, 92, 68, 76, 82, 68, 12, 359 user units */
.wm-samanta.is-drawn .sig-w0 { transition-duration: .52s; transition-delay: 0s;    }
.wm-samanta.is-drawn .sig-w1 { transition-duration: .16s; transition-delay: .46s;  }
.wm-samanta.is-drawn .sig-w2 { transition-duration: .21s; transition-delay: .58s;  }
.wm-samanta.is-drawn .sig-w3 { transition-duration: .16s; transition-delay: .75s;  }
.wm-samanta.is-drawn .sig-w4 { transition-duration: .18s; transition-delay: .87s;  }
.wm-samanta.is-drawn .sig-w5 { transition-duration: .19s; transition-delay: 1.01s; }
.wm-samanta.is-drawn .sig-w6 { transition-duration: .16s; transition-delay: 1.16s; }
/* the full stop is a dab, not a stroke */
.wm-samanta.is-drawn .sig-w7 { transition-duration: .09s; transition-delay: 1.30s; }
/* the underline is a fast flourish that decelerates into its tail */
.wm-samanta.is-drawn .sig-w8 {
  transition-duration: .46s;
  transition-delay: 1.44s;
  transition-timing-function: cubic-bezier(.3, .7, .4, 1);
}
@media (prefers-reduced-motion: reduce) {
  .wm-samanta .sig-wipe {
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   10. Home — projects (cards, slider, wipe, liquid hover)
   -------------------------------------------------------------------------- */
.home-projects-section {
  padding: 120px 0 0;
}
.home-project-lists {
  width: 100%;
  margin: 0;
}
.home-project-list-item {
  display: block;
  width: 960px;
  max-width: 100%;
  margin: 0 0 120px;
  position: relative;
}
.home-project-list-item:last-child {
  margin-bottom: 110px;
}
.home-project-list-item.is-indented {
  margin-left: 200px;
}
.home-project-list-item.is-wide {
  width: var(--content);
}
.project-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 960 / 620;
  background: var(--black);
  cursor: pointer;
}
.is-wide .project-media {
  aspect-ratio: 1160 / 574;
}
.project-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, 0.83) 100%);
}
.slider-track {
  position: absolute;
  inset: 0;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.project-image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Plain images — the liquid hover effect now lives on the photo grid instead */
.project-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
/* Dash App: gradient box + browser frame + inset screenshot */
.is-dash .project-media {
  background: linear-gradient(135deg, #424242 0%, #020202 100%);
}
.is-dash .dash-frame {
  position: absolute;
  left: 7.2%;
  top: 8.2%;
  width: 85.6%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.is-dash .slider-track {
  left: 7.4%;
  top: 12.1%;
  width: 85.3%;
  height: 74.2%;
  right: auto;
  bottom: auto;
  z-index: 2;
}
/* Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 45px;
  height: 90px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
  transition: background .3s ease;
}
.slider-arrow--prev {
  left: 0;
  border-left: 0;
  border-radius: 0 45px 45px 0;
}
.slider-arrow--next {
  right: 0;
  border-right: 0;
  border-radius: 45px 0 0 45px;
}
.slider-arrow:hover {
  background: rgba(255, 255, 255, 0.14);
}
.slider-arrow svg {
  width: 7px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Dots (mobile) */
.slider-dots {
  display: none;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
}
.slider-dots[hidden] {
  display: none !important;
}
.slider-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  transition: background .3s ease;
}
.slider-dot.is-active {
  background: var(--orange);
}
/* Copy */
.project-name {
  position: relative;
  z-index: 5;
  margin: -55px 0 0;
  font-size: clamp(40px, 4.5vw, 65px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.55);
}
.project-description {
  margin: 18px 0 0;
  max-width: 800px;
  font-size: 24px;
  line-height: 34px;
  font-weight: 400;
  color: var(--white);
}
.project-description strong {
  font-weight: 700;
}
.btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 46px;
  margin-top: 32px;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--orange);
}
/* At rest the borders sit slightly apart, leaving open "bracket" corners. On hover
   they slide together into one closed orange rectangle (per the design). */
.btn-view::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  right: -5px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: border-color .4s ease,
              left .45s cubic-bezier(.165, .84, .44, 1),
              right .45s cubic-bezier(.165, .84, .44, 1);
}
.btn-view::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  bottom: -4px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: border-color .4s ease,
              top .45s cubic-bezier(.165, .84, .44, 1),
              bottom .45s cubic-bezier(.165, .84, .44, 1);
}
.btn-view:hover::before {
  left: 0;
  right: 0;
  border-color: var(--orange);
}
.btn-view:hover::after {
  top: 0;
  bottom: 0;
  border-color: var(--orange);
}
/* Hover also puts a white handle square on each corner of that rectangle, like the
   selection box in a design tool. Both pseudo-elements are already spoken for by the
   borders, so the four squares are one element painted with four gradient layers.
   The inset is half the square size, which is what centres each square on the corner
   rather than tucking it inside — keep the two in step if you resize them. */
.btn-view-corners {
  position: absolute;
  inset: -3px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  transition: opacity .3s ease, transform .4s cubic-bezier(.165, .84, .44, 1);
  background-image:
    linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white)),
    linear-gradient(var(--white), var(--white));
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
}
.btn-view:hover .btn-view-corners,
.btn-view:focus-visible .btn-view-corners {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .btn-view-corners {
    transition: opacity .01ms;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   11. Home — about
   -------------------------------------------------------------------------- */
.about-section {
  padding: 140px 0;
  background: #000;
}
.about-section .inner-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  column-gap: 80px;
  align-items: center;
}
.about-media {
  position: relative;
  overflow: hidden;
  /* height comes from the aspect-ratio inline style — the image's own ratio,
     read from the file (see index.php) — so nothing is cropped to fit */
}
.about-media picture,
.about-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.about-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.17vw, 60px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 70px;
}
.about-copy{ padding-top:30px}
.about-copy p {
  font-size: 20px;
  line-height: 35px;
  font-weight: 400;
  color: var(--gray);
  margin: 0 0 20px;
}
.about-copy p strong {
  font-weight: 600;
  color: #c9c9c9;
}

/* --------------------------------------------------------------------------
   12. Home — photo grid
   -------------------------------------------------------------------------- */
.grid-section {
  padding: 120px 0 0;
}
.grid-section .inner-wrapper {
  container-type: inline-size;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  grid-template-rows:
    calc(301 / 1160 * 100cqw)
    calc(2 / 1160 * 100cqw)
    calc(97 / 1160 * 100cqw)
    calc(20 / 1160 * 100cqw)
    calc(400 / 1160 * 100cqw);
}
.t-book       { grid-column: 1; grid-row: 1 / 4; }
.t-turban     { grid-column: 1; grid-row: 5; }
.t-ghost      { grid-column: 2; grid-row: 1; }
.t-sneaker    { grid-column: 2; grid-row: 3 / 6; }
.t-city       { grid-column: 3; grid-row: 1 / 4; }
.t-sunglasses { grid-column: 3; grid-row: 5; }
.tile {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Liquid hover (three.js + hover-effect) — moved here from the project cards.
   Each tile carries the image twice so the shader has two textures to displace
   between; the <img>s are hidden once the canvas takes over, and shown again
   if WebGL is unavailable. */
.tile[data-liquid] img {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.tile[data-liquid].no-webgl img:first-child {
  display: block;
}
.tile[data-liquid] canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tile[data-liquid].is-ready canvas {
  opacity: 1;
}
.t-book img { object-position: 50% 67%; }
.t-turban img { object-position: 50% 36%; }
.t-ghost {
  display: flex;
  align-items: flex-start;
  overflow: visible;
}
.t-ghost svg {
  display: block;
  width: 75%;
  height: auto;
}
.t-ghost .ghost-text {
  fill: var(--white);
  fill-opacity: 0.06;
}

/* --------------------------------------------------------------------------
   13. Home — outro + shared footer
   -------------------------------------------------------------------------- */
.outro-section {
  padding: 180px 0 0;
}
.outro-title {
  margin: 0;
  font-size: clamp(60px, 12.5vw, 180px);
  line-height: 1.055;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white);
  white-space: nowrap;
}
.outro-title .dot {
  display: inline-block;
  width: 0.19em;
  height: 0.12em;
  margin-left: 0.03em;
  background: var(--orange);
  vertical-align: baseline;
}
.site-footer {
  padding: 33px 0 163px;
}
.site-footer-row {
  gap: 41px;
  flex-wrap: wrap;
}
.site-footer a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 2px 0;
  font-size: 16px;
  line-height: 19px;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
  :root {
    --gutter: 40px;
  }
  .inner-wrapper,
  .content-wrapper .inner-wrapper {
    padding: 0 40px;
  }
  .header-nav {
    gap: 24px;
  }
  .header-contact {
    gap: 22px;
  }
  /* Projects: desktop bumped to 120px above — keep ipad/tablet at its prior value */
  .home-projects-section {
    padding-top: 70px;
  }
  .home-project-list-item,
  .home-project-list-item.is-wide {
    width: 100%;
  }
  .home-project-list-item.is-indented {
    margin-left: 10%;
  }
  /* About: rows from tablet down — photo first, copy below */
  .about-section {
    padding: 110px 0 0;
  }
  .about-section .inner-wrapper {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
}

@media only screen and (max-width: 1000px) {
  header.ss-header {
    width: 100%;
  }
  /* Header keeps only the CONTACT trigger, which opens the popup */
  .header-contact a:not(.contact-trigger) {
    display: none;
  }
  .header-contact .contact-trigger {
    display: inline-flex;
  }
  .circle {
    display: none;
  }
  .scrollbar-track {
    display: none !important;
  }
  .ss-wrapper,
  .ss-wrapper * {
    cursor: auto;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --gutter: 20px;
    --header-h: 76px;
  }
  .inner-wrapper,
  .content-wrapper .inner-wrapper {
    padding: 0 var(--pad);
  }
  /* Header → CONTACT trigger */
  .hero-logo {
    width: 30px;
    height: 30px;
  }
  .header-back-arrow {
    width: 20px;
  }
  .contact-popup-panel {
    padding: 38px 24px 30px;
  }

  /* Hero */
  .hero-headline {
    right: auto;
    left: var(--pad);
    top: 99px;
    max-width: calc(100% - 40px);
    text-align: left;
    font-size: 24px;
    line-height: 35px;
  }
  .hero-meta {
    left: var(--pad);
    top: auto;
    bottom: 45px;
    font-size: 12px;
    line-height: 22px;
    max-width: 70%;
  }
  .hero-meta p {
    margin-bottom: 9px;
  }
  .hero-more {
    font-size: 14px;
  }
  .wordmark {
    left: auto;
    right: 0;
    bottom: 0;
    width: 30.5vw;
    height: 118vw;
    max-height: 100%;
  }
  /* Rotate the whole composition as one unit, so the signature keeps its place
     relative to SWASTIK */
  .wordmark-inner {
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 118vw;
    transform-origin: 0 100%;
    transform: rotate(-90deg);
  }

  /* Projects */
  .home-projects-section {
    padding-top: 20px;
  }
  .home-project-list-item,
  .home-project-list-item.is-wide {
    width: 100%;
    margin: 0 0 124px;
  }
  .home-project-list-item.is-indented {
    margin-left: 0;
  }
  .home-project-list-item:last-child {
    margin-bottom: 110px;
  }
  .is-wide .project-media {
    aspect-ratio: 960 / 620;
  }
  .slider-arrow {
    display: none;
  }
  .slider-dots {
    display: flex;
  }
  .project-name {
    margin-top: 19px;
    font-size: 48px;
    line-height: 1.2;
  }
  .project-description {
    margin-top: 18px;
    font-size: 20px;
    line-height: 35px;
  }
  .btn-view {
    margin-top: 20px;
  }

  /* About */
  .about-section {
    padding: 110px 0 0;
  }
  .about-section .inner-wrapper {
    row-gap: 32px;
  }
  .about-title {
    font-size: 40px;
    line-height: 38px;
    margin-bottom: 32px;
  }

  /* Photo grid → 2 columns */
  .grid-section {
    padding-top: 115px;
  }
  .grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    grid-template-rows:
      calc(184 / 353 * 100cqw)
      calc(10 / 353 * 100cqw)
      calc(44 / 353 * 100cqw)
      calc(10 / 353 * 100cqw)
      calc(184 / 353 * 100cqw)
      calc(10 / 353 * 100cqw)
      calc(184 / 353 * 100cqw);
  }
  .t-book       { grid-column: 1; grid-row: 1 / 4; }
  .t-sunglasses { grid-column: 1; grid-row: 5; }
  .t-city       { grid-column: 1; grid-row: 7; }
  .t-ghost      { grid-column: 2; grid-row: 1; }
  .t-sneaker    { grid-column: 2; grid-row: 3 / 6; }
  .t-turban     { grid-column: 2; grid-row: 7; }
  .t-ghost svg {
    width: 100%;
  }

  /* Outro + footer */
  .outro-section {
    padding-top: 100px;
  }
  .outro-title {
    font-size: 60px;
    line-height: 60px;
  }
  .site-footer {
    padding: 33px 0 67px;
  }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .wordmark {
    height: 100%;
  }
  .wordmark svg {
    width: 100vh;
  }
}

@media only screen and (max-width: 360px) {
  .hero-headline {
    font-size: 22px;
    line-height: 32px;
  }
  .project-name {
    font-size: 40px;
  }
  .outro-title {
    font-size: 52px;
    line-height: 52px;
  }
}