@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --razu-black: #050507;
  --razu-black-2: #090b10;
  --razu-white: #ffffff;
  --razu-muted: #9aa0ad;
  --razu-blue: #2d7dff;
  --razu-blue-bright: #4f8cff;
  --razu-glow: rgba(45, 125, 255, 0.28);
  --razu-display: "Bebas Neue", sans-serif;
  --razu-body: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--razu-black);
  color: var(--razu-white);
  font-family: var(--razu-body);
}

body { position: relative; }
button, a { font: inherit; }

[data-razu-portfolio-mount],
.portfolio-shell {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

.dual-site {
  position: relative;
  display: flex;
  width: 200vw;
  min-height: 100vh;
  overflow: visible !important;
  transform: translateX(0);
  transition: transform 700ms cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}

.dual-site.is-technical {
  transform: translateX(-100vw);
}

.site-panel {
  position: relative;
  isolation: isolate;
  flex: 0 0 100vw;
  width: 100vw;
  min-height: 100vh !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .58)),
    radial-gradient(circle at 72% 14%, rgba(45, 125, 255, .16), transparent 32%),
    radial-gradient(circle at 22% 85%, rgba(45, 125, 255, .07), transparent 28%),
    var(--razu-black);
  color: var(--razu-white) !important;
}

.site-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
}

.site-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, .92);
}

.site-panel--technical {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .68)),
    radial-gradient(circle at 25% 12%, rgba(45, 125, 255, .18), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(22, 58, 138, .09), transparent 32%),
    var(--razu-black-2);
}

.panel-inner {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 120px));
  min-height: 100vh !important;
  margin: 0 auto;
  padding: 110px 0 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--razu-white) !important;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 0 24px;
  color: var(--razu-blue-bright) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--razu-blue);
  box-shadow: 0 0 12px var(--razu-glow);
}

.portfolio-shell .panel-inner h1,
.portfolio-shell .site-panel h1 {
  max-width: 1040px;
  margin: 0 0 28px;
  color: #ffffff !important;
  font-family: var(--razu-display) !important;
  font-size: clamp(72px, 9.6vw, 154px) !important;
  font-weight: 400 !important;
  line-height: .84 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase;
}

.panel-inner > p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--razu-muted) !important;
  font-size: 18px;
  line-height: 1.8;
}

.panel-tab {
  position: absolute !important;
  top: 50% !important;
  z-index: 999999 !important;
  width: 76px !important;
  height: 72vh !important;
  min-height: 560px !important;
  max-height: 820px !important;
  margin: 0 !important;
  padding: 28px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(23, 34, 62, .98), rgba(6, 8, 14, .98)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--razu-display) !important;
  font-size: 26px !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  overflow: visible !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.58), 0 0 48px rgba(45,125,255,.32) !important;
}

.panel-tab span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block;
  width: max-content;
  margin: 0 !important;
  padding: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  white-space: nowrap;
  line-height: 1 !important;
  text-align: center;
  transform-origin: 50% 50%;
}

