/* VarleyLabs — Work page */
.work-page { background: #fff; }
.work-page .nav-wrap { top: 18px; }
.work-page .nav-links a[aria-current="page"] { color: var(--violet); }

.work-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 940px;
  padding: 166px 0 0;
  color: #fff;
  background:
    radial-gradient(circle at 12% 28%, rgba(31,100,249,.23), transparent 31rem),
    radial-gradient(circle at 88% 18%, rgba(235,71,133,.18), transparent 28rem),
    linear-gradient(135deg, #090B18 0%, #11142B 52%, #171126 100%);
}

.work-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 124px;
  background: #fff;
  clip-path: polygon(0 56%,100% 56%,100% 100%,0 100%);
}

.work-hero-grid {
  position: absolute;
  z-index: -5;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(circle at 50% 36%, #000, rgba(0,0,0,.86) 38%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 36%, #000, rgba(0,0,0,.86) 38%, transparent 78%);
}

.work-orb {
  position: absolute;
  z-index: -4;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(94px);
  opacity: .25;
}
.work-orb-one { left: -170px; top: 280px; background: var(--blue); }
.work-orb-two { right: -160px; top: 100px; background: var(--pink); }

.work-hero-layout {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(490px,1.12fr);
  gap: clamp(50px,7vw,96px);
  align-items: center;
}

.work-hero-copy { max-width: 620px; padding-bottom: 150px; }
.work-hero-copy h1 {
  margin-bottom: 27px;
  font-size: clamp(3.3rem,5.8vw,5.8rem);
  line-height: .96;
}
.work-hero-copy > p {
  max-width: 610px;
  margin-bottom: 34px;
  color: rgba(var(--on-dark),.74);
  font-size: clamp(1rem,.94rem + .32vw,1.2rem);
  line-height: 1.72;
}
.work-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

.work-hero-stack { position:relative; min-height:620px; margin-bottom:110px; perspective:1200px; }
.hero-project {
  position:absolute;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.17);
  border-radius:27px;
  background:#12162E;
  box-shadow:0 40px 100px rgba(0,0,0,.38),0 18px 48px rgba(69,64,172,.18);
  transform-style:preserve-3d;
}
.hero-project::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(9,11,24,.88) 100%);
}
.hero-project img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.03) brightness(.82); }
.hero-project span,.hero-project strong { position:absolute; z-index:2; left:28px; right:28px; }
.hero-project span { bottom:64px; color:rgba(255,255,255,.64); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-project strong { bottom:26px; color:#fff; font-size:clamp(1.35rem,2.5vw,2.25rem); line-height:1; letter-spacing:-.055em; }
.hero-project-tastebuds { z-index:2; top:36px; left:0; width:74%; height:390px; transform:rotateY(5deg) rotateZ(-2deg); }
.hero-project-longley { z-index:3; right:0; bottom:38px; width:70%; height:385px; transform:rotateY(-5deg) rotateZ(2deg); }
.hero-project-tastebuds::before,.hero-project-longley::before {
  content:"";
  position:absolute;
  z-index:3;
  width:12px;
  height:12px;
  top:18px;
  left:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:18px 0 0 rgba(255,255,255,.55),36px 0 0 rgba(255,255,255,.28);
  opacity:.72;
}

.work-proof-strip {
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:-14px;
  padding:1px;
  border-radius:24px;
  background:linear-gradient(115deg,rgba(31,100,249,.52),rgba(255,255,255,.14),rgba(235,71,133,.44));
  box-shadow:0 28px 70px rgba(20,22,44,.22);
}
.work-proof-strip > div { min-height:126px; padding:29px 30px; background:#fff; }
.work-proof-strip > div:first-child { border-radius:23px 0 0 23px; }
.work-proof-strip > div:last-child { border-radius:0 23px 23px 0; }
.work-proof-strip strong { display:block; margin-bottom:8px; color:var(--ink); font-size:1rem; letter-spacing:-.035em; }
.work-proof-strip span { color:var(--muted); font-size:var(--text-sm); line-height:1.55; }

.light-eyebrow { color:var(--ink); background:#F0F2F9; border-color:rgba(23,24,39,.07); box-shadow:none; }
.client-work { padding-top:154px; background:radial-gradient(circle at 50% 0,rgba(118,80,232,.07),transparent 34rem),#fff; }
.work-section-head { max-width:850px; }

.featured-project {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:clamp(48px,7vw,90px);
  align-items:center;
  padding:clamp(34px,5vw,64px);
  border:1px solid rgba(23,24,39,.08);
  border-radius:42px;
  background:#F7F8FC;
  box-shadow:0 28px 80px rgba(23,24,39,.09);
}
.featured-project + .featured-project { margin-top:34px; }
.featured-project-longley {
  grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);
  color:#fff;
  border-color:rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 90% 10%,rgba(235,71,133,.18),transparent 24rem),
    radial-gradient(circle at 0 80%,rgba(31,100,249,.16),transparent 27rem),
    linear-gradient(145deg,#171A31,#0D1020);
  box-shadow:0 34px 90px rgba(13,16,32,.24);
}

.featured-visual { position:relative; min-height:560px; }
.featured-visual-dark { min-height:560px; }
.browser-frame {
  position:absolute;
  top:28px;
  left:0;
  right:58px;
  overflow:hidden;
  border-radius:25px;
  box-shadow:0 34px 80px rgba(23,24,39,.22);
}
.browser-frame-light { border:1px solid rgba(23,24,39,.10); background:#fff; }
.browser-frame-dark { border:1px solid rgba(255,255,255,.14); background:#11152A; }
.browser-bar { min-height:50px; display:flex; align-items:center; gap:7px; padding:0 17px; background:rgba(255,255,255,.88); border-bottom:1px solid rgba(23,24,39,.08); }
.browser-frame-dark .browser-bar { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.08); }
.browser-bar i { width:8px; height:8px; border-radius:50%; background:#C4C8D4; }
.browser-frame-dark .browser-bar i { background:rgba(255,255,255,.42); }
.browser-bar span { margin-left:auto; margin-right:auto; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.browser-frame-dark .browser-bar span { color:rgba(255,255,255,.52); }
.browser-image { position:relative; aspect-ratio:1.42/1; overflow:hidden; }
.browser-image img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.02) brightness(.88); }
.browser-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,14,28,.06) 22%,rgba(12,14,28,.78) 100%); }
.visual-overlay { position:absolute; z-index:2; left:32px; right:32px; bottom:30px; display:grid; gap:7px; color:#fff; }
.visual-overlay small { font-size:.66rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; opacity:.72; }
.visual-overlay strong { max-width:520px; font-size:clamp(1.7rem,3vw,3rem); line-height:1; letter-spacing:-.055em; }

.mobile-frame {
  position:absolute;
  z-index:4;
  right:0;
  bottom:20px;
  width:170px;
  height:332px;
  overflow:hidden;
  border:7px solid #171827;
  border-radius:32px;
  background:#111;
  box-shadow:0 28px 60px rgba(23,24,39,.30);
}
.mobile-frame span { position:absolute; z-index:4; top:8px; left:50%; width:54px; height:8px; transform:translateX(-50%); border-radius:99px; background:#171827; }
.mobile-frame img { display:block; width:100%; height:100%; object-fit:cover; filter:brightness(.70) saturate(.92); }
.mobile-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 28%,rgba(13,16,32,.92) 100%); }
.mobile-frame b { position:absolute; z-index:3; left:18px; right:14px; bottom:22px; color:#fff; font-size:1.1rem; line-height:1.35; letter-spacing:-.04em; }
.mobile-frame-longley { border-color:#EEF0F7; }
.mobile-frame-longley span { background:#EEF0F7; }
.temporary-visual { position:absolute; z-index:5; left:20px; bottom:8px; padding:8px 12px; border-radius:999px; color:#fff; background:rgba(13,16,32,.72); backdrop-filter:blur(12px); font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.project-overline { display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--violet); font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.project-overline span { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); }
.featured-project-longley .project-overline { color:#AFC5FF; }
.featured-copy h3 { margin-bottom:20px; font-size:clamp(2rem,3.7vw,3.8rem); line-height:1; }
.featured-copy > p { margin-bottom:28px; color:var(--muted); line-height:1.75; }
.featured-project-longley .featured-copy > p { color:rgba(var(--on-dark),.70); }
.project-focus { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px; }
.project-focus > div { padding:18px; border:1px solid rgba(23,24,39,.08); border-radius:17px; background:#fff; }
.featured-project-longley .project-focus > div { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.055); }
.project-focus small { display:block; margin-bottom:7px; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.featured-project-longley .project-focus small { color:rgba(255,255,255,.42); }
.project-focus strong { display:block; font-size:.83rem; line-height:1.5; }
.project-features { display:grid; gap:11px; margin:0 0 28px; padding:0; list-style:none; }
.project-features li { display:grid; grid-template-columns:20px 1fr; gap:10px; color:#525668; font-size:var(--text-sm); }
.featured-project-longley .project-features li { color:rgba(var(--on-dark),.75); }
.project-features li::before { content:"✓"; display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); font-size:9px; font-weight:900; }
.project-status { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; color:#555A6D; background:#EEF1F8; font-size:.74rem; font-weight:800; }
.featured-project-longley .project-status { color:rgba(255,255,255,.72); background:rgba(255,255,255,.07); }
.project-status span { width:9px; height:9px; border-radius:50%; background:#F1B451; box-shadow:0 0 0 5px rgba(241,180,81,.10); }

.concept-section { color:#fff; background:radial-gradient(circle at 20% 0,rgba(118,80,232,.17),transparent 32rem),linear-gradient(180deg,#0D1020,#15172C); }
.concept-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:48px; align-items:end; margin-bottom:36px; }
.concept-heading h2 { max-width:760px; margin:0; font-size:var(--h2); line-height:1.04; }
.concept-heading > p { margin:0 0 7px; color:rgba(var(--on-dark),.68); line-height:1.72; }
.concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.concept-card { position:relative; min-height:285px; overflow:hidden; border:1px solid rgba(255,255,255,.10); border-radius:24px; background:#171A31; box-shadow:0 22px 54px rgba(0,0,0,.22); }
.concept-card-wide { min-height:285px; }
.concept-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 22%,rgba(9,11,24,.90) 100%); }
.concept-card img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.02) brightness(.78); transition:transform 800ms cubic-bezier(.16,1,.3,1),filter 400ms ease; }
.concept-card:hover img { transform:scale(1.045); filter:saturate(.98) brightness(.86); }
.concept-card span,.concept-card strong,.concept-card em { position:absolute; z-index:2; left:22px; right:22px; }
.concept-card span { bottom:75px; color:rgba(255,255,255,.62); font-size:.64rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.concept-card strong { bottom:39px; color:#fff; font-size:clamp(1.3rem,1.9vw,1.8rem); line-height:1; letter-spacing:-.05em; }
.concept-card em { bottom:16px; color:#AFC5FF; font-size:.68rem; font-style:normal; font-weight:800; opacity:0; transform:translateY(8px); transition:opacity 220ms ease,transform 220ms ease; }
.concept-card:hover em { opacity:1; transform:none; }

.work-cta { color:#fff; background:#0D1020; }
.work-cta-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:50px; align-items:end; padding:clamp(38px,6vw,72px); border:1px solid rgba(255,255,255,.10); border-radius:40px; background:radial-gradient(circle at 86% 0,rgba(235,71,133,.18),transparent 24rem),radial-gradient(circle at 0 100%,rgba(31,100,249,.18),transparent 28rem),linear-gradient(145deg,#191C36,#0D1020); box-shadow:0 34px 90px rgba(0,0,0,.24); }
.work-cta-panel h2 { max-width:800px; margin-bottom:20px; font-size:clamp(2.25rem,4.4vw,4.6rem); line-height:.98; }
.work-cta-panel p { max-width:700px; margin:0; color:rgba(var(--on-dark),.69); line-height:1.72; }
.work-cta-actions { display:grid; gap:18px; justify-items:center; }
.text-link-light { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.76); font-size:var(--text-sm); font-weight:800; }
.text-link-light span { color:#AFC5FF; transition:transform 180ms ease; }
.text-link-light:hover span { transform:translateX(4px); }

@media (max-width: 1040px) {
  .work-hero-layout { grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:42px; }
  .hero-project-tastebuds { width:78%; }
  .hero-project-longley { width:74%; }
  .featured-project,.featured-project-longley { grid-template-columns:1fr; }
  .featured-project-longley .featured-copy { order:2; }
  .featured-project-longley .featured-visual { order:1; }
}

@media (max-width: 920px) {
  .work-hero { min-height:auto; padding-top:138px; }
  .work-hero-layout { grid-template-columns:1fr; gap:10px; }
  .work-hero-copy { max-width:780px; padding-bottom:34px; margin-inline:auto; text-align:center; }
  .work-hero-copy > p { margin-inline:auto; }
  .work-hero-actions { justify-content:center; }
  .work-hero-stack { width:min(690px,100%); min-height:560px; margin:0 auto 106px; }
  .work-proof-strip { grid-template-columns:1fr; width:min(680px,calc(100% - 40px)); }
  .work-proof-strip > div { min-height:auto; }
  .work-proof-strip > div:first-child { border-radius:23px 23px 0 0; }
  .work-proof-strip > div:last-child { border-radius:0 0 23px 23px; }
  .concept-heading,.work-cta-panel { grid-template-columns:1fr; }
  .concept-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-cta-actions { justify-items:start; }
}

@media (max-width: 700px) {
  .work-hero-copy h1 { font-size:clamp(2.7rem,13.3vw,4.25rem); }
  .work-hero-actions .btn { width:100%; }
  .work-hero-stack { min-height:440px; margin-bottom:84px; }
  .hero-project-tastebuds { top:20px; width:82%; height:280px; }
  .hero-project-longley { width:80%; height:275px; bottom:24px; }
  .hero-project span,.hero-project strong { left:20px; right:20px; }
  .hero-project span { bottom:52px; }
  .hero-project strong { bottom:22px; }
  .client-work { padding-top:126px; }
  .featured-project { padding:24px 18px 30px; border-radius:28px; }
  .featured-visual,.featured-visual-dark { min-height:430px; }
  .browser-frame { top:18px; right:28px; border-radius:19px; }
  .browser-bar { min-height:40px; }
  .visual-overlay { left:20px; right:20px; bottom:20px; }
  .visual-overlay strong { font-size:1.65rem; }
  .mobile-frame { width:125px; height:245px; border-width:5px; border-radius:24px; }
  .mobile-frame b { left:13px; bottom:16px; font-size:.85rem; }
  .temporary-visual { left:8px; bottom:0; font-size:.56rem; }
  .project-focus { grid-template-columns:1fr; }
  .concept-heading { gap:20px; }
  .concept-grid { grid-template-columns:1fr; }
  .concept-card-wide { min-height:240px; }
  .concept-card { min-height:240px; }
  .work-cta-panel { padding:34px 24px; border-radius:28px; }
  .work-cta-actions,.work-cta-actions .btn { width:100%; }
}


/* Pass 2 — live client work */
.hero-project iframe { display:block; width:100%; height:100%; border:0; pointer-events:none; background:#2E382E; }
.browser-image-live { background:#2E382E; }
.browser-image-live::after { display:none; }
.browser-image-live iframe { display:block; width:100%; height:100%; border:0; pointer-events:none; }
.mobile-frame iframe { display:block; width:100%; height:100%; border:0; pointer-events:none; }
.project-status.is-live span { background:#55C98A; box-shadow:0 0 0 5px rgba(85,201,138,.11); }
.featured-actions { margin-top:18px; }
.featured-actions .btn { min-height:46px; padding:0 18px; font-size:.78rem; }
.featured-project-tastebuds .browser-image img { object-position:top center; filter:none; }
.mobile-frame-tastebuds img { object-position:top center; filter:none; }
.featured-project-longley .browser-frame,
.featured-project-longley .mobile-frame { isolation:isolate; }
.featured-project-tastebuds .browser-image::after,
.mobile-frame-tastebuds::after,
.mobile-frame-longley::after { display:none; }

/* Pass 2.1 — Longley uses static portfolio captures rather than live iframes */
.featured-project-longley .browser-image img { object-position: top center; filter: none; }
.mobile-frame-longley img { object-position: top center; filter: none; }
.hero-project-longley img { object-position: top center; }

/* Final V2 polish — show the full Tastebuds desktop hero rather than cropping its sides. */
.featured-project-tastebuds .browser-image {
  aspect-ratio: 1906 / 1078;
  background: #fff;
}
.featured-project-tastebuds .browser-image img {
  object-fit: contain;
  object-position: top center;
}