/* ===========================
   DARK BUT WARM DESIGN SYSTEM
   =========================== */

:root {
  --bg: #0f1115;
  --fg: #f3f0e9;
  --muted: rgba(243,240,233,0.72);
  --border: rgba(243,240,233,0.10);
  --card: #141823;
--accent: #8b99a6;
--accent-soft: rgba(139,153,166,0.14);
--accent-strong: rgba(139,153,166,0.22);
  --shadow: 0 20px 70px rgba(0,0,0,0.55);
  --radius: 18px;
  --max: 1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;

  background:
    radial-gradient(circle at 20% 0%, rgba(220, 225, 230, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 75% 10%, rgba(180, 190, 200, 0.08) 0%, transparent 50%),
    #0f1115;

  color: var(--fg);
  line-height: 1.6;
}
/* subtle texture overlay (very light) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(243,240,233,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,240,233,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.20;
  mix-blend-mode: overlay;
}

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 22px 110px;
  position: relative;
}

section {
  margin-top: 96px;
  padding-top: 10px;
  border-top: 1px solid rgba(243,240,233,0.08);
}

section:first-of-type{
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* ===========================
   HEADER
   =========================== */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 46px;
}

/* Brand: on one line, no underline */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}

.brand strong{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;

  /* subtle premium gradient */
  background: linear-gradient(90deg, rgba(243,240,233,0.96), rgba(241,96,68,0.70));
  -webkit-background-clip: text;
  color: transparent;
}

.brand span{
  font-size: 12px;
  color: var(--muted);
}

/* Ensure brand never underlines if wrapped in <a> */
.brand, .brand:hover, .brand:focus {
  text-decoration: none;
}

nav {
  display: flex;
  gap: 18px;
  font-size: 13px; /* slightly smaller for contrast */
}

nav a {
  color: var(--muted);
  text-decoration: none;
  position: relative;
}

nav a:hover { color: var(--fg); }

nav a:hover::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(241,96,68,0.65), transparent);
  opacity: 0.9;
}
/* ===========================
   EXECUTIVE CRED LINE
   =========================== */

.cred-line{
  font-size: 16px;
  line-height: 1.5;
  max-width: 68ch;
  color: rgba(243,240,233,0.85);
  margin: 6px 0 22px;
}
/* ===========================
   EXEC METRICS
   =========================== */

.exec-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 26px;
  margin: 48px 0;
}

.metric{
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(243,240,233,0.10);
  background: rgba(20,24,35,0.55);
}

.metric-number{
  font-size: 22px;
  font-weight: 600;
  color: rgba(243,240,233,0.95);
  margin-bottom: 6px;
}

.metric-label{
  font-size: 13px;
  color: rgba(243,240,233,0.62);
}

