/* Home is curated as three editorial chapters; catalog remains data-driven. */
.portfolio {
  border-top:1px solid var(--line);
}
.portfolio-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin-bottom:75px;
}
.portfolio-heading .eyebrow {
  margin-bottom:25px;
  color:var(--blue);
}
.portfolio-intro {
  max-width:290px;
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
}
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:60px 40px;
}
.portfolio-card {
  min-width:0;
}
.portfolio-preview {
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:border-color .4s;
}
.portfolio-preview:after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:24px;
  height:24px;
  border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  pointer-events:none;
}
.portfolio-image {
  overflow:hidden;
  aspect-ratio:1.6;
}
.portfolio-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  transition:transform .9s var(--ease);
}
.portfolio-card:focus-within .portfolio-preview,.portfolio-card:hover .portfolio-preview {
  border-color:var(--blue);
}
.portfolio-card:hover .portfolio-image img {
  transform:scale(1.025);
}
.portfolio-home .portfolio-grid {
  display:flex;
  flex-direction:column;
  gap:85px;
}
.portfolio-home .portfolio-card {
  display:grid;
  grid-template-columns:minmax(0,2.15fr) minmax(0,.85fr);
  gap:6.5%;
  align-items:center;
}
.portfolio-home .portfolio-card:nth-child(2) {
  grid-template-columns:minmax(0,.85fr) minmax(0,2.15fr);
}
.portfolio-home .portfolio-card:nth-child(2) .project-showcase {
  grid-column:2;
  grid-row:1;
}
.portfolio-home .portfolio-card:nth-child(2) .project-editorial-copy {
  grid-column:1;
  grid-row:1;
}
/* Homepage only: real screens and HTML/CSS hardware. The grid
   reserves the phone's full height, including before lazy images have loaded. */
