@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ==========================================================================
   Sudharsan Baskaran — portfolio
   Black and silver. One typeface family (SF Pro on Apple devices).
   ========================================================================== */

:root {
  color-scheme: dark;

  --black: #000;
  --graphite: #0d0d0f;
  --line: #26272b;
  --ink: #f5f5f7;
  --silver: #c9ccd2;
  --silver-dim: #8b8e96;

  /* Brushed-silver fill used on large type */
  --chrome: linear-gradient(160deg, #fbfbfd 0%, #c4c7cd 40%, #7f838b 75%, #dfe1e5 100%);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --radius: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
p,
dl,
dd,
figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  background: var(--ink);
  color: var(--black);
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 10;
}
.skip:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Silver type ---------- */

.chrome {
  background-image: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The one orchestrated moment: a single highlight sweeps across the name. */
.sheen {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    var(--chrome);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .sheen {
    animation: sheen 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
  }
}
@keyframes sheen {
  from { background-position: 100% 0, 0 0; }
  to   { background-position: 0% 0, 0 0; }
}

/* ---------- Header ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 24px;
}
.mark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.nav nav {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
}
.nav nav a {
  color: var(--silver-dim);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s;
}
.nav nav a:hover {
  color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  min-height: min(78svh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 36px);
  padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px);
}
.display {
  font-size: clamp(3.5rem, 14.5vw, 12.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.05em;
  padding-bottom: 0.06em; /* keeps descenders inside the clipped gradient */
}
.display span {
  display: block;
}
.lede {
  max-width: 30ch;
  color: var(--silver);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---------- Phone screens ---------- */

.phone {
  width: 100%;
  aspect-ratio: 390 / 844;
  border: 1px solid rgba(201, 204, 210, 0.3);
  border-radius: 9.2% / 4.3%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  background: var(--graphite);
}

.panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(110% 80% at 50% 110%, rgba(201, 204, 210, 0.16), transparent 60%),
    var(--graphite);
}

/* Phones that rise from the bottom edge and are cropped by it */
.stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 24px);
  overflow: hidden;
}
.stage .phone {
  flex: 0 1 28%;
  max-width: 220px;
  width: auto;
  min-width: 0;
  transform: translateY(var(--sink, 0%));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stage .phone.main {
  flex-basis: 34%;
  max-width: 260px;
}

/* Phones shown whole, with captions */
.shots {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(24px, 4vw, 56px);
}
.shots figure {
  flex: 1 1 0;
  max-width: 270px;
  min-width: 0;
}
.shots figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--silver-dim);
  font-size: 0.875rem;
}

/* ---------- Featured work card (home) ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 560px;
  text-decoration: none;
  transition: border-color 0.25s;
}
.feature:hover {
  border-color: var(--silver-dim);
}
.feature:hover .stage .phone {
  transform: translateY(calc(var(--sink, 0%) - 4%));
}
.feature-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 56px);
}
.feature-text h2 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  padding-bottom: 0.06em;
}
.feature-text p {
  margin-top: 16px;
  max-width: 32ch;
  color: var(--silver);
}
.text-link {
  align-self: flex-start;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--silver-dim);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s;
}
.feature:hover .text-link,
a.text-link:hover {
  text-decoration-color: var(--ink);
}

/* ---------- Generic sections ---------- */

.section {
  padding-block: clamp(56px, 9vw, 120px);
}
.section h2,
.block h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - var(--pad) * 2) 1px no-repeat;
}
.about {
  align-items: center;
}
.portrait {
  grid-column: 1 / span 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--graphite);
}
.portrait img {
  width: 100%;
  height: auto;
  filter: brightness(0.9) contrast(1.05);
}
.about-text {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-text p {
  max-width: 44ch;
  color: var(--silver);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.5;
}

.contact {
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - var(--pad) * 2) 1px no-repeat;
}
.contact h2 {
  margin-bottom: clamp(20px, 3vw, 32px);
}
.contact-mail {
  display: inline-block;
  font-size: clamp(1.25rem, 3.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--silver-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s;
}
.contact-mail:hover {
  text-decoration-color: var(--ink);
}
.contact-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 28px;
  color: var(--silver);
}
.contact-more a {
  text-decoration-color: var(--silver-dim);
  text-underline-offset: 5px;
}
.contact-more a:hover {
  text-decoration-color: var(--ink);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 32px 48px;
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - var(--pad) * 2) 1px no-repeat;
  color: var(--silver-dim);
  font-size: 0.875rem;
}

/* ---------- Case study ---------- */

