.project-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 74% 12%, rgba(114,255,57,.10), transparent 25%),
    radial-gradient(circle at 12% 48%, rgba(51,255,130,.06), transparent 25%),
    #020302;
}

.project-page .site-header,
.project-main,
.project-page .site-footer {
  width: min(var(--content-width), 100%);
  margin-inline: auto;
}

.project-hero {
  min-height: 570px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 55px 36px 30px;
}

.project-kicker {
  margin: 0 0 13px;
}
.brand-lockup-project .brand-lockup-logo { width:166px; height:35px; }
.brand-lockup-project .brand-lockup-logo img { width:228px; left:-31px; top:-19px; }
.brand-lockup-project .brand-division { margin-left:11px; font-size:29px; }

.project-title span,
.accent,
.projects-heading span,
.category-heading span,
.project-cta h2 span,
.modal-title span {
  color: var(--green);
}

.theme-creative .project-title span,
.theme-creative .accent,
.theme-creative .projects-heading span,
.theme-creative .category-heading span,
.theme-creative .project-cta h2 span,
.theme-creative .modal-title span {
  color: var(--green);
}

.project-title {
  max-width: 570px;
  margin: 0;
  font: 600 clamp(42px, 3.6vw, 52px)/1.02 var(--font-display);
  letter-spacing: -.045em;
}

.project-intro {
  max-width: 545px;
  margin: 18px 0 0;
  color: #f1f1f1;
  font-size: 16px;
  line-height: 1.44;
}

.project-hero-actions { display: flex; gap: 18px; margin-top: 25px; }
.project-hero-actions .button { min-width: 205px; }

.project-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 31px;
}