.portfolio-home .project-showcase {
  --showcase-light:141,229,223;
  --phone-drop:44%;
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:70% 16% 14%;
  align-items:start;
  padding-block:32px 48px;
  min-width:0;
}
.portfolio-home .portfolio-title-line { display:block; }
/* Hover only starts after entrance effects have been removed. Individual
   translate composes independently of WAAPI's entrance transform. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body:not(.motion-reduced) .portfolio-home .is-portfolio-settled .showcase-browser,
  body:not(.motion-reduced) .portfolio-home .is-portfolio-settled .showcase-phone {
    transition:translate .65s var(--ease),box-shadow .65s var(--ease);
  }
  body:not(.motion-reduced) .portfolio-home .is-portfolio-settled .project-showcase:hover .showcase-browser {
    translate:0 -3px;
    box-shadow:0 32px 54px -18px #000a,0 6px 14px #0003,inset 0 1px 0 #ffffff18;
  }
  body:not(.motion-reduced) .portfolio-home .is-portfolio-settled .project-showcase:hover .showcase-phone {
    translate:0 -6px;
    box-shadow:0 30px 40px -10px #000c,-10px 12px 24px -10px #0008,inset 0 0 0 1px #101410;
  }
  body:not(.motion-reduced) .portfolio-home .is-portfolio-settled .portfolio-link {
    transition:color .3s var(--ease);
  }
  body:not(.motion-reduced) .portfolio-home .is-portfolio-settled .portfolio-link:hover { color:var(--blue); }
}
.portfolio-home .project-showcase--auve { --showcase-light:110,149,120; }
.portfolio-home .project-showcase--alba { --showcase-light:172,153,119; --phone-drop:48%; }
.portfolio-home .project-showcase--aurea { --showcase-light:128,155,127; --phone-drop:84%; }
.portfolio-home .project-showcase::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-3% -4% 0;
  background:radial-gradient(ellipse at 51% 48%,rgba(var(--showcase-light),.09),transparent 65%);
  pointer-events:none;
}
.portfolio-home .project-showcase::after {
  content:'';
  position:absolute;
  z-index:-1;
  height:1px;
  bottom:22px;
  left:8%;
  right:4%;
  background:linear-gradient(90deg,transparent,#ffffff12 35%,#ffffff1c 70%,transparent);
}
.portfolio-home .showcase-browser {
  grid-area:1 / 1 / 2 / 3;
  position:relative;
  margin-top:28px;
  padding:0 5px 6px;
  border:1px solid #ffffff24;
  border-radius:12px;
  background:linear-gradient(145deg,#363b3a,#1b1e1e 34%,#151717);
  box-shadow:0 28px 50px -18px #0009,0 6px 14px #0003,inset 0 1px 0 #ffffff18;
}
.portfolio-home .showcase-toolbar {
  height:35px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  gap:14px;
  padding-inline:9px;
}
.portfolio-home .showcase-window-controls {
  display:flex;
  gap:5px;
}
.portfolio-home .showcase-window-controls i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#747b77;
  box-shadow:inset 0 1px 1px #ffffff26;
}
.portfolio-home .showcase-window-controls i:nth-child(2) { background:#555d59; }
.portfolio-home .showcase-window-controls i:nth-child(3) { background:#444c48; }
.portfolio-home .showcase-address {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  justify-self:center;
  width:90%;
  max-width:280px;
  min-width:0;
  height:21px;
  overflow:hidden;
  white-space:nowrap;
  border:1px solid #ffffff08;
  border-radius:5px;
  background:#080b0b44;
  color:#a9b0ac;
  font-size:8px;
  letter-spacing:.02em;
  line-height:1;
}
.portfolio-home .showcase-address i {
  width:5px;
  height:5px;
  border:1px solid #8fa49b;
  border-radius:50%;
  flex:none;
}
.portfolio-home .showcase-browser-menu {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.portfolio-home .showcase-browser-menu i:first-child { width:9px; height:8px; border:1px solid #ffffff38; border-radius:2px; }
.portfolio-home .showcase-browser-menu i:last-child { width:6px; height:1px; background:#ffffff50; box-shadow:0 3px #ffffff50; }
.portfolio-home .showcase-desktop-screen {
  overflow:hidden;
  border-radius:3px 3px 7px 7px;
  background:#182420;
}
.portfolio-home .showcase-browser-edge {
  position:absolute;
  height:1px;
  inset:auto 12% -1px;
  background:linear-gradient(90deg,transparent,#ffffff30,transparent);
}
.portfolio-home .showcase-phone {
  grid-area:1 / 2 / 2 / 4;
  position:relative;
  z-index:1;
  margin-top:var(--phone-drop);
  padding:3px;
  border:1px solid #8b938e;
  border-radius:clamp(21px,2.4vw,34px);
  background:linear-gradient(125deg,#9a9f98,#313633 16%,#777e78 40%,#252a27 68%,#858b84);
  box-shadow:0 24px 35px -10px #000b,-10px 12px 24px -10px #0008,inset 0 0 0 1px #101410;
}
.portfolio-home .showcase-phone::before,
.portfolio-home .showcase-phone::after {
  content:'';
  position:absolute;
  width:2px;
  background:linear-gradient(#818780,#353d36);
  border-radius:2px;
}
.portfolio-home .showcase-phone::before { left:-3px; top:18%; height:9%; }
.portfolio-home .showcase-phone::after { right:-3px; top:25%; height:12%; }
.portfolio-home .showcase-phone-glass {
  position:relative;
  overflow:hidden;
  padding:13px 3px 12px;
  border:1px solid #ffffff15;
  border-radius:calc(clamp(21px,2.4vw,34px) - 4px);
  background:#080b09;
}
.portfolio-home .showcase-speaker {
  position:absolute;
  top:5px;
  left:40%;
  width:20%;
  height:3px;
  border-radius:3px;
  background:#242b27;
  box-shadow:0 1px #ffffff0a;
}
.portfolio-home .showcase-mobile-screen {
  overflow:hidden;
  border-radius:14px;
  background:#162a21;
}
.portfolio-home .showcase-home-indicator {
  position:absolute;
  bottom:5px;
  left:35%;
  width:30%;
  height:2px;
  border-radius:2px;
  background:#d7dcd14d;
}
.portfolio-home .project-showcase img { width:100%; height:auto; display:block; }
.project-editorial-copy {
  min-width:0;
}
.portfolio-meta {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--blue);
}
.portfolio-demo {
  color:var(--muted);
  font-size:12px;
}
.portfolio-card-heading {
  margin-top:24px;
}
.portfolio-card-heading h3 {
  font-size:clamp(32px,4vw,65px);
  letter-spacing:-.05em;
}
.portfolio-description {
  max-width:330px;
  margin-top:22px;
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
}
.portfolio-features {
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  list-style:none;
  padding:0;
  margin:25px 0;
  color:var(--muted);
  font-size:12px;
}
.portfolio-features li {
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
}
.portfolio-link {
  margin-top:12px;
  font-size:12px;
}
.portfolio-home-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid var(--line);
  margin-top:90px;
  padding-top:35px;
}
.portfolio-home-action>p {
  font-size:20px;
  letter-spacing:-.025em;
}
.portfolio-more {
  background:transparent;
}
.portfolio-more .button-icon {
  border-left-color:var(--line);
}
.portfolio-page {
  overflow:clip;
}
.portfolio-page-hero {
  position:relative;
  padding:145px 0 0;
}
.portfolio-back {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--muted);
  font-size:12px;
  margin-bottom:35px;
}
.portfolio-back:hover {
  color:var(--blue);
}
.portfolio-page-kicker {
  margin-bottom:28px;
}
.portfolio-page h1 {
  font-size:clamp(50px,6.3vw,102px);
  line-height:1.05;
  letter-spacing:-.065em;
  max-width:1300px;
}
.portfolio-page h1>span {
  display:block;
}
.portfolio-page-intro {
  max-width:420px;
  margin:35px 0 0 auto;
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
}
.showroom-strip {
  display:grid;
  grid-template-columns:1fr 1.55fr 1fr;
  gap:24px;
  margin-top:70px;
  padding-block:15px 50px;
  align-items:center;
  perspective:1600px;
}
.showroom-window {
  position:relative;
  border:1px solid var(--line);
  overflow:hidden;
  aspect-ratio:1.15;
  transform:rotateY(8deg);
  transform-origin:center;
}
.showroom-window img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% top;
  transition:transform .8s var(--ease);
}
.showroom-window--1 {
  aspect-ratio:1.65;
  transform:none;
  margin-top:35px;
}
.showroom-window--2 {
  transform:rotateY(-8deg);
}
.showroom-window>span {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(transparent,#000d);
  padding:40px 18px 15px;
  color:white;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}
.showroom-window:hover img {
  transform:scale(1.04);
}
.showroom-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-block:1px solid var(--line);
  padding-block:24px;
}
.showroom-bottom>span {
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
}
.showroom-bottom .text-link {
  font-size:12px;
}
.portfolio-catalog {
  border-bottom:1px solid var(--line);
}
.portfolio-product+.portfolio-product {
  margin-top:130px;
}
.portfolio-product-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:60px;
  margin-bottom:60px;
}
.portfolio-product-heading .eyebrow {
  margin-bottom:22px;
}
.portfolio-product-heading h2 {
  font-size:clamp(38px,4.6vw,70px);
}
.portfolio-product-heading>p {
  max-width:370px;
  justify-self:end;
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
}
.portfolio-grid--professional {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.portfolio-grid--professional .portfolio-catalog-item:first-child {
  grid-column:1/-1;
}
.portfolio-grid--professional .portfolio-catalog-item:first-child .portfolio-image {
  aspect-ratio:2.1;
}
.portfolio-grid--professional .portfolio-catalog-item:first-child img {
  object-position:center 24%;
}
.portfolio-catalog-item {
  min-width:0;
}
.portfolio-card--catalog {
  display:block;
}
.portfolio-card-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
}
.portfolio-card-category {
  display:block;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.portfolio-card--catalog h3 {
  font-size:30px;
  letter-spacing:-.04em;
  margin-top:10px;
}
.portfolio-card-visit {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px;
  min-height:44px;
  flex:none;
}
.portfolio-card-visit .icon {
  width:18px;
  color:var(--blue);
}
@media(max-width:1023px) {
  .portfolio-heading {
    align-items:start;
  }
  .portfolio-intro {
    max-width:240px;
  }
  .portfolio-home .portfolio-card,.portfolio-home .portfolio-card:nth-child(2) {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
  }
  .portfolio-home .portfolio-card:nth-child(2) .project-showcase,
  .portfolio-home .portfolio-card:nth-child(2) .project-editorial-copy { grid-column:auto; grid-row:auto; }
  .portfolio-home .project-showcase { width:100%; max-width:760px; margin-inline:auto; }
  .portfolio-home .project-editorial-copy { max-width:560px; }
  .portfolio-home .portfolio-description { max-width:440px; }
  .portfolio-home-action {
    flex-wrap:wrap;
  }
  .portfolio-home-action>p {
    width:100%;
  }
  .portfolio-product-heading {
    gap:30px;
  }
  .portfolio-page-intro {
    max-width:390px;
  }
  .showroom-strip {
    gap:15px;
  }
}
@media(max-width:767px) {
  .portfolio-heading {
    flex-direction:column;
    gap:24px;
    margin-bottom:40px;
  }
  .portfolio-intro {
    max-width:350px;
  }
  .portfolio-home .portfolio-grid {
    gap:65px;
  }
  .portfolio-home .portfolio-card,.portfolio-home .portfolio-card:nth-child(2),.portfolio-home .portfolio-card:nth-child(3) {
    display:flex;
    flex-direction:column;
    gap:25px;
    align-items:stretch;
    width:100%;
  }
  .portfolio-home .project-showcase {
    display:flex;
    flex-direction:column;
    padding-block:8px 28px;
  }
  .portfolio-home .showcase-browser { width:100%; margin-top:0; padding:0 3px 4px; border-radius:9px; }
  .portfolio-home .showcase-toolbar { height:29px; padding-inline:6px; gap:5px; grid-template-columns:30px minmax(0,1fr) 25px; }
  .portfolio-home .showcase-address { height:18px; font-size:7px; width:100%; }
  .portfolio-home .showcase-window-controls { gap:4px; }
  .portfolio-home .showcase-window-controls i { width:4px; height:4px; }
  .portfolio-home .showcase-phone {
    width:56%;
    max-width:240px;
    align-self:flex-end;
    margin-top:-20px;
    margin-right:3%;
    border-radius:25px;
  }
  .portfolio-home .showcase-phone-glass { border-radius:21px; }
  .portfolio-home .project-showcase::after { bottom:8px; }
  .portfolio-meta {
    flex-direction:row;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .portfolio-card-heading {
    margin-top:15px;
  }
  .portfolio-card-heading h3 {
    font-size:38px;
  }
  .portfolio-description {
    margin-top:15px;
    max-width:none;
  }
  .portfolio-features {
    margin:17px 0 5px;
  }
  .portfolio-home-action {
    margin-top:60px;
    gap:20px;
  }
  .portfolio-home-action>.button {
    width:100%;
  }
  .portfolio-page-hero {
    padding-top:110px;
  }
  .portfolio-back {
    margin-bottom:30px;
  }
  .portfolio-page-kicker {
    font-size:12px;
  }
  .portfolio-page h1 {
    font-size:clamp(39px,10.8vw,72px);
  }
  .portfolio-page-intro {
    margin-top:30px;
    margin-left:0;
    font-size:13px;
  }
  .showroom-strip {
    grid-template-columns:1fr 1.4fr;
    gap:12px;
    margin-top:35px;
    padding-bottom:35px;
  }
  .showroom-window {
    aspect-ratio:.85;
  }
  .showroom-window--1 {
    aspect-ratio:1.15;
    margin-top:30px;
  }
  .showroom-window--2 {
    display:none;
  }
  .showroom-window>span {
    font-size:12px;
    padding-inline:10px;
  }
  .showroom-bottom {
    flex-direction:column;
    align-items:start;
    gap:12px;
  }
  .showroom-bottom>span {
    font-size:12px;
  }
  .portfolio-product-heading {
    grid-template-columns:1fr;
    gap:23px;
    margin-bottom:35px;
  }
  .portfolio-product-heading>p {
    justify-self:start;
    max-width:440px;
  }
  .portfolio-grid {
    grid-template-columns:1fr;
    gap:45px;
  }
  .portfolio-grid--professional .portfolio-catalog-item:first-child {
    grid-column:auto;
  }
  .portfolio-grid--professional .portfolio-catalog-item:first-child .portfolio-image {
    aspect-ratio:1.6;
  }
  .portfolio-product+.portfolio-product {
    margin-top:85px;
  }
  .portfolio-card--catalog h3 {
    font-size:28px;
  }
  .portfolio-card-visit {
    font-size:0;
    gap:0;
    min-width:35px;
    justify-content:end;
  }
  .portfolio-card-category {
    font-size:12px;
  }
}