.panel-tab--right span {
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.panel-tab--left span {
  transform: translate(-50%, -50%) rotate(-90deg) !important;
}

.panel-tab--right {
  right: 0 !important;
  left: auto !important;
  border-left: 1px solid rgba(79,140,255,.95) !important;
  border-top: 1px solid rgba(79,140,255,.28) !important;
  border-bottom: 1px solid rgba(79,140,255,.28) !important;
  border-radius: 24px 0 0 24px !important;
}

.panel-tab--left {
  left: 0 !important;
  right: auto !important;
  border-right: 1px solid rgba(79,140,255,.95) !important;
  border-top: 1px solid rgba(79,140,255,.28) !important;
  border-bottom: 1px solid rgba(79,140,255,.28) !important;
  border-radius: 0 24px 24px 0 !important;
}

.dual-site:not(.is-technical) .site-panel--technical .panel-tab--left,
.dual-site.is-technical .site-panel--portfolio .panel-tab--right {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.dual-site:not(.is-technical) .site-panel--portfolio .panel-tab--right,
.dual-site.is-technical .site-panel--technical .panel-tab--left {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.panel-tab:hover,
.panel-tab:focus-visible {
  width: 84px !important;
  background: linear-gradient(180deg, rgba(37, 75, 154, .99), rgba(8, 14, 28, .99)) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.62), 0 0 62px rgba(45,125,255,.5) !important;
}

.panel-tab:focus-visible {
  outline: 2px solid rgba(255,255,255,.9) !important;
  outline-offset: -6px;
}

.panel-tab::before {
  content: none !important;
  display:none !important;
}

@media (max-width: 767px) {
  .portfolio-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
  }

  .panel-inner {
    width: auto !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding-top: 76px !important;
    padding-bottom: 92px !important;
  }

  .site-panel--portfolio .panel-inner {
    padding-left: 28px !important;
    padding-right: 72px !important;
  }

  .site-panel--technical .panel-inner {
    padding-left: 72px !important;
    padding-right: 28px !important;
  }

  .portfolio-shell .panel-inner h1,
  .portfolio-shell .site-panel h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
    font-size: clamp(42px, 12.2vw, 62px) !important;
    line-height: .9 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .panel-inner > p:not(.eyebrow) {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  .eyebrow {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
    font-size: 8px !important;
    letter-spacing: .13em !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .eyebrow::before {
    flex: 0 0 24px;
    width: 24px;
  }

  .panel-tab {
    width: 50px !important;
    height: 64vh !important;
    min-height: 380px !important;
    max-height: 540px !important;
    padding: 20px 0 !important;
    font-size: 17px !important;
    letter-spacing: .13em !important;
  }

  .panel-tab--right {
    right: -12px !important;
    left: auto !important;
    border-radius: 18px 0 0 18px !important;
  }

  .panel-tab--left {
    left: -12px !important;
    right: auto !important;
    border-radius: 0 18px 18px 0 !important;
  }

  .panel-tab:hover,
  .panel-tab:focus-visible {
    width: 50px !important;
  }
}

@media (max-width: 390px) {
  .site-panel--portfolio .panel-inner {
    padding-left: 24px !important;
    padding-right: 68px !important;
  }

  .site-panel--technical .panel-inner {
    padding-left: 68px !important;
    padding-right: 24px !important;
  }

  .portfolio-shell .panel-inner h1,
  .portfolio-shell .site-panel h1 {
    font-size: clamp(38px, 11.4vw, 54px) !important;
  }

  .panel-inner > p:not(.eyebrow) {
    font-size: 13px !important;
  }
}

/* The footer is the end of each panel. Do not leave wrapper space below it. */
.portfolio-shell .panel-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.portfolio-shell .panel-footer {
  margin-bottom: 0 !important;
}

/* Keep Selected Work card titles readable inside Squarespace. */
.portfolio-shell #work .project-card .project-card__body h3 {
  letter-spacing: 0px !important;
}

/* Leave room for the clickable visit-site button. */
.portfolio-shell #work .project-card .project-card__body {
  padding-bottom: 64px !important;
}

/* Selected Work visit-site button. It belongs to the existing heading link, so the whole cue is clickable. */
.portfolio-shell #work .project-card .project-card__body h3 a {
  position: static !important;
}

.portfolio-shell #work .project-card .project-card__body h3 a::after {
  content: "VISIT SITE";
  position: absolute;
  left: 20px;
  bottom: 18px;
  width: 112px;
  height: 34px;
  padding: 0 30px 0 12px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(79,140,255,.72);
  border-radius: 7px;
  color: #fff !important;
  background: rgba(45,125,255,.12);
  box-shadow: 0 0 18px rgba(45,125,255,.08);
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.portfolio-shell #work .project-card .project-card__body h3 a::before {
  content: "";
  position: absolute;
  left: 101px;
  bottom: 31px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  transform: rotate(45deg);
  pointer-events: none;
}

.portfolio-shell #work .project-card .project-card__body h3 a:hover::after,
.portfolio-shell #work .project-card .project-card__body h3 a:focus-visible::after {
  border-color: var(--razu-blue-bright);
  background: var(--razu-blue);
  box-shadow: 0 0 24px rgba(45,125,255,.28);
}

/* Keep Service card titles readable inside Squarespace. */
.portfolio-shell #service .service-card h3 {
  letter-spacing: 0px !important;
}

/* Keep Web Resume card titles readable inside Squarespace. */
.portfolio-shell #web-resume .resume-card h3 {
  letter-spacing: 0px !important;
}

/* Keep Featured Case Study title readable inside Squarespace. */
.portfolio-shell .feature-case .case-copy h3 {
  letter-spacing: 0px !important;
}

/* Keep contact-band headings readable inside Squarespace. */
.portfolio-shell .contact-band h2 {
  letter-spacing: 0px !important;
}

/* Keep Core Capabilities card titles readable inside Squarespace. */
.portfolio-shell .capability-card h3 {
  letter-spacing: 0px !important;
}

@media (prefers-reduced-motion: reduce) {
  .dual-site { transition: none; }
}