@media (max-width: 900px){
  .exec-metrics{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.why-line{
  margin-top: 30px;
  font-size: 17px;
  color: rgba(243,240,233,0.88);
}
/* ===========================
   TYPOGRAPHY
   =========================== */

h1 {
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  max-width: 18ch;
}

h2 {
  font-size: 34px;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

p { font-size: 18px; color: var(--muted); }

.muted { color: var(--muted); }

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
  margin-bottom: 16px;
}

.highlight {
  background: linear-gradient(90deg, var(--fg), var(--accent));
  -webkit-background-clip: text;
  color: transparent;
}

/* ===========================
   BUTTONS
   =========================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(241,96,68,0.35);
  background: var(--accent-soft);
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  margin-top: 22px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  border-color: rgba(241,96,68,0.55);
}

/* ===========================
   GRID
   =========================== */

.grid-2 {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr;
  gap: 44px;
  align-items: start;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 26px; }
  section { margin-top: 72px; }
}

/* ===========================
   CARD
   =========================== */

.card {
  background: rgba(20,24,35,0.72);
  border: 1px solid rgba(243,240,233,0.10);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.card h3 { margin-top: 0; }

.card ul {
  padding-left: 20px;
  margin-top: 14px;
  margin-bottom: 0;
}

.card li {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--muted);
}

/* ===========================
   SIGNAL STRIP (hero chips)
   =========================== */

.signal-strip{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip{
  font-size: 13px;
  color: rgba(243,240,233,0.78);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(243,240,233,0.12);
  background: rgba(20,24,35,0.55);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(241,96,68,0.35);
  background: rgba(20,24,35,0.70);
}

/* ===========================
   SCROLL REVEAL
   =========================== */

.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================
   WORK (BASE LAYOUT + FLAGSHIP)
   =========================== */

.work-grid{
  display: grid;
  grid-template-columns: 1.7fr 0.7fr;
  gap: 26px;
  align-items: center;
}

.work-content{ min-width: 0; }

.work-desc{ margin: 6px 0 14px; }

.work-item{
  margin-top: 22px;
  padding: 26px 26px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(243,240,233,0.10);
  background: rgba(20,24,35,0.72);
  box-shadow: 0 18px 70px rgba(0,0,0,0.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px);
}

.work-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 35px 110px rgba(0,0,0,0.60);
  border-color: rgba(241,96,68,0.35);
}

.work-logo{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.work-logo img{
  max-width: 140px;
  max-height: 64px;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.work-item:hover .work-logo img{
  opacity: 0.90;
  filter: grayscale(0%);
  transform: translateY(-2px);
}

.work-featured{
  padding: 34px 34px 28px;
  border-color: rgba(241,96,68,0.30);
  background:
    radial-gradient(circle at 18% 0%, rgba(241,96,68,0.14) 0, transparent 55%),
    rgba(20,24,35,0.78);
}

.work-featured h3{
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 10px;
}

.work-featured .work-desc{ font-size: 17px; }

.featured-logo{
  background: rgba(20,24,35,0.55);
  border: 1px solid rgba(243,240,233,0.10);
  border-radius: 16px;
  padding: 18px;
  justify-content: center;
}

.work-featured .work-logo img{
  max-width: 170px;
  max-height: 72px;
  opacity: 0.65;
}

.work-supporting{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.work-supporting .work-grid{ align-items: start; }

.work-supporting .work-item{ padding: 26px 26px 24px; }

.work-supporting .work-item h3{
  font-size: 18px;
  line-height: 1.25;
  min-height: 3.2em;
  margin-bottom: 10px;
}

.work-supporting .work-desc{
  font-size: 15px;
  margin: 0 0 12px;
}

.work-supporting .work-logo{
  background: rgba(241,96,68,0.06);
  border: 1px solid rgba(241,96,68,0.20);
  border-radius: 14px;
  padding: 18px 20px;
  justify-self: end;
  align-self: start;
  margin-top: 4px;
  width: fit-content;
}

.work-supporting .work-logo img{
  max-width: 140px;
  max-height: 60px;
  opacity: 0.75;
  filter: grayscale(0%);
}

.work-supporting .work-logo img.rr{ max-width: 150px; }

.work-proof{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(243,240,233,0.10);
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: rgba(243,240,233,0.66);
}

.work-proof span{
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 12px;
  align-items: start;
  line-height: 1.45;
}

.work-proof strong{
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(243,240,233,0.82);
  opacity: 0.95;
}

/* Clickable work cards */
.work-linkcard{
  display: grid;
  color: inherit;
  text-decoration: none;
}

.work-linkcard:hover{ text-decoration: none; }

.work-linkcard:focus-visible{
  outline: 2px solid rgba(241,96,68,0.45);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* Optional CTA inside cards */
.work-cta{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(243,240,233,0.72);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.work-item:hover .work-cta{
  color: rgba(243,240,233,0.92);
}

@media (max-width: 520px){
  .work-proof span{ grid-template-columns: 72px 1fr; }
}

@media (max-width: 900px){
  .work-grid{ grid-template-columns: 1fr; }

  .work-logo{
    justify-content: flex-start;
    margin-top: 10px;
  }

  .work-supporting{ grid-template-columns: 1fr; }
  .work-featured{ padding: 28px; }

  .work-supporting .work-logo{
    justify-self: start;
    margin-top: 10px;
  }
}

/* ===========================
   SIGNATURE SYSTEMS
   =========================== */

.systems-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.sys{
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(243,240,233,0.10);
  background: rgba(20,24,35,0.55);
  color: rgba(243,240,233,0.82);
  backdrop-filter: blur(10px);
  cursor: pointer;

  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.sys::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(circle at 18% 0%, rgba(241,96,68,0.35) 0, transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.sys::after{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(241,96,68,1), rgba(241,96,68,0.35));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.sys:hover{
  transform: translateY(-5px) scale(1.015);
  border-color: rgba(241,96,68,0.55);
  background: rgba(20,24,35,0.88);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.65),
    0 0 0 1px rgba(241,96,68,0.20);
  color: rgba(243,240,233,0.95);
}

.sys:hover::before{ opacity: 1; }
.sys:hover::after{ opacity: 1; }

.sys-sub{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(243,240,233,0.62);
}

.sys:hover .sys-sub{
  color: rgba(243,240,233,0.78);
}

@media (max-width: 900px){
  .systems-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .sys, .sys::before, .sys::after{
    transition: none !important;
  }
  .sys:hover{ transform: none !important; }
}

/* ===========================
   PHILOSOPHY
   =========================== */

.philosophy ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.philosophy li {
  margin-bottom: 14px;
  font-size: 18px;
  color: var(--muted);
}

.signature {
  margin-top: 26px;
  font-size: 15px;
  color: rgba(243,240,233,0.58);
}

/* ===========================
   TESTIMONIALS (designed, less sparse)
   =========================== */

.quote-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.quote-card{
  margin: 0;
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid rgba(243,240,233,0.10);
  background: rgba(20,24,35,0.62);
  box-shadow: 0 18px 70px rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.quote-card::before{
  content:"“";
  position: absolute;
  top: -22px;
  left: 14px;
  font-size: 88px;
  line-height: 1;
  color: rgba(241,96,68,0.18);
  pointer-events: none;
}

.quote-card blockquote{
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(243,240,233,0.92);
}

.quote-card figcaption{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(243,240,233,0.08);
  font-size: 13px;
  color: rgba(243,240,233,0.62);
}

.quote-card:hover{
  transform: translateY(-4px);
  border-color: rgba(241,96,68,0.28);
  box-shadow: 0 28px 90px rgba(0,0,0,0.50);
}

@media (max-width: 900px){
  .quote-grid{ grid-template-columns: 1fr; }
}

/* ===========================
   FOOTER CTA
   =========================== */

.cta-final {
  text-align: center;
  margin-top: 120px;
  border-top: 0;
  padding-top: 0;
}

.cta-final h2 {
  max-width: 28ch;
  margin: 0 auto 18px;
}

.cta-final p{
  margin: 0 auto;
  max-width: 70ch;
}

/* ===========================
   MOBILE NAV — SCROLL HINT (Chevron + Divider + Subtle Fade)
   Requires: <div class="nav-wrap"><nav>...</nav></div>
   Also add JS that toggles .at-end on .nav-wrap based on scroll position
   =========================== */

@media (max-width: 720px){

  header{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .nav-wrap{
    position: relative;
    width: 100%;
  }

  nav{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;

    padding: 4px 18px 8px 6px; /* room for chevron */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar{ display: none; }

  nav a{
    flex: 0 0 auto;
    scroll-snap-align: start;

    padding: 8px 14px;
    border-radius: 999px;

    border: 1px solid rgba(243,240,233,0.12);
    background: rgba(20,24,35,0.55);
    color: rgba(243,240,233,0.78);

    font-size: 13px;
    line-height: 1;
  }

  nav a:hover{
    border-color: rgba(241,96,68,0.35);
    background: rgba(241,96,68,0.10);
    color: rgba(243,240,233,0.92);
  }

  nav a:hover::after{ content: none !important; }

  /* Fade + divider (ultra subtle) */
  .nav-wrap::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:24px;
    height:100%;
    pointer-events:none;

    background: linear-gradient(
      to left,
      rgba(15,17,21,0.40) 0%,
      rgba(15,17,21,0.15) 55%,
      rgba(15,17,21,0) 100%
    );

    border-left: 1px solid rgba(243,240,233,0.14);
    opacity: 0.55;
    transition: opacity .25s ease;
  }

  /* Chevron indicator */
  .nav-wrap::before{
    content:"›";
    position:absolute;
    right:6px;
    top:50%;
    transform: translateY(-50%);
    font-size:18px;
    color: rgba(243,240,233,0.55);
    pointer-events:none;
    animation: navChevronNudge 1.6s ease-in-out infinite;
  }

  /* Hide hint when at end */
  .nav-wrap.at-end::before,
  .nav-wrap.at-end::after{
    opacity: 0;
    animation: none;
  }

  @media (prefers-reduced-motion: reduce){
    .nav-wrap::before{ animation: none; }
  }
}

@keyframes navChevronNudge{
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(3px); }
}
/* ===========================
   BACK LINK (Case Study Pages)
   =========================== */

.backlink{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin: 10px 0 28px;
  padding: 8px 14px;

  border-radius: 999px;
  border: 1px solid rgba(243,240,233,0.14);
  background: rgba(20,24,35,0.55);

  color: rgba(243,240,233,0.78);
  font-size: 13px;
  text-decoration: none;

  transition: background .2s ease,
              border-color .2s ease,
              transform .2s ease;
}

.backlink:hover{
  background: rgba(241,96,68,0.10);
  border-color: rgba(241,96,68,0.35);
  color: rgba(243,240,233,0.92);
  transform: translateX(-2px);
}

.backlink:focus-visible{
  outline: 2px solid rgba(241,96,68,0.45);
  outline-offset: 3px;
}
/* ===========================
   SUB PLATFORM SWITCHER
   =========================== */

.sub-platforms{
  display: flex;
  gap: 10px;
  margin: 18px 0 36px;
  flex-wrap: wrap;
}

.sub-btn{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(243,240,233,0.14);
  background: rgba(20,24,35,0.55);

  font-size: 13px;
  color: rgba(243,240,233,0.78);
  text-decoration: none;

  transition: background .2s ease,
              border-color .2s ease,
              transform .2s ease,
              color .2s ease;
}

.sub-btn:hover{
  background: rgba(241,96,68,0.12);
  border-color: rgba(241,96,68,0.35);
  color: rgba(243,240,233,0.92);
  transform: translateY(-2px);
}

.sub-btn.active{
  background: rgba(241,96,68,0.18);
  border-color: rgba(241,96,68,0.45);
  color: rgba(243,240,233,0.95);
}
/* ===========================
   RESPONSIVE TWEAKS
   =========================== */

@media (max-width: 520px){
  .page{ padding: 26px 18px 90px; }
  h1{ font-size: clamp(40px, 10vw, 54px); }
  p{ font-size: 17px; }
}