.cs-hero {
  padding-block: clamp(32px, 6vw, 72px) clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 24px;
  margin-top: clamp(24px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.meta dt {
  color: var(--silver-dim);
  font-size: 0.875rem;
}
.meta dd {
  margin-top: 2px;
  font-weight: 500;
}

.cs-stage {
  min-height: clamp(360px, 52vw, 640px);
}
.cs-stage .phone {
  flex-basis: 22%;
  max-width: 250px;
}

.block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 32px;
  align-items: start;
  padding-block: clamp(56px, 9vw, 120px);
  border-top: 1px solid var(--line);
}
.block .text {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.block .text p {
  max-width: 46ch;
  color: var(--silver);
}
.block .media {
  grid-column: 6 / span 7;
}
.block.flip .text {
  grid-column: 8 / span 5;
  grid-row: 1;
}
.block.flip .media {
  grid-column: 1 / span 7;
  grid-row: 1;
}
.block .lead {
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.block .prose {
  grid-column: 6 / span 7;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.block .prose p {
  max-width: 54ch;
  color: var(--silver);
}
.block .prose .lead {
  color: var(--ink);
}
.block > h2 {
  grid-column: 1 / span 5;
}

.next {
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - var(--pad) * 2) 1px no-repeat;
  padding-block: clamp(56px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.next h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  padding-bottom: 0.06em;
}
.next .links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  color: var(--silver);
}

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .feature .stage {
    min-height: 380px;
  }
  .feature .stage .phone {
    flex-basis: 30%;
  }

  .portrait,
  .about-text {
    grid-column: 1 / -1;
  }
  .about-text {
    order: -1;
  }
  .portrait {
    max-width: 420px;
  }

  .meta {
    grid-template-columns: repeat(2, 1fr);
  }

  .block .text,
  .block .media,
  .block .prose,
  .block > h2,
  .block.flip .text,
  .block.flip .media {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .block.flip .text {
    order: -1;
  }

  /* Four phones get tight on a phone: crop to the first three */
  .cs-stage .phone:nth-child(4) {
    display: none;
  }
  .cs-stage .phone {
    flex-basis: 30%;
  }
  .cs-stage .phone.main {
    flex-basis: 34%;
  }

  /* Three screens in a row get small: let them scroll sideways instead */
  .shots.scroll {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .shots.scroll figure {
    flex: 0 0 62%;
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .stage .phone {
    transition: none;
  }
}

/* Cover stage: two lead phones, two supporting */
.cs-stage .phone.main {
  flex-basis: 26%;
  max-width: 270px;
}

#work {
  padding-bottom: clamp(56px, 9vw, 120px);
}

/* Home card: let the phones fill their half */
.feature .stage .phone {
  flex-basis: 30%;
  max-width: 250px;
}
.feature .stage .phone.main {
  flex-basis: 37%;
  max-width: 300px;
}
@media (max-width: 820px) {
  .feature .stage .phone { flex-basis: 30%; }
  .feature .stage .phone.main { flex-basis: 36%; }
}

/* Colour swatches */
.swatches {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 20px 16px;
}
.swatches i {
  display: block;
  aspect-ratio: 1.6;
  margin-bottom: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.swatches b {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
}
.swatches span {
  color: var(--silver-dim);
  font-size: 0.8rem;
}

/* ===== Framer-style layout, Inter type ===== */
:root{--font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,Arial,sans-serif;--black:#0a0a0a;--graphite:#141414;--line:#232323}
body{font-feature-settings:"cv11","ss03"}
.chrome,.sheen{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);animation:none}
.mark{font-weight:500;letter-spacing:-.02em}
.nav{background:linear-gradient(var(--line),var(--line)) bottom center/calc(100% - var(--pad)*2) 1px no-repeat;padding-block:28px}
.label{margin:0;font-size:.8125rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-dim)}
.btn{display:inline-block;align-self:flex-start;padding:16px 36px;border:0;background:#fff;color:#0a0a0a;font:500 .9375rem var(--font);text-decoration:none;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--silver)}
.btn.alt{margin-top:28px;padding:14px 22px}
.sec{padding-block:clamp(56px,9vw,112px);background:linear-gradient(var(--line),var(--line)) top center/calc(100% - var(--pad)*2) 1px no-repeat}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(28px,4vw,48px)}
.meta-r{color:var(--silver-dim);font-size:.9375rem}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(40px,7vw,96px)}
.hero-text{display:flex;flex-direction:column;gap:24px}
.name{font-size:clamp(2.5rem,5.6vw,4.5rem);font-weight:400;letter-spacing:-.045em;line-height:1.02}
.tagline{color:var(--silver);font-size:clamp(1.125rem,2vw,1.5rem);font-weight:300;letter-spacing:-.01em}
.hero-photo{position:relative;margin:0;aspect-ratio:900/1023;border:1px solid #2e2e2e;overflow:hidden;background:#111}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.78) contrast(1.08)}
.hero-photo::before,.hero-photo::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.75);inset:3.3% 18% 23% 3.7%}
.hero-photo::after{border-color:rgba(255,255,255,.22);inset:7.5% 13% 18.8% 8.6%}
.shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(10,10,10,.9))}
.cap{position:absolute;left:4%;bottom:4%}
.about-big{margin:20px 0 0 auto;max-width:34ch;width:min(100%,62%);font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;line-height:1.25;letter-spacing:-.03em}
#about .label{position:absolute}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.work-card{position:relative;display:grid;min-height:clamp(380px,44vw,560px);border:1px solid #2a2a2a;text-decoration:none;overflow:hidden}
.work-card h3{font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;margin:0}
.work-card p{margin:0}
.chip{position:absolute;top:16px;left:16px;z-index:2;padding:10px 14px;background:rgba(0,0,0,.45);color:#fff}
.lancefy{grid-template-columns:5fr 6fr;background:linear-gradient(140deg,#050912,#0a1535 65%,#0d2160);transition:border-color .25s}
.lancefy:hover{border-color:var(--silver-dim)}
.lancefy .wc-text{align-self:center;padding:72px 0 32px clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.lancefy .wc-text p:last-child{color:var(--silver-dim);font-size:.875rem;max-width:22ch}
.kicker{color:#3b82f6;font-size:.75rem;font-weight:500}
.lancefy b{color:#3b82f6;font-weight:500}
.lancefy .stage{padding-top:60px}
.lancefy .stage .phone{flex-basis:32%;max-width:150px;border-radius:12% / 5.5%}
.lancefy .stage .phone.main{flex-basis:38%;max-width:180px}
.lancefy:hover .stage .phone{transform:translateY(calc(var(--sink,0%) - 4%))}
.ongoing{background:#efefef;color:#111;align-content:end}
.ongoing .chip{background:none;color:#111;padding:0;top:30px;left:30px}
.ongoing .wc-text{padding:30px;display:flex;flex-direction:column;gap:12px}
.ongoing p{color:#666;max-width:30ch}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.svc{min-height:220px;padding:28px;background:#141414;border:1px solid #232323}
.svc h3{margin:0 0 12px;font-size:1.5rem;font-weight:500;letter-spacing:-.03em}
.svc p{margin:0;color:var(--silver-dim);font-size:.9375rem}
.contact-title{margin:32px 0;font-size:clamp(2rem,5.4vw,4.25rem);font-weight:400;letter-spacing:-.04em;line-height:1.05}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.form label{display:flex;flex-direction:column;gap:10px;min-width:0}
.form .full,.form .btn{grid-column:1/-1}
.form input,.form textarea{width:100%;padding:16px 18px;background:#141414;border:1px solid #2a2a2a;border-radius:0;color:var(--ink);font:inherit;font-size:1rem;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#6b6e75}
.form input:focus,.form textarea:focus{outline:0;border-color:#fff}
.social{display:flex;gap:20px;margin-top:24px}
.social a{color:#fff;opacity:.9}.social a:hover{opacity:1}
.footer{display:flex;justify-content:space-between;align-items:center;padding-block:32px 48px;color:var(--silver-dim);font-size:.875rem;background:linear-gradient(var(--line),var(--line)) top center/calc(100% - var(--pad)*2) 1px no-repeat}
.footer .mark{color:var(--ink);font-size:1.125rem}
@media (max-width:820px){
 .hero{grid-template-columns:1fr}
 .about-big{width:100%;margin-top:16px}#about .label{position:static}
 .work-grid{grid-template-columns:1fr}
 .lancefy{grid-template-columns:1fr}.lancefy .wc-text{padding:72px 20px 8px}
 .lancefy .stage{min-height:300px;padding-top:12px}
 .lancefy .stage .phone{flex-basis:30%}.lancefy .stage .phone.main{flex-basis:36%}
 .ongoing{min-height:300px}.form{grid-template-columns:1fr}
}

/* refinements */
.lancefy{grid-template-columns:4fr 7fr}
.lancefy h3{font-size:clamp(1.25rem,2.2vw,1.875rem)}
.lancefy .stage .phone{flex-basis:34%;max-width:200px}
.lancefy .stage .phone.main{flex-basis:40%;max-width:240px}
.form .btn{justify-self:start;min-width:220px}
@media (max-width:820px){.lancefy{grid-template-columns:1fr}.lancefy .stage .phone{flex-basis:30%}.lancefy .stage .phone.main{flex-basis:36%}}

/* ===== v3: big-name hero, small About photo, screenshot-sized cards ===== */
.hero{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;grid-template-columns:none;min-height:min(72svh,720px);gap:24px}
.name{font-size:clamp(3.25rem,12.5vw,10.5rem);font-weight:500;letter-spacing:-.055em;line-height:.95}
.about2{display:grid;grid-template-columns:2fr 7fr 3fr;gap:24px 40px;align-items:start}
.about2 .about-big{margin:0;width:auto;max-width:none;font-size:clamp(1.375rem,2.4vw,2rem)}
#about .label{position:static}
.about-photo{margin:0}
.about-photo img{width:100%;height:auto}
.work-card{min-height:0;aspect-ratio:1075/716}
.cover{display:block;transition:border-color .25s}
.cover:hover{border-color:var(--silver-dim)}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.svc-grid{grid-template-columns:repeat(3,1fr)}
.svc{min-height:0;aspect-ratio:3/2}
@media (max-width:820px){
 .about2{grid-template-columns:1fr}.about-photo{max-width:200px}
 .svc-grid{grid-template-columns:1fr}.svc{aspect-ratio:auto;min-height:180px}
}

/* ===== Lancefy page wears the product's own theme ===== */
.lancefy-theme{--black:#111318;--graphite:#1a1f29;--line:#2a3140;--silver:#c5cbd8;--silver-dim:#8791a5;--accent:#296ff2}
.lancefy-theme .panel{border-color:var(--line);background:radial-gradient(110% 80% at 50% 115%,rgba(41,111,242,.32),transparent 62%),var(--graphite)}
.lancefy-theme .display.chrome{background:linear-gradient(135deg,#fff 25%,#8db8ff 65%,#296ff2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lancefy-theme .lede{color:var(--silver)}
.lancefy-theme .meta dt{color:#6ea0ff}
.lancefy-theme .text-link,.lancefy-theme .nav nav a:hover{text-decoration-color:var(--accent)}
.lancefy-theme .nav{background-image:linear-gradient(var(--line),var(--line))}
.lancefy-theme .contact-mail{padding:16px 28px;border-radius:14px;text-decoration:none;background:linear-gradient(135deg,#2e7bff,#1c4ca5);font-size:clamp(1.125rem,2.4vw,1.5rem)}
.lancefy-theme .next h2.chrome{-webkit-text-fill-color:#fff}
.lancefy-theme .social a{color:#fff}
.lancefy-theme .block .lead{color:#fff}

/* ===== v4: centred gradient name, scalable Lancefy thumbnail ===== */
.hero{align-items:center;text-align:center}
.name{background:linear-gradient(180deg,#fff 5%,#d0d3d9 50%,#7d8189 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:.1em}
.hero .btn{align-self:center}
.thumb{container-type:inline-size;display:block;background:radial-gradient(60cqw 38cqw at 72% 108%,rgba(41,111,242,.38),transparent 70%),linear-gradient(140deg,#04070f,#08112a 60%,#0a1a45);transition:border-color .25s}
.thumb:hover{border-color:var(--silver-dim)}
.t-text{position:absolute;left:4cqw;top:13cqw;width:30cqw}
.thumb h3{font-size:3.3cqw;font-weight:600;letter-spacing:-.03em;line-height:1.12;color:#fff}
.thumb h3 b{color:#3b82f6;font-weight:600}
.t-kick{margin:0 0 1.6cqw!important;color:#3b82f6;font-size:1.05cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.t-rule{display:block;width:3cqw;height:2px;background:#3b82f6;margin:2cqw 0 1.6cqw}
.t-sub{color:#8f9bb5;font-size:1.45cqw;line-height:1.4;max-width:24cqw}
.t-feat{position:absolute;left:4cqw;top:52cqw;display:flex;margin:0;padding:0;list-style:none}
.t-feat li{display:flex;flex-direction:column;align-items:center;gap:.7cqw;width:7.4cqw;padding:0 .4cqw;text-align:center;color:#cfd6e6;font-size:.95cqw;line-height:1.25}
.t-feat li+li{border-left:1px solid rgba(255,255,255,.12)}
.t-feat svg{width:2.8cqw;height:2.8cqw}
.dev{position:absolute;width:var(--w);padding:calc(var(--w)*.03);background:#0a0a0c;border:1px solid #4a505c;border-radius:calc(var(--w)*.17);box-shadow:0 2cqw 5cqw rgba(0,0,0,.7),inset 0 0 0 1px #1c1f26;transform:perspective(70cqw) rotateY(var(--ry))}
.dev img{display:block;width:100%;height:auto;border-radius:calc(var(--w)*.135)}
.dev::after{content:"";position:absolute;top:calc(var(--w)*.06);left:50%;width:28%;height:calc(var(--w)*.055);background:#000;border-radius:99px;transform:translateX(-50%)}
.thumb .chip{font-size:.8125rem}
.ongoing .chip{top:30px}

/* ===== v5 ===== */
.name{font-size:clamp(1.75rem,8.6vw,7.5rem);white-space:nowrap;letter-spacing:-.05em}
.about2{grid-template-columns:2fr 6fr 4fr}
.about-photo{margin:0}
.about-photo img{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 42%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 42%,#000 58%,transparent 100%)}
.ongoing{background:#ccff00;color:#0a0a0a}
.ongoing .chip{background:#0a0a0a;color:#ccff00;padding:10px 14px;top:16px;left:16px}
.ongoing p{color:rgba(10,10,10,.65)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.steps li{padding-top:24px;border-top:1px solid #333}
.steps .num{display:block;margin-bottom:28px;color:#ccff00;font-size:.875rem;font-weight:500;letter-spacing:.08em}
.steps h3{margin:0 0 10px;font-size:1.5rem;font-weight:500;letter-spacing:-.03em}
.steps p{margin:0;color:var(--silver-dim);font-size:.9375rem;max-width:30ch}
@media (max-width:820px){.about2{grid-template-columns:1fr}.about-photo{max-width:260px}.steps{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ===== v6 ===== */
html,body{overflow-x:clip}
.hero{max-width:none}
.name{font-size:clamp(1.9rem,9.2vw,9rem)}
.hero .label{font-size:clamp(.9375rem,1.5vw,1.25rem);letter-spacing:.16em;color:var(--silver)}
.tagline{font-size:clamp(1.25rem,2.2vw,1.75rem)}
/* cutout portrait with frame lines */
.about2{align-items:start}
.about-photo{position:relative;align-self:end;justify-self:end;width:100%;max-width:320px;margin:0}
.about-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;-webkit-mask-image:none;mask-image:none}
.about-photo::before{content:"";position:absolute;left:-8%;right:8%;top:30%;bottom:0;border:8px solid #2b2e34;border-bottom:0}
.about-photo::after{content:"";position:absolute;z-index:2;left:36%;right:-9%;top:2%;bottom:0;border:3px solid rgba(201,204,210,.8);border-bottom:0;pointer-events:none}
/* dimmer green on Calistudio */
.ongoing{background:#a8cf3a}
.ongoing .chip{color:#a8cf3a}
/* work process */
.steps{gap:0 32px}
.steps>li{position:relative;padding-top:36px;border-top:1px solid #3a3d44}
.steps>li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--silver)}
.steps .num{margin-bottom:28px;font-size:clamp(2.5rem,4.4vw,3.75rem);font-weight:300;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#fff,#6f737b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.steps p{margin-bottom:0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.tags li{padding:6px 12px;border:1px solid #33363c;border-radius:99px;color:var(--silver);font-size:.8125rem}
/* stroke email button */
.btn.alt{background:transparent;color:#fff;border:1px solid #fff;transition:background .2s,color .2s}
.btn.alt:hover{background:#fff;color:#0a0a0a}
@media (max-width:820px){.about-photo{justify-self:start;max-width:260px;margin-left:8%}}
.about-photo::before{left:-8%;right:6%;top:24%;border:0;background:linear-gradient(160deg,#c9ccd2 0%,#7c8088 100%)}
.about-photo::after{border-color:rgba(255,255,255,.9)}
/* ===== v7: full-height hero, faint outline frames ===== */
.hero{min-height:calc(100vh - 95px);min-height:calc(100svh - 95px)}
.about-photo{max-width:360px}
.about-photo::before{left:-10%;right:12%;top:26%;border:1px solid rgba(201,204,210,.2);border-bottom:0;background:none}
.about-photo::after{left:34%;right:-8%;top:4%;border:1px solid rgba(201,204,210,.2);border-bottom:0}
.about-photo::before{left:-5%;right:14%}


/* ===== 2026 refinement: hero fit, portrait framing, process alignment ===== */
.hero{
  width:min(100% - 2*clamp(20px,5vw,80px), 1440px);
  margin-inline:auto;
  min-height:calc(100svh - 88px);
  padding-block:clamp(64px,10vh,120px);
  gap:clamp(18px,2.4vw,32px);
  overflow:visible;
}
.hero .name{
  width:100%;
  max-width:100%;
  white-space:normal;
  overflow-wrap:normal;
  text-wrap:balance;
  font-size:clamp(2.6rem,8.2vw,8.25rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.hero .tagline{max-width:34ch;text-wrap:balance;line-height:1.35}
.hero .btn{margin-top:clamp(4px,1vw,12px)}
.about2{grid-template-columns:minmax(100px,2fr) minmax(0,6fr) minmax(220px,4fr);gap:clamp(20px,3vw,44px);align-items:center}
.about-photo{width:100%;max-width:360px;justify-self:end;align-self:center;overflow:hidden;background:#6c6c6c}
.about-photo img{display:block;width:100%;height:auto;aspect-ratio:1065/1211;object-fit:contain;object-position:center;mask-image:none!important;-webkit-mask-image:none!important}
.about-photo::before,.about-photo::after{pointer-events:none}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0 clamp(18px,2.5vw,36px)}
.steps>li{min-width:0;display:flex;flex-direction:column;align-items:flex-start;height:100%}
.steps>li h3{min-height:1.3em}
.steps>li p{max-width:32ch;line-height:1.6}
.steps .tags{margin-top:20px;align-content:flex-start}
@media(max-width:1000px){
 .about2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
 .about2 .about-big{grid-column:1 / -1;grid-row:2}
 .about-photo{grid-column:2;grid-row:1;max-width:300px}
 .about2>.label{grid-column:1;grid-row:1}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media(max-width:600px){
 .hero{width:calc(100% - 40px);min-height:calc(82svh - 64px);padding-block:64px;gap:20px}
 .hero .name{font-size:clamp(2.5rem,12vw,4.5rem);letter-spacing:-.06em}
 .hero .tagline{font-size:1.2rem}
 .about2{grid-template-columns:1fr;gap:18px}
 .about2>.label,.about2 .about-big,.about-photo{grid-column:1;grid-row:auto}
 .about-photo{justify-self:start;max-width:min(100%,360px);margin:8px 0 0}
 .steps{grid-template-columns:1fr;row-gap:30px}
 .steps>li h3{min-height:0}
}

/* ===== Lancefy portfolio refinement ===== */
@media (min-width: 601px){
  .hero .name{font-size:clamp(3.2rem,8.8vw,9rem)}
  .about-photo{max-width:280px}
}
@media (min-width: 1001px){
  .about-photo{max-width:290px}
}
/* Minimal case-study thumbnail: clearer title, fewer competing details. */
.thumb{
  background:linear-gradient(135deg,#090d16 0%,#101b32 58%,#173d83 100%);
  border-color:#242c3b;
}
.thumb .chip{background:rgba(10,14,23,.72);border:1px solid rgba(255,255,255,.12)}
.t-text{top:15cqw;width:31cqw}
.t-kick{font-size:1.15cqw;letter-spacing:.1em}
.thumb h3{font-size:3.5cqw;line-height:1.08}
.t-sub{font-size:1.35cqw;max-width:23cqw}
.t-feat{display:none}
.t-phones .dev:nth-child(1){left:43cqw!important;top:23cqw!important;--w:17cqw!important;--ry:18deg!important;opacity:.86}
.t-phones .dev:nth-child(2){left:57cqw!important;top:10cqw!important;--w:21cqw!important;--ry:0deg!important;z-index:4}
.t-phones .dev:nth-child(3){left:74cqw!important;top:20cqw!important;--w:17cqw!important;--ry:-16deg!important;opacity:.9}
.t-phones .dev:nth-child(4){display:none}
@media(max-width:600px){
  .about-photo{max-width:min(100%,240px)}
  .thumb h3{font-size:4cqw}
  .t-text{top:17cqw;width:34cqw}
  .t-phones .dev:nth-child(1){left:44cqw!important;top:28cqw!important;--w:17cqw!important}
  .t-phones .dev:nth-child(2){left:58cqw!important;top:15cqw!important;--w:21cqw!important}
  .t-phones .dev:nth-child(3){left:76cqw!important;top:26cqw!important;--w:16cqw!important}
}


/* ===== Lancefy product-design portfolio polish ===== */
.hero .name{font-size:clamp(3.1rem,9.2vw,9.4rem);letter-spacing:-.055em}
.about2{grid-template-columns:minmax(100px,1.2fr) minmax(0,6fr) minmax(150px,2fr);column-gap:clamp(22px,3.2vw,48px)}
.about2 .about-big{max-width:unset;line-height:1.32}
.about-photo{width:100%;max-width:240px;justify-self:end}
.about-photo img{display:block;width:100%;height:auto;object-fit:contain}
.thumb{background:#11151d url('images/lancefy-hand-phone.webp') center/cover no-repeat;border-color:#252a34}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,11,17,0) 25%,rgba(8,11,17,.08) 43%,rgba(8,11,17,.62) 67%,rgba(8,11,17,.82) 100%)}
.thumb .chip{z-index:3;background:rgba(10,14,23,.7);backdrop-filter:blur(8px)}
.thumb .t-text{z-index:2;left:auto;right:5cqw;top:50%;transform:translateY(-45%);width:29cqw}
.thumb .t-kick{font-size:1.15cqw;color:#8bb5ff}
.thumb h3{font-size:3.7cqw;line-height:1.04;text-wrap:balance}
.thumb h3 b{color:#8bb5ff}
.thumb .t-rule{background:#8bb5ff}
.thumb .t-sub{font-size:1.25cqw;max-width:25cqw;color:#d0d5df}
.thumb .t-phones{display:none}
.steps{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:0 clamp(20px,3vw,40px)}
.steps>li{min-width:0;align-self:stretch}
.steps>li h3{min-height:2.6em}
@media(max-width:820px){
 .about2{grid-template-columns:1fr;gap:18px}
 .about-photo{justify-self:start;max-width:190px}
 .steps{grid-template-columns:1fr;row-gap:28px}
 .steps>li h3{min-height:0}
}
@media(max-width:600px){
 .hero .name{font-size:clamp(3rem,13vw,5rem)}
 .thumb .t-text{right:4cqw;top:auto;bottom:8cqw;transform:none;width:45cqw}
 .thumb h3{font-size:5cqw}
 .thumb .t-kick{font-size:1.8cqw}
 .thumb .t-sub{font-size:2cqw;max-width:40cqw}
 .thumb::after{background:linear-gradient(0deg,rgba(8,11,17,.88) 0%,rgba(8,11,17,.5) 38%,rgba(8,11,17,0) 75%)}
}




/* ===== Final thumbnail composition ===== */
.thumb {
  position: relative;
  isolation: isolate;
  background-color: #11151d !important;
  background-image: url("images/lancefy-hand-phone.webp"), linear-gradient(110deg, #151b25, #10141b 72%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, center !important;
  background-size: 69% 100%, 100% 100% !important;
  border-color: #252a34;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17,21,29,0) 0%, rgba(17,21,29,0) 35%, rgba(17,21,29,.72) 55%, #11151d 70%, #11151d 100%) !important;
}
.thumb .chip { z-index: 4; }
.thumb .t-text {
  z-index: 3;
  left: auto !important;
  right: 4.5cqw !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 34cqw !important;
}
.thumb .t-kick { font-size: 1.05cqw; color: #8bb5ff; }
.thumb h3 { font-size: 3.15cqw; line-height: 1.08; text-wrap: balance; }
.thumb h3 b { color: #8bb5ff; }
.thumb .t-rule { background: #8bb5ff; }
.thumb .t-sub { font-size: 1.2cqw; max-width: 27cqw; color: #d0d5df; }
.thumb .t-phones { display: none; }

/* Upcoming-project card: a restrained phone mockup with the status on its screen. */
.ongoing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #b4d833 !important;
  color: #10120a;
}
.ongoing::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(126px, 17cqw, 220px);
  aspect-ratio: 0.49;
  right: 12%;
  top: 50%;
  transform: translateY(-50%) rotate(7deg);
  border: 5px solid #17191c;
  border-radius: 28px;
  background: #11151d;
  box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 0 0 1px #51545b;
}
.ongoing::after {
  content: "UPCOMING\\A PROJECT";
  white-space: pre;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  right: calc(12% + 8px);
  top: 50%;
  transform: translateY(-50%) rotate(7deg);
  width: clamp(110px, 15.4cqw, 200px);
  aspect-ratio: .49;
  box-sizing: border-box;
  padding: 20px 12px;
  border-radius: 22px;
  background: radial-gradient(circle at 80% 10%, #24477c, transparent 35%), linear-gradient(160deg, #202733, #080b11 75%);
  color: #f3f5f8;
  font-size: clamp(13px, 1.2cqw, 17px);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.ongoing .chip, .ongoing .wc-text { position: relative; z-index: 2; }
.ongoing .wc-text { max-width: 53%; }
.ongoing .wc-text h3 { max-width: 12ch; }
.ongoing .wc-text p { max-width: 30ch; }

@media (max-width: 820px) {
  .thumb { background-size: 72% 100%, 100% 100% !important; }
  .thumb .t-text { width: 37cqw !important; right: 3.5cqw !important; }
  .thumb h3 { font-size: 3.5cqw; }
  .ongoing::before { right: 8%; width: clamp(115px, 22cqw, 180px); }
  .ongoing::after { right: calc(8% + 8px); width: clamp(99px, 19.4cqw, 164px); }
}
@media (max-width: 600px) {
  .thumb { min-height: 430px; background-size: 100% 64%, 100% 100% !important; background-position: center top, center !important; }
  .thumb::after { background: linear-gradient(180deg, rgba(17,21,29,0) 0%, rgba(17,21,29,.04) 30%, #11151d 64%, #11151d 100%) !important; }
  .thumb .t-text { left: 7cqw !important; right: 7cqw !important; bottom: 7cqw !important; top: auto !important; transform: none !important; width: 86cqw !important; }
  .thumb h3 { font-size: 6cqw; }
  .thumb .t-kick { font-size: 2.2cqw; }
  .thumb .t-sub { font-size: 2.8cqw; max-width: 70cqw; }
  .ongoing { min-height: 430px; }
  .ongoing::before { right: 9%; top: 49%; width: 42%; }
  .ongoing::after { right: calc(9% + 8px); top: 49%; width: calc(42% - 16px); font-size: 13px; }
  .ongoing .wc-text { max-width: 58%; }
}

/* Final requested refinements: preserve Lancefy's approved thumbnail. */
.thumb {
  background: #11151d url('images/lancefy-hand-phone.webp') center/cover no-repeat !important;
  border-color: #252a34;
}
.thumb::after {
  background: linear-gradient(90deg, rgba(8,11,17,0) 25%, rgba(8,11,17,.08) 43%, rgba(8,11,17,.62) 67%, rgba(8,11,17,.82) 100%) !important;
}
.thumb .t-text {
  right: 5cqw !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-45%) !important;
  width: 29cqw !important;
}
.thumb h3 { font-size: 3.7cqw; line-height: 1.04; }

/* A restrained upcoming-project card with the status contained inside the phone. */
.ongoing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #b4d833 !important;
  color: #10120a;
}
.ongoing .wc-text { display: none !important; }
.ongoing::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 23%;
  transform: translateY(-50%) rotate(5deg);
  width: clamp(118px, 13cqw, 176px);
  aspect-ratio: 0.49;
  border: 5px solid #191b20;
  border-radius: 27px;
  background: #11151d;
  box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.ongoing::after {
  content: "UPCOMING\\A PROJECT";
  white-space: pre;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: calc(23% + 8px);
  transform: translateY(-50%) rotate(5deg);
  width: clamp(102px, calc(13cqw - 16px), 160px);
  aspect-ratio: .49;
  padding: 14px 8px;
  border-radius: 20px;
  background: linear-gradient(155deg, #263247, #0b0e14 76%);
  color: #f4f6fa;
  font-size: clamp(11px, .95cqw, 14px);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.65;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.ongoing .chip { position: relative; z-index: 3; }

/* Four aligned process columns on desktop; responsive stacking below tablet size. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 0 clamp(18px, 2.2vw, 34px) !important;
}
.steps > li { min-width: 0; align-self: stretch; }
.steps > li h3 { min-height: 0 !important; }
.steps > li p { max-width: 31ch; }
@media (max-width: 820px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 30px !important; }
  .ongoing::before { right: 12%; width: clamp(116px, 19cqw, 165px); }
  .ongoing::after { right: calc(12% + 8px); width: clamp(100px, calc(19cqw - 16px), 149px); }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr !important; row-gap: 26px !important; }
  .thumb { min-height: 430px; }
  .thumb .t-text { left: 7cqw !important; right: 7cqw !important; bottom: 7cqw !important; top: auto !important; transform: none !important; width: 86cqw !important; }
  .thumb h3 { font-size: 6cqw; }
  .ongoing { min-height: 360px; }
  .ongoing::before { right: 14%; width: 34%; }
  .ongoing::after { right: calc(14% + 8px); width: calc(34% - 16px); font-size: 12px; }
}

/* Final user request: restore the original minimal upcoming-project card. */
.ongoing {
  background: #b4d833 !important;
  color: #10120a !important;
}
.ongoing .wc-text {
  display: block !important;
  position: absolute;
  z-index: 3;
  left: 5.5%;
  right: 5.5%;
  top: auto;
  bottom: 9%;
  max-width: 78% !important;
}
.ongoing .wc-text h3 {
  color: #10120a;
  font-size: clamp(24px, 2.4cqw, 38px);
  line-height: 1.08;
  margin: 0 0 12px;
}
.ongoing .wc-text p {
  color: rgba(16,18,10,.72);
  font-size: clamp(13px, 1.15cqw, 17px);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0;
}
.ongoing::before,
.ongoing::after { content: none !important; display: none !important; }
.ongoing .chip { position: absolute; z-index: 3; }

/* Remove the decorative frame/line overlays around the About portrait. */
.about-photo::before,
.about-photo::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}


/* ===== Mobile work-thumbnail alignment + contact updates ===== */
/* Restore the Lancefy work item as a full-width landscape card; earlier rules
   accidentally applied phone-mockup dimensions to the whole card. */
.work-grid > .thumb {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1075 / 716;
  height: auto;
  padding: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  overflow: hidden;
  font-size: inherit;
  letter-spacing: normal;
  line-height: normal;
  background-color: #11151d !important;
  background-image: url("images/lancefy-hand-phone.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}
.work-grid > .thumb .chip {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 3;
  max-width: 90%;
}
.work-grid > .thumb .t-text {
  position: absolute;
  left: auto;
  right: 5%;
  top: 50%;
  bottom: auto;
  transform: translateY(-45%);
  width: 42%;
  max-width: 42%;
  min-width: 0;
  z-index: 2;
}
.work-grid > .thumb .t-kick {
  font-size: clamp(10px, 1.15cqw, 16px);
  line-height: 1.3;
}
.work-grid > .thumb h3 {
  font-size: clamp(20px, 3.2cqw, 42px);
  line-height: 1.04;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
.work-grid > .thumb .t-sub {
  max-width: 100%;
  font-size: clamp(11px, 1.2cqw, 16px);
  line-height: 1.4;
}
.work-grid > .thumb .t-phones { display: none !important; }

@media (max-width: 600px) {
  .work-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .work-grid > .thumb {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 0.88;
    min-height: 0;
    transform: none;
    background-position: 43% center !important;
    background-size: cover !important;
  }
  .work-grid > .thumb::after {
    background: linear-gradient(0deg, rgba(8,11,17,.96) 0%, rgba(8,11,17,.76) 42%, rgba(8,11,17,.06) 100%) !important;
  }
  .work-grid > .thumb .chip {
    top: 16px;
    left: 16px;
    font-size: 11px;
    letter-spacing: .1em;
  }
  .work-grid > .thumb .t-text {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 20px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
  .work-grid > .thumb .t-kick {
    font-size: 11px;
    letter-spacing: .1em;
    margin-bottom: 10px;
  }
  .work-grid > .thumb h3 {
    max-width: 100%;
    font-size: clamp(26px, 7.4vw, 36px);
    line-height: 1.03;
    letter-spacing: -.045em;
    overflow-wrap: normal;
    word-break: normal;
  }
  .work-grid > .thumb .t-sub {
    max-width: 32ch;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 12px;
  }
  .ongoing .wc-text { max-width: 88% !important; }
}

/* Upcoming Project card: keep the approved lime design and prevent mobile text clipping. */
@media (max-width: 600px) {
  .work-grid > .ongoing {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    box-sizing: border-box;
    padding: 68px 20px 24px;
    overflow: hidden;
    border-radius: 0;
    background: #b4d833 !important;
  }
  .work-grid > .ongoing .chip {
    position: absolute;
    top: 16px;
    left: 16px;
    max-width: calc(100% - 32px);
    font-size: 11px;
    line-height: 1.3;
  }
  .work-grid > .ongoing .wc-text {
    position: relative;
    inset: auto;
    display: block !important;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
  }
  .work-grid > .ongoing .wc-text h3 {
    max-width: 100%;
    margin: 0 0 10px;
    font-size: clamp(27px, 7.4vw, 36px);
    line-height: 1.04;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
  }
  .work-grid > .ongoing .wc-text p {
    max-width: 34ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}