.mini-benefit { display: flex; align-items: center; gap: 11px; }
.mini-benefit svg { width: 36px; height: 36px; flex: 0 0 auto; fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-benefit strong { font-size: 12px; line-height: 1.25; }

.project-hero-visual { position: relative; min-height: 500px; }
.project-portal {
  position: absolute;
  width: 410px;
  height: 390px;
  left: 52%;
  top: 49%;
  transform: translate(-50%,-50%) rotate(-10deg);
  border: 54px solid var(--green);
  border-radius: 80px;
  clip-path: polygon(7% 0, 100% 8%, 92% 44%, 76% 53%, 94% 100%, 34% 88%, 0 58%);
  background: transparent;
  box-shadow: 0 0 42px rgba(121,255,53,.24);
}

.project-dog {
  position: absolute;
  z-index: 3;
  width: 520px;
  max-height: 495px;
  object-fit: contain;
  left: 51%;
  bottom: 0;
  transform: translateX(-50%);
  transform-origin: center 75%;
  filter: drop-shadow(0 26px 25px rgba(0,0,0,.68));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.theme-creative .project-dog { width: 485px; left: 50%; }
.project-dog:hover { transform: translateX(-50%) scale(1.035) translateY(-4px); filter: drop-shadow(0 31px 28px rgba(0,0,0,.76)) drop-shadow(0 0 12px rgba(130,255,62,.22)); }

.hero-tag {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 5px;
  width: 177px;
  padding: 16px;
  border: 2px solid var(--green);
  border-radius: 18px;
  background: rgba(1,4,2,.88);
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
}
.hero-tag .brand-lockup-logo { width:136px; }
.hero-tag .brand-division { font-size:19px; }
.hero-tag p { margin: 9px 0 0; font-size: 11px; line-height: 1.3; }
.hero-scribble { position: absolute; z-index: 5; right: 0; bottom: 64px; width: 150px; margin: 0; font: italic 18px/1.15 "Segoe Print", cursive; text-align: center; transform: rotate(-7deg); }
.hero-scribble::after { content:""; display:block; width:70px; height:10px; margin:4px auto 0; border-top:3px solid var(--green); border-radius:50%; }

.featured-section { padding: 15px 36px 25px; }
.projects-heading,.category-heading { margin: 0; text-align:center; font:600 39px/1.08 var(--font-display); letter-spacing:-.035em; }
.section-subtitle { margin:8px 0 25px; color:#e4e6e3; text-align:center; font-size:14px; }
.showcase-grid { display:grid; grid-template-columns:.85fr 1.7fr .85fr; gap:18px; align-items:center; }
.tech-showcase { grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); max-width:1000px; gap:18px; margin-inline:auto; }
.creative-showcase { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1050px; gap:18px; margin-inline:auto; align-items:stretch; }
.tech-showcase .project-card--real:only-child { grid-column:1/-1; width:100%; max-width:980px; margin-inline:auto; }
.project-card--real { display:flex; flex-direction:column; }
.tech-showcase .project-card.featured .project-media { height:220px; min-height:220px; }
.creative-showcase .project-card.featured .project-media { height:220px; min-height:220px; }
.project-card--real .project-card-body { display:flex; flex:1; flex-direction:column; justify-content:center; min-height:220px; padding:22px; }
.project-card--real .project-card-body h3 { font-size:clamp(18px,1.45vw,21px); line-height:1.16; }
.project-card--real .project-card-body p { font-size:12.5px; line-height:1.45; }
.project-card--real .project-badge { align-self:flex-start; }
.project-card--real .case-link { align-self:flex-start; min-height:36px; margin-top:auto; }
.project-media--image img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }
.frogmc-visual { background:#020817; }
.frogmc-visual::after { height:32%; background:linear-gradient(transparent,rgba(0,7,18,.5)); }
.pdf-desktop-visual { background:#181818; }
.pdf-desktop-visual::after { height:28%; background:linear-gradient(transparent,rgba(0,0,0,.4)); }
.creative-project-visual { background:#f3efe7; }
.creative-project-visual::after { height:25%; background:linear-gradient(transparent,rgba(0,0,0,.28)); }
.filter-empty { max-width:680px; margin:26px auto 0; padding:22px; border:1px dashed rgba(130,255,62,.35); border-radius:16px; color:#cfd5ce; text-align:center; font-size:13px; }
.filter-empty[hidden] { display:none; }
.project-card { overflow:hidden; border:1px solid rgba(45,242,140,.42); border-radius:20px; background:linear-gradient(145deg,rgba(16,24,19,.96),rgba(4,7,5,.98)); box-shadow:0 20px 35px rgba(0,0,0,.22); transition:transform .25s ease,border-color .25s ease; }
.project-card[hidden] { display:none !important; }
.project-card:hover { transform:translateY(-5px); border-color:var(--green); }
.project-card.featured { border-color:var(--green); }
.project-media { position:relative; height:228px; overflow:hidden; background:#0b1310; }
.project-card.featured .project-media { height:285px; }
.project-media::after { content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(transparent,rgba(0,0,0,.55)); pointer-events:none; }
.project-card-body { min-height:172px; padding:17px 20px 19px; }
.project-card-body h3 { margin:0; font-size:19px; }
.project-card-body p { margin:10px 0 14px; color:#e1e4e0; font-size:13px; line-height:1.35; }
.project-badge { display:inline-flex; padding:4px 13px; margin-top:7px; border:1px solid var(--green); border-radius:999px; color:var(--green); font-size:11px; }
.case-link { display:inline-flex; align-items:center; gap:18px; min-height:38px; padding:0 21px; border:1px solid var(--green); border-radius:8px; color:var(--green); font-size:12px; font-weight:700; }

.browser-mock { position:absolute; inset:24px 18px 0; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:12px 12px 0 0; background:#eff6f3; color:#17201b; }
.browser-bar { height:24px; display:flex; align-items:center; gap:5px; padding:0 9px; background:#e4ebe8; }
.browser-bar i { width:5px; height:5px; border-radius:50%; background:#7d8b84; }
.clinic-visual .mock-copy { width:53%; padding:28px 10px 10px; }
.clinic-visual .mock-copy b { display:block; color:#187488; font-size:18px; line-height:1.1; }
.clinic-visual .mock-copy span { display:block; margin-top:8px; font-size:7px; }
.doctor-shape { position:absolute; width:84px; height:110px; right:10px; bottom:0; border-radius:50% 50% 12% 12%; background:linear-gradient(#f0c7ae 22%,#fff 23% 65%,#8ec6d7 66%); }
.dashboard-visual { background:radial-gradient(circle at 70% 40%,rgba(86,255,75,.18),transparent 35%),#07110b; }
.dashboard-ui { position:absolute; inset:22px 27px 0; padding:34px 22px 18px 85px; border:1px solid rgba(255,255,255,.16); border-radius:10px 10px 0 0; background:#0c1411; transform:perspective(700px) rotateX(3deg); }
.dashboard-sidebar { position:absolute; left:0; top:0; bottom:0; width:68px; background:#08100c; border-right:1px solid rgba(255,255,255,.08); }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.metrics span { height:40px; padding:8px; border-radius:6px; background:#131e19; color:#e8eee9; font-size:9px; }
.chart { position:relative; height:87px; margin-top:12px; border-radius:7px; background:linear-gradient(transparent 95%,rgba(255,255,255,.08) 96%); background-size:100% 22px; }
.chart svg { position:absolute; inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); fill:none; stroke:var(--green); stroke-width:2; }
.shop-visual { background:linear-gradient(135deg,#efefeb,#bdbdb7); }
.shoe { position:absolute; width:135px; height:62px; left:50%; top:50%; border-radius:70% 20% 25% 25%; background:linear-gradient(165deg,#2c2c2a,#8c7c67); transform:translate(-50%,-50%) rotate(-15deg); box-shadow:0 20px 20px rgba(0,0,0,.25); }
.shop-title { position:absolute; left:18px; top:21px; color:#191b1a; font:700 22px/1.05 var(--font-display); }

.boutique-visual { background:linear-gradient(120deg,#d8cc,#a68d74); }
.tote { position:absolute; width:120px; height:150px; left:50%; top:54%; transform:translate(-50%,-50%); background:#d8c0a7; clip-path:polygon(8% 10%,92% 10%,100% 100%,0 100%); box-shadow:0 18px 25px rgba(0,0,0,.3); }
.tote::before { content:""; position:absolute; width:55px; height:55px; left:32px; top:-24px; border:5px solid #d8c0a7; border-bottom:0; border-radius:50% 50% 0 0; }
.tote::after { content:"Luna"; position:absolute; inset:55px 0 auto; color:#46392e; text-align:center; font:italic 25px Georgia,serif; }
.coffee-visual { background:linear-gradient(120deg,#221c14,#8b6848 55%,#352719); }
.coffee-cup { position:absolute; width:92px; height:145px; left:33%; bottom:13px; background:linear-gradient(90deg,#8e6741,#c69763); clip-path:polygon(10% 0,90% 0,82% 100%,18% 100%); box-shadow:0 20px 24px rgba(0,0,0,.35); }
.coffee-cup::before { content:"RAÍZ"; position:absolute; inset:58px 0 auto; text-align:center; color:#382517; font:700 18px var(--font-display); }
.coffee-bag { position:absolute; width:120px; height:170px; left:55%; bottom:0; background:#9d744b; transform:rotate(3deg); }
.coffee-bag::after { content:"RAÍZ"; position:absolute; inset:58px 0 auto; text-align:center; color:#392619; font:700 21px var(--font-display); }
.invite-visual { background:radial-gradient(circle at 70% 20%,#314135,#121712 55%,#050706); }
.invite-card { position:absolute; width:150px; height:185px; left:50%; top:52%; transform:translate(-50%,-50%) rotate(4deg); display:grid; place-content:center; border:2px solid #9e7b43; color:#d9b875; background:#101412; text-align:center; box-shadow:0 22px 30px rgba(0,0,0,.5); font:600 22px/1.2 Georgia,serif; }
.invite-card small { font:10px var(--font-body); letter-spacing:.15em; }

.project-dots { display:flex; justify-content:center; gap:8px; margin:18px 0 3px; }
.project-dots span { width:10px; height:10px; border-radius:50%; background:#4b4f4c; }
.project-dots span:first-child { background:var(--green); }

.categories-section { padding: 2px 36px 28px; }
.category-heading { font-size:32px; }
.category-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:20px 0 27px; }
.category-chip { min-height:43px; padding:0 22px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#f6f6f6; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); cursor:pointer; transition:.2s ease; }
.category-chip:hover,.category-chip.active { color:#081006; border-color:var(--green); background:var(--green); box-shadow:0 0 22px rgba(130,255,62,.24); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.stat-card { min-height:135px; display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; padding:20px; border:1px solid rgba(255,255,255,.15); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018)); }
.stat-card svg { width:50px; height:50px; fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.stat-card strong { display:block; font-size:16px; line-height:1.15; }
.stat-card strong span { color:var(--green); font-size:24px; }
.stat-card p { margin:8px 0 0; color:#d7d9d6; font-size:11px; line-height:1.3; }

.project-cta { position:relative; min-height:175px; margin:0 36px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(130,255,62,.42); border-radius:28px; background:radial-gradient(circle at 50% 50%,rgba(80,255,63,.19),transparent 52%),linear-gradient(100deg,#07110a,#10240f,#071008); }
.project-cta-dog { position:absolute; width:270px; left:5px; bottom:-128px; filter:drop-shadow(0 15px 15px rgba(0,0,0,.65)); }
.theme-creative .project-cta-dog { bottom:-115px; }
.project-cta-copy { position:relative; z-index:2; width:52%; text-align:left; }
.project-cta-copy p { margin:0 0 3px; font-size:13px; }
.project-cta h2 { margin:0; font:600 32px/1.06 var(--font-display); letter-spacing:-.03em; }
.project-cta .cta-actions { justify-content:flex-start; margin-top:13px; }
.project-cta-note { position:absolute; z-index:2; right:35px; top:39px; width:170px; font:italic 17px/1.2 "Segoe Print",cursive; text-align:center; transform:rotate(-6deg); }

.project-footer { margin-top:0; }

.request-dialog { width:min(1160px,calc(100% - 34px)); max-height:92vh; padding:0; overflow:hidden; color:white; border:1px solid rgba(255,255,255,.38); border-radius:28px; background:#050706; box-shadow:0 35px 90px rgba(0,0,0,.72); }
.request-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(8px); }
.modal-layout { display:grid; grid-template-columns:.44fr .56fr; min-height:760px; }
.modal-aside { position:relative; overflow:hidden; padding:43px 43px 36px; border-right:1px solid rgba(255,255,255,.08); background:radial-gradient(circle at 55% 22%,rgba(126,255,55,.12),transparent 35%),#030504; }
.modal-brand { margin:0; }
.brand-lockup-modal .brand-lockup-logo { width:166px; height:35px; }
.brand-lockup-modal .brand-lockup-logo img { width:228px; left:-31px; top:-19px; }
.brand-lockup-modal .brand-division { margin-left:11px; font-size:28px; }
.modal-tagline {
  position: absolute;
  z-index: 4;
  top: 86px;
  right: 24px;
  width: 205px;
  margin: 0;
  font: italic 19px/1.18 "Segoe Print", cursive;
  text-align: center;
  transform: rotate(-6deg);
}
.modal-tagline::after { content:""; display:block; width:76px; height:9px; margin:5px 8px 0 auto; border-top:3px solid var(--green); border-radius:50%; transform:rotate(-5deg); }
.modal-tagline span { color:var(--green); }
.modal-dog { position:relative; z-index:2; width:365px; height:305px; margin:10px auto 0; object-fit:contain; filter:drop-shadow(0 18px 17px rgba(0,0,0,.65)); }
.modal-benefits { position:relative; z-index:3; display:grid; gap:14px; }
.modal-benefit { display:grid; grid-template-columns:63px 1fr; gap:14px; align-items:center; }
.modal-benefit-icon { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.26); border-radius:15px; color:var(--green); background:rgba(255,255,255,.035); }
.modal-benefit-icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.5; }
.modal-benefit strong { display:block; font-size:15px; }
.modal-benefit p { margin:4px 0 0; color:#d6d8d5; font-size:12px; line-height:1.3; }
.modal-quote { margin-top:22px; padding:18px; border:1px solid rgba(130,255,62,.5); border-radius:18px; text-align:center; font:italic 15px/1.35 var(--font-body); }
.modal-form-area { position:relative; padding:43px 43px 35px; background:linear-gradient(145deg,#090b0a,#030403); }
.modal-close { position:absolute; right:24px; top:22px; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:white; background:transparent; font-size:28px; cursor:pointer; }
.modal-close:hover { color:var(--green); border-color:var(--green); }
.modal-eyebrow { margin:0 0 10px; color:var(--green); font-size:13px; font-weight:700; letter-spacing:.1em; }
.modal-title { margin:0; max-width:530px; font:600 44px/1.02 var(--font-display); letter-spacing:-.04em; }
.modal-description { max-width:560px; margin:15px 0 24px; color:#e6e8e5; font-size:15px; line-height:1.42; }
.request-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:12px; font-weight:600; }
.required { color:#ff5252; }
.field input,.field select,.field textarea { width:100%; border:1px solid rgba(255,255,255,.34); border-radius:10px; color:white; background:rgba(255,255,255,.025); font:13px var(--font-body); outline:none; transition:.2s ease; }
.field input,.field select { height:46px; padding:0 13px; }
.field textarea { min-height:104px; padding:12px 13px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(130,255,62,.1); }
.field select option { color:white; background:#0a0d0b; }
.claims-form select { color-scheme:dark; accent-color:var(--green); }
.claims-form select option { color:#f7f8f6; background:#071009; }
.claims-form select option:checked,
.claims-form select option:hover { color:#071006; background:#82ff3e; box-shadow:0 0 0 100px #82ff3e inset; }
.textarea-wrap { position:relative; }
.char-count { position:absolute; right:10px; bottom:9px; color:#b7bab7; font-size:10px; }
.consent { grid-column:1/-1; display:flex; align-items:flex-start; gap:9px; color:#e6e7e5; font-size:10px; line-height:1.35; }
.consent input { width:19px; height:19px; margin:0; accent-color:var(--green); }
.submit-request { grid-column:1/-1; min-height:58px; border:0; border-radius:14px; color:#071006; background:linear-gradient(120deg,#75f552,#a1ff62); font-size:17px; font-weight:800; cursor:pointer; }
.submit-request:hover { filter:saturate(1.06); box-shadow:0 9px 18px rgba(0,0,0,.32); }

.claims-page { min-height:100vh; padding:28px; display:grid; place-items:center; background:radial-gradient(circle at 22% 20%,rgba(126,255,59,.09),transparent 28%),radial-gradient(circle at 82% 76%,rgba(126,255,59,.055),transparent 27%),#020302; }
.claims-shell { width:min(1240px,100%); display:grid; grid-template-columns:.43fr .57fr; overflow:hidden; border:1px solid rgba(255,255,255,.35); border-radius:28px; background:#050706; box-shadow:0 35px 90px rgba(0,0,0,.72); }
.claims-aside { position:relative; overflow:hidden; padding:38px 38px 30px; border-right:1px solid rgba(255,255,255,.08); background:radial-gradient(circle at 50% 26%,rgba(126,255,55,.1),transparent 33%),#030504; }
.claims-aside::after { content:""; position:absolute; width:290px; height:330px; right:-190px; bottom:120px; border:55px solid rgba(130,255,62,.055); border-radius:60px; transform:rotate(42deg); pointer-events:none; }
.claims-logo { width:170px; height:42px; }
.claims-kicker { margin:18px 0 7px; color:var(--green); font-size:11px; font-weight:700; letter-spacing:.12em; }
.claims-aside h2 { margin:0; font:600 34px/1.04 var(--font-display); letter-spacing:-.035em; }
.claims-aside h2 span,.claims-title span { color:var(--green); }
.claims-aside-copy { max-width:410px; margin:13px 0 0; color:#dce0dc; font-size:12px; line-height:1.45; }
.claims-dogs { position:relative; z-index:2; width:430px; height:335px; margin:2px auto 0; object-fit:contain; filter:drop-shadow(0 20px 18px rgba(0,0,0,.6)); }
.claims-guidance { position:relative; z-index:3; display:grid; gap:10px; }
.claims-guidance > div { min-height:64px; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; padding:10px 13px; border:1px solid rgba(130,255,62,.22); border-radius:14px; background:#071009; }
.claims-guidance span { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(130,255,62,.6); border-radius:50%; color:var(--green); font:700 11px var(--font-display); }
.claims-guidance p { margin:0; color:#d8dbd8; font-size:10px; line-height:1.3; }
.claims-guidance strong { display:block; margin-bottom:2px; color:white; font-size:12px; }
.claims-aside blockquote { position:relative; z-index:3; margin:14px 0 0; padding:14px 16px; border-left:2px solid var(--green); color:#e7e9e6; background:rgba(255,255,255,.025); font:italic 12px/1.4 var(--font-body); }
.claims-form-area { position:relative; padding:42px 42px 28px; background:linear-gradient(145deg,#090b0a,#030403); }
.claims-close { position:absolute; right:22px; top:20px; width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:white; font-size:28px; line-height:1; transition:color .2s ease,border-color .2s ease; }
.claims-close:hover { color:var(--green); border-color:var(--green); }
.claims-title { margin:0; max-width:540px; font:600 43px/1.02 var(--font-display); letter-spacing:-.04em; }
.claims-form { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.claims-form .field.full,.claims-form .submit-request { grid-column:1/-1; }
.claims-form .field textarea { min-height:88px; }
.form-status { grid-column:1/-1; min-height:18px; margin:0; color:var(--green); font-size:12px; }

/* Project case gallery */
.case-dialog {
  width:min(1180px,calc(100% - 34px));
  max-height:92vh;
  padding:0;
  overflow:hidden;
  color:white;
  border:1px solid rgba(130,255,62,.62);
  border-radius:28px;
  background:#030503;
  box-shadow:0 35px 90px rgba(0,0,0,.78),0 0 30px rgba(130,255,62,.08);
}
.case-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(8px); }
.case-modal { position:relative; display:grid; grid-template-columns:minmax(0,1.8fr) minmax(290px,.9fr); gap:36px; min-height:620px; padding:38px; background:linear-gradient(145deg,#071009,#020402 74%); }
.case-close { position:absolute; z-index:9; right:24px; top:22px; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.34); border-radius:50%; color:white; background:#030503; font-size:28px; line-height:1; cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease; }
.case-close:hover { color:var(--green); border-color:var(--green); background:#071009; }
.case-gallery { min-width:0; align-self:center; }
.case-main-frame { position:relative; height:445px; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:22px; background:#071009; box-shadow:inset 0 0 45px rgba(130,255,62,.035); }
.case-main-frame .project-media { position:absolute; inset:0; width:100%; height:100%; }
.case-main-frame .browser-mock { inset:38px 56px 0; }
.case-main-frame .dashboard-ui { inset:36px 48px 0; }
.case-main-frame .clinic-visual .mock-copy { padding:48px 20px 20px; }
.case-main-frame .clinic-visual .mock-copy b { font-size:clamp(22px,3vw,34px); }
.case-main-frame .doctor-shape { width:155px; height:220px; right:45px; }
.case-shot { opacity:0; pointer-events:none; transition:opacity .24s ease,transform .35s ease; }
.case-shot.is-active { opacity:1; pointer-events:auto; }
.case-shot--detail { transform:scale(1.13) translateX(-3%); }
.case-shot--detail.is-active { transform:scale(1.13) translateX(-3%); }
.case-shot--alternate { transform:scale(1.08) translateX(3%); filter:saturate(.9) brightness(.92); }
.case-shot--alternate.is-active { transform:scale(1.08) translateX(3%); }
.case-arrow { position:absolute; z-index:7; top:50%; width:48px; height:48px; display:grid; place-items:center; border:2px solid var(--green); border-radius:50%; color:var(--green); background:rgba(2,5,3,.82); font-size:31px; line-height:1; cursor:pointer; transform:translateY(-50%); }
.case-arrow[hidden],.case-thumbnails[hidden] { display:none !important; }
.case-arrow:hover { color:#071006; background:var(--green); }
.case-arrow--prev { left:18px; }.case-arrow--next { right:18px; }
.case-thumbnails { display:grid; grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); gap:12px; margin-top:18px; }
.case-thumbnail { height:92px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:12px; background:#080d09; cursor:pointer; opacity:.72; transition:opacity .2s ease,border-color .2s ease; }
.case-thumbnail:hover,.case-thumbnail[aria-selected="true"] { opacity:1; border:2px solid var(--green); }
.case-thumbnail .project-media { width:100%; height:100%; pointer-events:none; transform:none; }
.case-thumbnail .browser-mock { inset:8px 6px 0; }
.case-thumbnail .dashboard-ui { inset:8px 7px 0; padding:13px 6px 5px 24px; }
.case-thumbnail .dashboard-sidebar { width:20px; }
.case-thumbnail .doctor-shape { width:30%; height:72%; right:5px; }
.case-thumbnail .clinic-visual .mock-copy { width:64%; padding:12px 5px 5px; }
.case-thumbnail .clinic-visual .mock-copy b { font-size:8px; }
.case-main-frame .case-image-slide { background:#020817; }
.case-main-frame .case-image-slide img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.case-thumbnail .case-image-slide img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; }
.case-description { align-self:center; max-height:min(545px,calc(92vh - 76px)); overflow-y:auto; padding:58px 8px 30px 0; scrollbar-color:var(--green) #071009; scrollbar-width:thin; }
.case-description .project-badge { margin:0 0 20px; }
.case-description h2 { margin:0; font:600 clamp(31px,3vw,43px)/1.08 var(--font-display); letter-spacing:-.035em; }
.case-description-copy { margin-top:25px; padding-top:25px; border-top:1px solid rgba(255,255,255,.18); }
.case-description-copy p { margin:0 0 14px; color:#e2e5e1; font-size:14px; line-height:1.58; }
.case-description-copy p:last-child { margin-bottom:0; }
.case-close:focus-visible,.case-arrow:focus-visible,.case-thumbnail:focus-visible { outline:3px solid white; outline-offset:3px; }

@media (max-width: 950px) {
  .project-hero { grid-template-columns:1fr; padding:45px 30px 15px; text-align:center; }
  .project-intro { margin-inline:auto; }
  .project-hero-actions,.project-benefits { justify-content:center; }
  .project-hero-visual { min-height:500px; max-width:650px; width:100%; margin-inline:auto; }
  .showcase-grid { grid-template-columns:1fr; max-width:650px; margin-inline:auto; }
  .tech-showcase { max-width:820px; }
  .creative-showcase { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
  .project-card--real { grid-template-columns:1fr; }
  .tech-showcase .project-card.featured .project-media { min-height:250px; }
  .creative-showcase .project-card.featured .project-media { height:230px; min-height:230px; }
  .project-card--real .project-card-body { min-height:215px; padding:22px; }
  .project-card.featured { order:-1; }
  .project-card,.project-card.featured { display:grid; grid-template-columns:1.1fr .9fr; }
  .tech-showcase .project-card--real { display:flex; grid-template-columns:1fr; }
  .creative-showcase .project-card--real { display:flex; grid-template-columns:1fr; }
  .project-media,.project-card.featured .project-media { height:100%; min-height:250px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .project-cta { margin-inline:30px; }
  .project-cta-dog { opacity:.5; left:-40px; }
  .project-cta-copy { width:65%; margin-left:20%; }
  .project-cta-note { display:none; }
  .modal-layout { grid-template-columns:1fr; }
  .modal-aside { display:none; }
  .request-dialog { overflow:auto; }
  .claims-page { align-items:start; }
  .claims-shell { grid-template-columns:1fr; }
  .claims-aside { border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .claims-dogs { height:320px; }
  .case-dialog { overflow:auto; }
  .case-modal { grid-template-columns:1fr; gap:0; min-height:0; padding:70px 28px 30px; }
  .case-description { max-height:none; overflow:visible; padding:28px 0 5px; }
  .case-main-frame { height:min(430px,52vw); min-height:300px; }
}

@media (max-width: 620px) {
  .project-hero { padding:35px 20px 5px; }
  .project-kicker { font-size:23px; }
  .project-title { font-size:38px; }
  .project-intro { font-size:14px; }
  .project-hero-actions { flex-direction:column; align-items:center; }
  .project-hero-actions .button { width:min(290px,100%); }
  .project-benefits { grid-template-columns:1fr; width:max-content; max-width:100%; margin-inline:auto; text-align:left; }
  .project-hero-visual { min-height:415px; }
  .project-portal { width:300px; height:310px; border-width:42px; }
  .project-dog,.theme-creative .project-dog { width:390px; max-height:405px; }
  .hero-tag { top:14px; left:0; width:145px; padding:12px; }
  .hero-tag .brand-lockup-logo { width:112px; height:24px; }
  .hero-tag .brand-lockup-logo img { width:155px; left:-21px; top:-13px; }
  .hero-tag .brand-division { font-size:16px; }
  .hero-scribble { right:0; bottom:22px; font-size:14px; }
  .featured-section,.categories-section { padding-inline:18px; }
  .projects-heading { font-size:31px; }
  .category-heading { font-size:28px; }
  .project-card,.project-card.featured { display:block; }
  .project-media,.project-card.featured .project-media { height:235px; }
  .tech-showcase .project-card.featured .project-media,
  .creative-showcase .project-card.featured .project-media { height:200px; min-height:200px; }
  .creative-showcase { grid-template-columns:1fr; max-width:440px; }
  .project-card--real .project-card-body { min-height:0; }
  .stats-grid { grid-template-columns:1fr; }
  .project-cta { min-height:260px; margin-inline:18px; align-items:flex-start; padding-top:28px; }
  .project-cta-copy { width:90%; margin-left:0; text-align:center; }
  .project-cta h2 { font-size:27px; }
  .project-cta .cta-actions { justify-content:center; }
  .project-cta-dog { width:220px; left:50%; bottom:-145px; transform:translateX(-50%); opacity:.58; }
  .modal-form-area { padding:35px 19px 25px; }
  .modal-title { font-size:34px; padding-right:45px; }
  .modal-description { font-size:13px; }
  .request-form,.claims-form { grid-template-columns:1fr; }
  .field,.field.full,.consent,.submit-request,.claims-form .field.full,.claims-form .submit-request { grid-column:1; }
  .claims-page { padding:12px; }
  .claims-shell { border-radius:20px; }
  .claims-aside { padding:28px 20px 22px; }
  .claims-aside h2 { font-size:30px; }
  .claims-dogs { width:100%; height:285px; }
  .claims-form-area { padding:34px 18px 24px; }
  .claims-title { padding-right:42px; font-size:36px; }
  .claims-close { right:16px; top:15px; width:42px; height:42px; }
  .case-dialog { width:calc(100% - 20px); border-radius:20px; }
  .case-modal { padding:66px 14px 22px; }
  .case-close { right:14px; top:12px; width:44px; height:44px; }
  .case-main-frame { height:260px; min-height:0; border-radius:15px; }
  .case-main-frame .browser-mock { inset:23px 20px 0; }
  .case-main-frame .dashboard-ui { inset:20px 18px 0; }
  .case-main-frame .doctor-shape { width:85px; height:130px; right:15px; }
  .case-main-frame .clinic-visual .mock-copy { padding:30px 8px 8px; }
  .case-main-frame .clinic-visual .mock-copy b { font-size:18px; }
  .case-arrow { width:42px; height:42px; font-size:27px; }
  .case-arrow--prev { left:10px; }.case-arrow--next { right:10px; }
  .case-thumbnails { gap:8px; margin-top:10px; }
  .case-thumbnail { height:62px; border-radius:8px; }
  .case-description { padding-top:22px; }
  .case-description-copy { margin-top:17px; padding-top:17px; }
  .case-description-copy p { font-size:13px; }
  .case-thumbnails { grid-template-columns:repeat(5,1fr); gap:6px; }
}

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