/* Pokladov / Taste: real interfaces arranged as a portfolio of objects. */
.case-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 36px; }
.case-tile { display:block; min-width:0; }
.case-tile[hidden], .portfolio-filters[hidden] { display:none; }
.case-cover { aspect-ratio:1.38; background:var(--case-color); position:relative; overflow:hidden; }
.case-device { position:relative; background:#fafbf7; }
.case-desktop[data-ui] { border:5px solid #303538; border-radius:10px; overflow:hidden; box-shadow:0 18px 30px #18201c18; }
.case-chrome { height:27px; display:flex; align-items:center; gap:4px; padding:0 10px; color:#58605b; background:#f5f6f2; }
.case-chrome i { width:5px; height:5px; border-radius:50%; background:#b3b9af; }
.case-chrome span { font:10px Arial,sans-serif; display:block; margin:auto; letter-spacing:0; }
.case-screen img { width:100%; height:auto; display:block; }

/* Hardware details belong to the device, not to the surrounding page chrome. */
.case-mobile[data-ui] { aspect-ratio:9/19.5; border:6px solid #111516; border-radius:34px; background:#111516; box-shadow:0 0 0 1px #697070,0 0 0 3px #363c3e,9px 18px 28px #101b2033; overflow:visible; }
.case-mobile .case-screen { position:absolute; inset:0; border-radius:27px; background:#fff; overflow:hidden; padding:12% 0 10%; }
.case-mobile .case-screen img { width:100%; height:auto; max-width:none; }
.case-mobile .case-screen::after { content:""; position:absolute; width:35%; height:1%; bottom:1.5%; left:32.5%; background:#202426; border-radius:20px; }
.phone-hardware { position:absolute; inset:0; pointer-events:none; z-index:2; }
.phone-camera { position:absolute; width:30%; height:3.2%; left:35%; top:1.5%; background:#111516; border-radius:20px; }
.phone-camera::after { content:""; position:absolute; height:42%; aspect-ratio:1; border-radius:50%; background:#25323e; top:29%; right:12%; }
.phone-volume, .phone-power { position:absolute; width:3px; border-radius:3px; background:#6e7678; }
.phone-volume { left:-10px; top:19%; height:12%; }
.phone-volume::before { content:""; position:absolute; width:3px; height:35%; top:-60%; background:#6e7678; border-radius:3px; }
.phone-power { right:-10px; top:27%; height:15%; }
.case-cover>.case-desktop { position:absolute; width:83%; left:6%; top:16%; transform:rotate(-3deg); transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.case-cover>.case-mobile { position:absolute; width:24%; right:5%; top:22%; transform:rotate(6deg); transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.case-cover .case-mobile { border-width:4px; border-radius:23px; }
.case-cover .case-mobile .case-screen { border-radius:18px; }
.case-cover .phone-volume { left:-8px; }
.case-cover .phone-power { right:-8px; }
.case-tile:hover .case-desktop { transform:rotate(-1deg) translateY(-5px); }
.case-tile:hover .case-mobile { transform:rotate(3deg) translateY(-8px); }
.case-tile-meta { display:flex; justify-content:space-between; gap:20px; margin:0 0 16px; font-size:14px; line-height:1.5; color:#505a51; }
.case-tile-meta>span:last-child { white-space:nowrap; }
.case-tile h3 { font-size:clamp(30px,3vw,46px); font-weight:400; letter-spacing:-.045em; line-height:1.08; margin:0 0 14px; }
.case-tile .case-cover+h3 { margin-top:26px; }
.case-tile p { font-size:17px; line-height:1.5; margin:0 0 14px; max-width:36ch; color:#48514a; }
.case-domain { display:inline-block; font:14px/1.5 Arial,sans-serif; color:#5c6759; }
.case-tile:focus-visible, .portfolio-exhibit:focus-visible { outline:3px solid #628a27; outline-offset:8px; }

/* Retain the existing brand, give portfolio pages a quieter typographic system. */
.taste-page .header { border:0; }
.taste-page .nav nav { font-size:15px; }
.taste-page .nav-cta { background:var(--acid); color:var(--ink); border:0; padding:16px 24px; }
.taste-page .nav-cta:hover { color:var(--ink); }
.taste-page h1, .taste-page h2 { font-weight:400; }
.taste-page .section { padding:112px 0; }
.taste-page .button { border-radius:30px; }

.portfolio-intro { min-height:650px; display:grid; grid-template-columns:5fr 7fr; gap:45px; align-items:center; padding:65px 0 85px; }
.portfolio-intro h1 { font-size:clamp(82px,8.7vw,130px); line-height:.94; letter-spacing:-.055em; margin:0; }
.portfolio-intro-copy>p { font-size:19px; line-height:1.55; max-width:30ch; margin:32px 0 25px; color:#cad0ca; }
.portfolio-jump { display:inline-flex; align-items:center; gap:30px; padding:15px 0; font-size:16px; color:var(--acid); }
.portfolio-jump span { font-size:25px; transition:transform .3s ease-out; }
.portfolio-jump:hover span { transform:translateY(5px); }
.portfolio-exhibit { min-width:0; display:block; position:relative; aspect-ratio:1.16; }
.portfolio-exhibit>.case-desktop { width:94%; position:absolute; top:11%; right:0; transform:rotate(-4deg); }
.portfolio-exhibit>.case-mobile { position:absolute; width:29%; bottom:11%; left:1%; transform:rotate(7deg); }
.portfolio-exhibit .case-mobile { border-radius:29px; }
.portfolio-exhibit .case-mobile .case-screen { border-radius:22px; }
.exhibit-caption { display:flex; justify-content:space-between; gap:20px; position:absolute; bottom:0; left:38%; right:0; font-size:14px; line-height:1.5; color:#c2cac3; }
.exhibit-caption>span:last-child { color:var(--acid); font-size:25px; }
.case-index-list { padding:85px 0 130px; scroll-margin-top:24px; }
.portfolio-toolbar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; margin-bottom:72px; }
.portfolio-toolbar h2 { font-size:40px; letter-spacing:-.04em; }
.portfolio-filters { display:flex; gap:5px; flex-wrap:wrap; }
.portfolio-filters button { background:transparent; border:0; color:#465043; font:inherit; font-size:15px; padding:14px 17px; min-height:48px; border-radius:30px; cursor:pointer; }
.portfolio-filters button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.portfolio-filters button span { margin-left:8px; opacity:.65; }
.portfolio-filters button:hover { color:#273a18; background:#dfe6d7; }
.portfolio-filters button[aria-pressed="true"]:hover { background:#303d29; color:#fff; }
.filter-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.case-index-list .case-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:110px 50px; align-items:start; }
.case-index-list .case-tile { grid-column:span 7; }
.case-index-list .case-tile:nth-child(4n+2), .case-index-list .case-tile:nth-child(4n+3) { grid-column:span 5; }
.case-index-list .case-tile:nth-child(even) { margin-top:150px; }
.case-index-list .case-tile:nth-child(4n+2) .case-cover, .case-index-list .case-tile:nth-child(4n+3) .case-cover { aspect-ratio:.94; }
.case-index-list .case-tile:nth-child(4n+2) .case-cover>.case-desktop, .case-index-list .case-tile:nth-child(4n+3) .case-cover>.case-desktop { top:21%; width:100%; left:10%; }
.case-index-list .case-tile:nth-child(4n+2) .case-cover>.case-mobile, .case-index-list .case-tile:nth-child(4n+3) .case-cover>.case-mobile { width:33%; top:17%; right:auto; left:8%; transform:rotate(-6deg); }
.case-index-list .case-tile:last-child { grid-column:3 / span 8; margin:0; }
.case-index-list .case-grid[data-filtered="true"] .case-tile { grid-column:span 6; margin-top:0; }
.case-index-list .case-grid[data-filtered="true"] .case-cover { aspect-ratio:1.25; }

.case-heading { padding:45px 0 60px; }
.case-back { font-size:16px; display:inline-block; color:#bdc8bb; margin-bottom:58px; padding:6px 0; }
.case-back:hover { color:var(--acid); }
.case-heading-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:75px; align-items:end; }
.case-heading h1 { font-size:clamp(52px,6.2vw,90px); line-height:1.03; max-width:700px; overflow-wrap:break-word; letter-spacing:-.055em; }
.case-title-note { font-size:22px; line-height:1.45; margin:26px 0 0; max-width:29ch; color:#d1e5b6; }
.case-intro p { font-size:18px; line-height:1.65; margin:0 0 22px; color:#c4ccc4; }
.case-intro .case-domain { color:#c4cfb8; font-size:16px; }
.case-facts { display:grid; grid-template-columns:1.1fr 1.1fr 1fr; gap:30px; margin-top:55px; padding:28px 32px; background:#22292a; }
.case-facts span { display:block; font-size:14px; color:#acb9ac; margin-bottom:12px; }
.case-facts strong { font-size:17px; font-weight:400; }
.case-showcase { background:var(--case-color); padding:85px 0 35px; overflow:hidden; }
.case-stage { position:relative; padding-bottom:25px; }
.case-stage>.case-desktop { width:85%; transform:rotate(-1.5deg); }
.case-stage>.case-desktop .case-chrome { height:34px; }
.case-stage>.case-mobile { position:absolute; width:22%; max-width:260px; right:1%; top:5%; transform:rotate(5deg); }
.case-stage-label { display:block; font-size:15px; color:#465144; margin-top:40px; }
.case-story { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; align-items:start; }
.case-story h2, .case-deliverables h2 { font-size:clamp(38px,4vw,58px); line-height:1.05; letter-spacing:-.045em; }
.case-story>p { font-size:24px; line-height:1.6; margin:0; color:#2e382e; }
.case-deliverables { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; margin-top:110px; }
.case-deliverables article { display:block; padding:0 0 40px; }
.case-deliverables article:last-child { padding:0; }
.case-deliverables h3 { font-size:29px; font-weight:400; letter-spacing:-.035em; margin:0 0 16px; }
.case-deliverables p { font-size:17px; line-height:1.65; margin:0; color:#485344; }
.case-detail { padding:95px 0; background:#dfe5d9; color:#1c221d; }
.case-detail-grid { display:grid; grid-template-columns:.8fr 1.5fr; gap:65px; align-items:center; }
.case-detail h2 { font-size:clamp(38px,3.6vw,53px); line-height:1.07; letter-spacing:-.045em; }
.case-detail-copy p { font-size:17px; line-height:1.6; margin:26px 0; color:#47513f; max-width:30ch; }
.device-controls { display:flex; gap:8px; flex-wrap:wrap; }
.device-controls button { border:0; background:#cbd4c2; color:#27321f; border-radius:30px; padding:15px 20px; min-height:48px; font-size:16px; cursor:pointer; }
.device-controls button[aria-pressed="true"] { background:#202a1b; color:#f4f9eb; }
.device-controls button:hover { background:#becdb2; color:#162310; }
.device-controls button[aria-pressed="true"]:hover { background:#34492a; color:#fff; }
.case-capture-note { display:block; font-size:13px; line-height:1.5; color:#53604b; margin-top:27px; }
.device-viewer { min-height:575px; display:grid; align-items:center; }
.device-panel[hidden] { display:none; }
.device-panel:not([hidden]) { animation:device-appear .45s ease-out; }
.device-panel .case-mobile { width:246px; max-width:90%; margin:auto; }
.case-result { display:grid; grid-template-columns:1fr 1.2fr; gap:30px 90px; }
.case-result h2 { font-size:clamp(35px,3.5vw,50px); line-height:1.1; letter-spacing:-.045em; }
.case-impact { font-size:24px; line-height:1.6; margin:0; color:#2e382e!important; }
.case-estimate { grid-column:2; font-size:14px!important; line-height:1.6; margin:0!important; color:#5b6656!important; }
.case-next { padding:65px 0 80px; }
.case-next>p { font-size:16px; color:#acb9ac; margin:0 0 25px; }
.case-next>a { display:flex; justify-content:space-between; gap:25px; align-items:center; font-size:clamp(38px,5vw,72px); line-height:1.1; letter-spacing:-.045em; }
.case-next>a:hover { color:var(--acid); }
.case-next>a>span:last-child { color:var(--acid); }
.case-contact-person { display:flex; gap:19px; align-items:center; margin-bottom:35px; font-size:18px; line-height:1.5; }
.case-contact-person img { width:68px; height:80px; object-fit:cover; object-position:top; }
.case-contact-person small { font-size:14px; color:#42542f; }
.taste-page .contact h2 { font-size:clamp(48px,5vw,74px); line-height:1; letter-spacing:-.05em; }
.taste-page .contact p { font-size:17px; line-height:1.6; }
.taste-page .contact .fine { font-size:16px; }
.taste-page .contact-phone { border:0; }
.taste-page .contact-channels { font-size:15px; }
.taste-page .brief-box { border:0; border-radius:0; background:#e7f9c3; padding:38px; align-self:center; }
.taste-page .brief-box label { font-size:16px; margin:0 0 13px; }
.taste-page .brief-box label:not(:first-child) { margin-top:25px; }
.taste-page .brief-box select, .taste-page .brief-box textarea { font-size:16px; border-radius:0; }
.taste-page .brief-copy { font-size:14px; min-height:44px; }
.taste-page footer { padding:65px 0 35px; }
.taste-page .footer-top .brand { width:40%; }
.taste-page .footer-top .brand img { width:100%; height:auto; }
.taste-page .footer-top>a:not(.brand) { font-size:17px; }
.taste-page .footer-bottom { border:0; font-size:16px; color:#b7c3b7; }
.taste-page .footer-services { font-size:14px; border:0; }
@keyframes device-appear { from { opacity:.4; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.taste-arrived { animation:taste-arrive .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes taste-arrive { from { opacity:.25; translate:0 18px; } to { opacity:1; translate:0 0; } }

@media(min-width:1600px) { .portfolio-intro { min-height:720px; } }
@media(max-width:1100px) {
  .portfolio-intro { min-height:560px; gap:30px; }
  .portfolio-intro h1 { font-size:90px; }
  .portfolio-intro-copy>p { font-size:18px; }
  .portfolio-exhibit { aspect-ratio:.97; }
  .portfolio-exhibit>.case-desktop { top:15%; }
  .portfolio-exhibit>.case-mobile { width:34%; bottom:12%; }
  .exhibit-caption { font-size:13px; left:0; bottom:-5%; }
  .portfolio-toolbar { align-items:start; }
  .portfolio-filters { max-width:550px; justify-content:end; }
  .case-index-list .case-grid { gap:85px 35px; }
  .case-index-list .case-tile:nth-child(even) { margin-top:110px; }
  .case-tile-meta { font-size:13px; display:block; }
  .case-tile-meta>span:last-child { display:none; }
  .case-cover .case-mobile { border-radius:20px; }
  .case-cover .case-mobile .case-screen { border-radius:15px; }
  .case-heading-grid, .case-story, .case-deliverables, .case-result { gap:40px; }
  .case-detail-grid { gap:35px; }
  .case-stage>.case-mobile { top:0; }
  .case-detail h2 { font-size:38px; }
}
@media(max-width:800px) {
  .taste-page .section { padding:80px 0; }
  .portfolio-intro { padding:45px 0 70px; grid-template-columns:1fr 1.1fr; gap:22px; min-height:500px; }
  .portfolio-intro h1 { font-size:74px; }
  .portfolio-exhibit { aspect-ratio:.84; }
  .portfolio-exhibit>.case-mobile { width:39%; bottom:14%; }
  .portfolio-exhibit .case-mobile { border-radius:24px; border-width:5px; }
  .portfolio-exhibit .case-mobile .case-screen { border-radius:18px; }
  .portfolio-intro-copy>p { font-size:17px; }
  .portfolio-toolbar { display:block; margin-bottom:45px; }
  .portfolio-toolbar h2 { margin-bottom:25px; }
  .portfolio-filters { justify-content:start; max-width:none; }
  .portfolio-filters button { padding:13px 15px; font-size:14px; }
  .case-index-list { padding:60px 0 85px; }
  .case-index-list .case-grid { gap:65px 25px; }
  .case-index-list .case-tile:nth-child(even) { margin-top:85px; }
  .case-cover>.case-mobile { width:27%; right:6%; top:19%; }
  .case-index-list .case-tile:nth-child(4n+2) .case-cover>.case-mobile, .case-index-list .case-tile:nth-child(4n+3) .case-cover>.case-mobile { width:37%; top:12%; }
  .case-tile h3 { font-size:30px; }
  .case-tile p { font-size:16px; }
  .case-cover .case-mobile { border-radius:18px; border-width:3px; }
  .case-cover .case-mobile .case-screen { border-radius:14px; }
  .case-cover .phone-volume { left:-7px; }
  .case-cover .phone-power { right:-7px; }
  .case-heading-grid { grid-template-columns:1fr; gap:28px; }
  .case-heading h1 { font-size:64px; }
  .case-title-note { max-width:34ch; }
  .case-intro p { max-width:60ch; }
  .case-facts { padding:25px; gap:20px; }
  .case-facts strong { font-size:16px; }
  .case-showcase { padding:50px 0 20px; }
  .case-stage>.case-mobile { border-radius:28px; border-width:5px; }
  .case-stage>.case-mobile .case-screen { border-radius:22px; }
  .case-story, .case-deliverables, .case-result { grid-template-columns:1fr; gap:32px; }
  .case-story h2 br { display:none; }
  .case-deliverables { margin-top:70px; }
  .case-estimate { grid-column:1; }
  .case-detail-grid { grid-template-columns:1fr; gap:35px; }
  .case-detail-copy { max-width:540px; }
  .case-detail-copy p { max-width:45ch; }
  .case-detail h2 br { display:none; }
  .device-viewer { min-height:565px; }
  .taste-page .contact-grid { grid-template-columns:1fr; gap:45px; }
  .taste-page .contact p { max-width:540px; }
  .taste-page .brief-box { max-width:600px; }
  .taste-page .footer-top .brand { width:48%; }
}
@media(max-width:540px) {
  .portfolio-intro { grid-template-columns:1fr; padding:40px 0 45px; gap:30px; }
  .portfolio-intro h1 { font-size:82px; }
  .portfolio-intro-copy>p { max-width:30ch; margin:25px 0 12px; }
  .portfolio-jump { font-size:16px; }
  .portfolio-exhibit { width:100%; aspect-ratio:1.12; margin:0; }
  .portfolio-exhibit>.case-desktop { top:7%; width:91%; }
  .portfolio-exhibit>.case-mobile { width:30%; bottom:14%; left:3%; }
  .portfolio-exhibit .case-mobile { border-radius:22px; border-width:4px; }
  .portfolio-exhibit .case-mobile .case-screen { border-radius:17px; }
  .exhibit-caption { left:39%; bottom:1%; font-size:13px; }
  .case-index-list { padding:45px 0 75px; }
  .portfolio-toolbar h2 { font-size:36px; margin-bottom:20px; }
  .portfolio-filters { gap:2px; }
  .portfolio-filters button { padding:11px 13px; min-height:44px; font-size:13px; }
  .case-grid, .case-index-list .case-grid { display:grid; grid-template-columns:1fr; gap:55px; }
  .case-index-list .case-tile, .case-index-list .case-tile:nth-child(n), .case-index-list .case-grid[data-filtered="true"] .case-tile { grid-column:1; margin:0; }
  .case-index-list .case-tile:nth-child(even) { width:90%; justify-self:end; }
  .case-index-list .case-grid[data-filtered="true"] .case-tile { width:100%; }
  .case-cover { aspect-ratio:1.18; }
  .case-index-list .case-tile:nth-child(4n+2) .case-cover, .case-index-list .case-tile:nth-child(4n+3) .case-cover { aspect-ratio:1.08; }
  .case-cover>.case-mobile { width:29%; top:17%; right:7%; }
  .case-index-list .case-tile:nth-child(4n+2) .case-cover>.case-mobile, .case-index-list .case-tile:nth-child(4n+3) .case-cover>.case-mobile { width:33%; top:14%; }
  .case-cover .case-mobile { border-width:4px; border-radius:20px; }
  .case-cover .case-mobile .case-screen { border-radius:15px; }
  .case-cover .phone-volume { left:-8px; }
  .case-cover .phone-power { right:-8px; }
  .case-chrome { height:19px; gap:3px; padding:0 6px; }
  .case-chrome i { width:3px; height:3px; }
  .case-chrome span { font-size:7px; }
  .case-desktop[data-ui] { border-width:3px; border-radius:6px; }
  .case-tile-meta { margin:0 0 12px; font-size:14px; }
  .case-tile h3 { font-size:33px; }
  .case-domain { font-size:14px; }
  .case-heading { padding:28px 0 38px; }
  .case-back { margin-bottom:35px; font-size:15px; }
  .case-heading h1 { font-size:clamp(46px,12vw,60px); }
  .case-title-note { font-size:21px; margin:22px 0 0; }
  .case-intro p { font-size:17px; }
  .case-facts { grid-template-columns:1fr; margin-top:30px; padding:24px; gap:22px; }
  .case-facts span { font-size:14px; margin-bottom:6px; }
  .case-facts strong { font-size:17px; }
  .case-showcase { padding:35px 0 20px; }
  .case-stage { padding-bottom:10px; min-height:290px; }
  .case-stage>.case-desktop { width:93%; }
  .case-stage>.case-desktop .case-chrome { height:21px; }
  .case-stage>.case-mobile { width:29%; top:28%; right:3%; border-radius:20px; border-width:4px; }
  .case-stage>.case-mobile .case-screen { border-radius:15px; }
  .case-stage>.case-mobile .phone-volume { left:-8px; }
  .case-stage>.case-mobile .phone-power { right:-8px; }
  .case-stage-label { font-size:13px; max-width:59%; margin-top:35px; }
  .taste-page .section { padding:65px 0; }
  .case-story h2, .case-deliverables h2, .case-detail h2, .case-result h2 { font-size:38px; }
  .case-story>p, .case-impact { font-size:21px; line-height:1.6; }
  .case-deliverables h3 { font-size:27px; }
  .case-deliverables p { font-size:17px; }
  .case-detail { padding:65px 0 45px; }
  .case-detail h2 br { display:block; }
  .device-viewer { min-height:560px; }
  .device-panel .case-mobile { width:240px; }
  .case-next { padding:50px 0 60px; }
  .case-next>a { font-size:38px; }
  .taste-page .contact h2 { font-size:54px; }
  .taste-page .brief-box { padding:25px; }
  .taste-page footer { padding:50px 0 30px; }
  .taste-page .footer-top .brand { width:100%; margin-bottom:10px; }
  .taste-page .footer-top .brand img { width:100%; max-width:380px; }
}
@media(prefers-reduced-motion:reduce) {
  .case-cover .case-device, .portfolio-jump span { transition:none; }
  .device-panel:not([hidden]), .taste-arrived { animation:none; }
  .case-tile:hover .case-desktop, .case-tile:hover .case-mobile { transform:none; }
}