@layer projects {
  .company-section {background:#fff;border-bottom:1px solid var(--line);padding-block:52px}
  .company-grid {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .company-identity h2 {font-size:clamp(24px,2.3vw,32px);line-height:1.2;letter-spacing:-.045em}
  .company-identity p {font-size:15px;line-height:1.6;color:#62626d;margin-top:12px}
  .company-identity .company-founded {font-size:13px;margin-top:6px}
  .company-product>p {font-size:20px;line-height:1.5;letter-spacing:-.03em;max-width:490px}
  .company-links {display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px}
  .company-links .button {font-size:13px;padding:8px 0;min-height:44px;gap:8px}
  .company-links .icon {width:16px;height:16px}
  .footer-bottom .footer-company {font-size:12px;line-height:1.7}
  .footer-company a:hover {color:var(--blue)}
  .page-heading.product-page-heading h1 {font-size:clamp(38px,4.8vw,68px);line-height:1.07;max-width:1000px}
  .product-page-heading .page-lead {max-width:700px}
  .project-credit {margin-top:16px;font-size:15px;line-height:1.6;color:#62626d}
  .project-credit a {color:var(--ink);text-decoration:underline;text-decoration-color:#c7c7ce;text-underline-offset:3px}
  .project-credit a:hover {color:var(--blue)}
  @media(max-width:900px) {
    .company-grid {gap:32px}
    .company-product>p {font-size:18px}
  }
  @media(max-width:650px) {
    .company-section {padding-block:36px}
    .company-grid {grid-template-columns:1fr;gap:24px}
    .company-links {gap:4px 22px;margin-top:12px}
    .page-heading.product-page-heading h1 {font-size:clamp(34px,8.5vw,48px)}
    .project-credit {font-size:13px}
  }
  .project-platforms {margin-top:26px;font-size:12px;font-weight:550;letter-spacing:.04em;color:#65706a}
  .project-links {display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
  .project-links .button-secondary {background:white;border-color:#d9dddf}
  .project-links .button-secondary:hover {border-color:#0068df;color:#0068df}
  .project-access {margin-top:18px;font-size:12px;color:#68706d;line-height:1.6}
  .project-visual {top:194px;bottom:52px;display:grid;place-items:center}
  .app-gallery {display:flex;align-items:center;justify-content:center;gap:24px;width:100%;height:100%;min-width:0}
  .published-screen {display:block;position:relative;min-width:0;flex-shrink:0}
  .published-screen img {display:block;object-fit:contain;border-radius:16px;box-shadow:0 15px 30px #183b2824}
  .project-card .app-gallery .published-screen {height:100%;max-height:300px;max-width:44%}
  .project-card .app-gallery .published-screen img {height:100%;width:auto;max-width:100%}
  .project-card .app-gallery .published-screen:first-child {transform:rotate(-3deg) translateY(4px)}
  .project-card .app-gallery .published-screen:nth-child(2) {transform:rotate(3deg) translateY(-4px)}
  .project-card.preview-app .project-visual::before {content:"";position:absolute;inset:10% 12%;background:radial-gradient(ellipse,#ffffffa6,transparent 70%);z-index:-1}
  .project-card.theme-dark .project-visual::before {background:radial-gradient(ellipse,#5c937547,transparent 70%)}
  .project-wide .project-visual {top:64px;bottom:52px}
  .project-wide .app-gallery .published-screen {max-height:340px}
  .website-capture {width:100%;overflow:hidden;border:1px solid #ffffff80;border-radius:14px;box-shadow:0 16px 38px #273e3026;background:#f3efe5}
  .capture-toolbar {height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#ffffffeb;color:#7d817e;font-size:9px}
  .capture-toolbar .window-dots {gap:4px}
  .capture-toolbar .window-dots i {width:5px;height:5px}
  .website-capture .published-screen img {width:100%;height:auto;border-radius:0;box-shadow:none}
  .project-card .website-capture {max-width:410px}
  .project-detail-visual.preview-app {height:650px}
  .project-detail-screen {max-width:980px;width:90%;min-width:0}
  .project-detail-screen .app-gallery {height:510px;gap:28px;padding:16px}
  .project-detail-screen .app-gallery .published-screen {height:470px}
  .project-detail-screen .app-gallery img {height:100%;width:auto;max-width:none}
  .project-detail-screen .published-screen {transition:transform .25s}
  .project-detail-screen .published-screen:hover {transform:translateY(-4px)}
  .screenshot-zoom {position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fffffff0;color:#173b2b;box-shadow:0 2px 10px #00000015}
  .screenshot-zoom .icon {width:15px;height:15px}
  .project-detail-visual.preview-web {height:auto;padding:50px 34px 65px}
  .preview-web .project-detail-screen {width:100%;max-width:880px}
  .preview-source {letter-spacing:.06em}
  .project-detail-visual .preview-source {left:26px;bottom:20px;font-size:10px}
  .theme-peach {background:#f3e9dc;color:#42271f}
  .project-overview-art {width:100%;max-width:430px;border-radius:12px;overflow:hidden;box-shadow:0 18px 35px #5b332c20;transform:rotate(-2deg);transition:transform .6s}
  .project-overview-art img {width:100%;height:auto;border-radius:0;box-shadow:none}
  .project-story:hover .project-overview-art {transform:rotate(0) translateY(-4px)}
  .project-story.theme-peach .project-story-list dd {color:#5a4238}
  .project-story.theme-peach .project-story-meta,.project-story.theme-peach .project-story-list dt,.project-story.theme-peach .story-detail-link {color:#745d50}
  .solution-overview {position:relative;width:100%;height:100%;max-width:480px;isolation:isolate}
  .suite-website {position:absolute;left:0;top:4%;width:83%;transform:rotate(-4deg)}
  .suite-phone {position:absolute;right:3%;bottom:0;width:22%;border-radius:12px;box-shadow:0 14px 24px #342e5a28;overflow:hidden;transform:rotate(5deg)}
  .suite-phone img {width:100%;height:auto}
  .suite-phone-1 {right:25%;bottom:1%;width:22%;transform:rotate(-2deg)}
  .preview-suite.project-detail-visual {height:620px;padding:50px 70px 70px}
  .preview-suite .project-detail-screen {height:100%;max-width:800px;width:100%}
  .preview-suite .solution-overview {max-width:none}
  .preview-suite .suite-website {width:78%;top:0}
  .preview-suite .suite-phone {width:19%;bottom:0}
  .preview-suite .suite-phone-1 {right:24%;width:22%}
  .project-detail-visual.preview-graphic {height:auto;padding:55px 40px 75px}
  .preview-graphic .project-detail-screen {max-width:860px;width:100%}
  .preview-graphic .project-overview-art {max-width:none;transform:none;border-radius:16px}
  .solution-parts {padding-bottom:70px}
  .solution-heading {margin-bottom:45px}
  .solution-heading h2 {font-size:clamp(32px,4vw,53px);max-width:650px}
  .solution-nav {display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .solution-nav a {display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:11px;background:#f4f4f8;border:1px solid #e4e4eb;border-radius:100px}
  .solution-nav .icon {width:12px;height:12px}
  .solution-part {display:grid;grid-template-columns:1fr 1.7fr;gap:40px;padding:45px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
  .solution-part-copy {align-self:center;min-width:0}
  .solution-part-copy h3 {font-size:30px;letter-spacing:-.05em}
  .solution-part-copy>p {font-size:14px;line-height:1.7;margin-top:18px}
  .solution-part-copy .project-platforms {font-size:10px}
  .solution-part-copy .project-access {font-size:11px}
  .solution-part-copy .project-links {gap:8px}
  .solution-part-copy .button {font-size:10px;padding:10px 14px;gap:9px}
  .solution-part-visual {background:#f1f0f6;border-radius:22px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:380px;overflow:hidden;padding:28px 24px 45px}
  .solution-part-visual .project-detail-screen {width:100%;max-width:100%}
  .solution-part-visual .app-gallery {height:310px;gap:16px;padding:5px;justify-content:center}
  .solution-part-visual .app-gallery .published-screen {height:295px}
  .solution-part-visual .preview-source {left:20px;bottom:15px;font-size:8px}
  .solution-part-visual .website-capture {max-width:560px;margin:auto}
  .solution-part.preview-web .solution-part-visual {background:#efede9}
  @media (max-width:1100px) {
    .project-card .website-capture {max-width:350px}
    .project-visual {top:188px}
    .project-wide .project-visual {top:60px}
    .project-detail-screen .app-gallery {gap:20px}
    .project-detail-screen .app-gallery .published-screen {height:420px}
  }
  @media (max-width:850px) {
    .solution-part {grid-template-columns:1fr;gap:25px}
    .solution-part-copy {max-width:500px}
    .solution-part-visual .app-gallery {justify-content:center;overflow-x:auto;scroll-snap-type:x mandatory}
    .preview-suite.project-detail-visual {height:530px;padding:40px 40px 70px}
    .project-visual {top:174px;bottom:48px}
    .project-card .app-gallery {gap:16px}
    .project-card .website-capture {max-width:300px}
    .project-wide .project-visual {top:56px;bottom:48px}
    .project-detail-visual.preview-app {height:580px}
    .project-detail-screen {width:100%;max-width:100%}
    .project-detail-screen .app-gallery {justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#7f948b55 transparent;padding:20px 32px;height:500px;gap:22px}
    .project-detail-screen .app-gallery .published-screen {scroll-snap-align:center;height:430px}
  }
  @media (max-width:650px) {
    .project-story-visual .project-overview-art {max-width:245px}
    .project-story-visual .solution-overview {max-width:270px}
    .project-detail-visual.preview-suite {height:360px;padding:32px 24px 65px}
    .preview-suite .suite-website {width:85%;top:3%}
    .preview-suite .suite-phone {width:23%;right:0}
    .preview-suite .suite-phone-1 {width:26%;right:25%}
    .project-detail-visual.preview-graphic {padding:30px 20px 55px}
    .solution-heading {margin-bottom:30px}
    .solution-nav {gap:7px;margin-top:22px}
    .solution-nav a {font-size:9px;padding:9px 12px;gap:8px}
    .solution-part {padding-block:30px;gap:24px}
    .solution-part-copy h3 {font-size:28px}
    .solution-part-copy>p {font-size:13px}
    .solution-part-visual {min-height:0;padding:25px 16px 40px;border-radius:18px}
    .solution-part-visual .app-gallery {justify-content:flex-start;gap:14px;height:315px;padding:5px 8px 10px}
    .solution-part-visual .app-gallery .published-screen {height:295px}
    .solution-parts {padding-bottom:40px}
    .project-platforms {margin-top:22px;font-size:10px}
    .project-links {gap:8px;margin-top:14px}
    .project-links .button {font-size:11px;padding:12px 15px;gap:10px}
    .project-access {font-size:11px;margin-top:14px;max-width:300px}
    .project-visual {top:205px;bottom:52px}
    .project-card .app-gallery {gap:18px}
    .project-card .website-capture {max-width:350px}
    .project-wide .project-visual {top:220px;bottom:52px}
    .project-detail-visual.preview-app {height:545px}
    .project-detail-screen .app-gallery {height:465px;padding:18px 24px;gap:18px}
    .project-detail-screen .app-gallery .published-screen {height:405px}
    .project-detail-screen .app-gallery img {border-radius:13px}
    .project-detail-visual.preview-web {padding:32px 20px 56px}
    .project-detail-visual .preview-source {left:19px;bottom:17px;font-size:9px}
    .capture-toolbar {height:25px;font-size:7px;padding-inline:10px}
    .website-capture {border-radius:10px}
  }
  @media (prefers-reduced-motion:reduce) {
    .project-story:hover .project-overview-art {transform:none}
    .project-detail-screen .published-screen:hover {transform:none}
    .project-detail-screen .app-gallery {scroll-behavior:auto}
  }
  /* Component galleries keep their own size and can scroll at every width. */
  .solution-part-visual .project-detail-screen .app-gallery {height:315px;justify-content:safe center;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#7f948b55 transparent}
  .solution-part-visual .project-detail-screen .app-gallery .published-screen {height:295px;scroll-snap-align:center}
}