/* Selected work: the preview and its description form one readable card. */
.portfolio-section .section-head{margin-bottom:42px}
.portfolio-section .section-aside{font-size:16px;line-height:1.65;max-width:340px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
.work-card{min-width:0;border:1px solid #d9d3c8;border-radius:12px;overflow:hidden;background:#faf8f3;display:flex;flex-direction:column;scroll-margin-top:30px}
.work-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr}
.work-preview-link{display:block;position:relative;overflow:hidden;min-width:0;background:#e7e5db}
.work-preview-link:focus-visible{outline-offset:-5px;outline-width:3px}
.work-visual{container-type:inline-size;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.6;padding:6%;overflow:hidden}
.work-visual-pio{background:#dfe5dc}
.work-visual-servio{background:#e5e1db}
.website-preview{width:100%;border:1px solid #00000016;border-radius:7px;overflow:hidden;background:white;box-shadow:0 14px 30px -10px #24332930;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.website-preview>img{width:100%;height:auto;display:block}
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#fcfbf8;border-bottom:1px solid #ddd9d0;font-size:10px;font-family:var(--font);letter-spacing:.02em;color:#64645c}
.preview-dots{display:flex;gap:4px;width:29px}
.preview-dots i{width:5px;height:5px;border-radius:50%;background:#cbc6bd}
.preview-bar>span:last-child{width:29px;text-align:right;font-size:13px}
.work-preview-arrow{position:absolute;right:20px;bottom:20px;width:45px;height:45px;display:grid;place-items:center;border:1px solid #ffffff80;border-radius:50%;background:#fbf9f0;box-shadow:0 3px 15px #0000000c;transition:background .25s,transform .25s;opacity:0;transform:translate(-4px,4px)}
.work-preview-arrow svg{width:19px;height:19px}
.work-card-copy{padding:30px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.work-card-top{display:flex;justify-content:space-between;gap:16px;align-items:center;width:100%;font-size:12px;line-height:1.4;color:#635f55}
.work-card-number{font-family:var(--display);font-size:12px;font-variant-numeric:tabular-nums;color:#827866}
.work-card h3{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.045em;margin:18px 0 14px;overflow-wrap:anywhere}
.work-card h3 a{display:block;transition:color .2s}
.work-card h3 a:hover{color:var(--accent-ink)}
.work-card-copy>p{font-size:16px;line-height:1.7;color:#625f56;margin:0;max-width:42ch}
.work-card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.work-card-tags span{font-size:11px;line-height:1.4;padding:6px 10px;border:1px solid #ded7c9;border-radius:4px;color:#67604e}
.work-card-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #dcd6cc;margin-top:28px;padding-top:17px;width:100%}
.work-card-actions a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;line-height:1.3;transition:color .2s}
.work-card-actions a svg{width:18px;height:18px;flex-shrink:0;transition:transform .25s}
.work-details-link{font-weight:600;color:#292c25}
.work-live-link{color:#71624b}
.work-card-actions a:hover{color:#957247}
.work-card-actions a:hover svg{transform:translateX(3px)}
.work-card:first-child .work-card-copy{justify-content:center;padding:clamp(28px,3.5vw,54px)}
.work-card:first-child h3{font-size:clamp(36px,3.9vw,60px);margin-top:25px}
.work-card:first-child .work-visual{height:100%;min-height:420px;aspect-ratio:1.45}
.work-card:first-child .work-card-actions{margin-top:30px}
.work-card:not(:first-child) .work-card-copy{flex:1}
.work-card:not(:first-child) .work-card-tags{margin-bottom:28px}
.work-card:not(:first-child) .work-card-actions{margin-top:auto}

.portfolio-intro{padding-top:68px;padding-bottom:36px}
.portfolio-intro h1{font-size:clamp(52px,6.6vw,100px);line-height:1.04;letter-spacing:-.055em}
.portfolio-intro>p{font-size:17px;line-height:1.7;max-width:590px;margin-top:26px}
.work-index{padding-top:0;padding-bottom:65px}
.portfolio-jump-nav{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line);padding:13px 0 24px;margin-bottom:15px}
.portfolio-jump-nav a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px}
.portfolio-jump-nav a>span{font-size:10px;color:#897b66;font-variant-numeric:tabular-nums}
.portfolio-jump-nav a>svg{width:15px;height:15px;color:#8a785b;transition:transform .2s}
.portfolio-jump-nav a:hover>svg{transform:translateX(4px)}
.portfolio-more{display:flex;align-items:center;justify-content:space-between;gap:40px;border:0;border-top:1px solid var(--line);padding:45px 0 0;margin-top:50px}
.portfolio-more p{font-size:clamp(35px,4vw,58px);line-height:1.1;margin:20px 0 0}
.portfolio-more .button{font-size:13px;gap:25px;flex-shrink:0}
.portfolio-more .eyebrow{font-size:10px}
.concept-collection{border-top:0;padding:0 0 70px}
.concept-disclosure{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.concept-disclosure>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:28px 0;cursor:pointer;font-family:var(--display);font-size:26px;letter-spacing:-.03em}
.concept-disclosure>summary::-webkit-details-marker{display:none}
.concept-disclosure small{display:block;font-family:var(--font);font-size:9px;letter-spacing:.15em;color:#756b59;margin-bottom:10px}
.concept-toggle{display:grid;place-items:center;width:42px;height:42px;border:1px solid #cfc6b6;border-radius:50%;font-size:23px;flex-shrink:0;transition:transform .2s}
.concept-disclosure[open] .concept-toggle{transform:rotate(45deg)}
.concept-content>p{font-size:15px;line-height:1.7;color:var(--muted);max-width:620px;margin:3px 0 30px}
.live-case-cover{border-radius:12px;overflow:hidden;padding:0}
.live-case-cover .work-visual{aspect-ratio:auto;padding:5%}
.live-case-cover .website-preview{max-width:1280px}
.live-case-cover .preview-bar{font-size:12px;padding:13px 20px}
.live-case-intro .case-summary>p{font-size:16px!important;line-height:1.7}
.live-case-intro .case-summary>span{font-size:12px;line-height:1.5}
.live-project-features p{font-size:16px;line-height:1.7}

@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .work-preview-link:hover .website-preview{transform:translateY(-5px)}
 .work-preview-link:hover .work-preview-arrow,.work-preview-link:focus-visible .work-preview-arrow{opacity:1;transform:translate(0,0)}
}
@media(max-width:1099px){
 .work-grid{gap:22px}
 .work-card:first-child{grid-template-columns:1.1fr 1fr}
 .work-card:first-child .work-card-copy{padding:28px}
 .work-card:first-child .work-visual{min-height:370px}
 .work-card-copy{padding:25px}
 .work-card-actions{gap:10px}
 .work-card-actions a{font-size:12px;gap:7px}
 .portfolio-more{align-items:flex-start}
 .portfolio-more .button{max-width:310px}
}
@media(max-width:799px){
 .work-card:first-child{display:flex}
 .work-card:first-child .work-visual{aspect-ratio:1.7;min-height:0}
 .work-card:first-child .work-card-copy{padding:28px}
 .work-card:first-child h3{font-size:38px;margin-top:18px}
 .work-card-copy{padding:22px}
 .work-card h3{font-size:30px}
 .work-card-copy>p{font-size:15px}
 .work-card-top{font-size:11px;gap:10px}
 .work-card-tags{gap:5px}
 .work-card-tags span{font-size:10px;padding:5px 7px}
 .work-card-actions{gap:4px 15px;margin-top:22px}
 .work-card-actions a{font-size:12px}
 .preview-bar{padding:7px 8px;font-size:8px;gap:5px}
 .preview-dots{width:20px;gap:3px}.preview-dots i{width:4px;height:4px}
 .preview-bar>span:last-child{width:20px;font-size:10px}
 .portfolio-more{flex-direction:column;gap:25px}
 .portfolio-more .button{max-width:none}
}
@media(max-width:600px){
 .portfolio-section .section-head{margin-bottom:30px}
 .portfolio-section .section-aside{font-size:15px;line-height:1.7}
 .work-grid{grid-template-columns:1fr;gap:24px}
 .work-card{border-radius:9px}
 .work-card:first-child{grid-column:auto}
 .work-card:first-child .work-visual{aspect-ratio:1.45;min-height:0;padding:7%}
 .work-visual{aspect-ratio:1.55;padding:5%}
 .work-card-copy,.work-card:first-child .work-card-copy{padding:23px 21px}
 .work-card h3,.work-card:first-child h3{font-size:31px;line-height:1.14;margin:15px 0 12px}
 .work-card-top{font-size:12px}
 .work-card-copy>p{font-size:16px;line-height:1.65;max-width:none}
 .work-card-tags{margin-top:17px;gap:6px}
 .work-card-tags span{font-size:10px;padding:6px 8px}
 .work-card-actions,.work-card:first-child .work-card-actions{margin-top:22px;padding-top:12px;gap:6px}
 .work-card-actions a{font-size:12px;gap:6px;min-height:44px}
 .work-card-actions a svg{width:16px;height:16px}
 .preview-bar{font-size:8px}
 .portfolio-intro{padding-top:40px;padding-bottom:26px}
 .portfolio-intro h1{font-size:clamp(41px,11vw,64px)}
 .portfolio-intro>p{font-size:16px;line-height:1.7;margin-top:22px}
 .portfolio-jump-nav{gap:2px 16px;padding:10px 0 18px;margin-bottom:10px}
 .portfolio-jump-nav a{font-size:11px;gap:6px;min-height:38px}
 .portfolio-jump-nav a>span{font-size:9px}
 .portfolio-jump-nav a>svg{width:12px;height:12px}
 .portfolio-more{margin-top:35px;padding-top:32px}
 .portfolio-more p{font-size:38px}
 .portfolio-more .button{font-size:11px;gap:18px;padding:17px}
 .portfolio-more .eyebrow{font-size:9px}
 .work-index{padding-bottom:45px}
 .concept-collection{padding-bottom:45px}
 .concept-disclosure>summary{font-size:24px;padding:23px 0}
 .concept-disclosure small{font-size:8px}
 .concept-content>p{font-size:14px}
 .live-case-cover{border-radius:8px}
 .live-case-cover .work-visual{padding:4%}
 .live-case-cover .preview-bar{font-size:8px;padding:8px 10px}
 .live-project-features p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 .work-card *, .portfolio-jump-nav *{transition:none!important;animation:none!important}
}

/* KM FLOTA: public product photography and an accessible view selector. */
.work-card-fleet:first-child{grid-template-columns:1.5fr 1fr}
.work-visual-fleet{background:#2a342c;background-image:radial-gradient(ellipse at 10% 0,#65745a60,transparent 70%);flex-direction:column;gap:18px;padding:6%}
.work-visual-fleet .website-preview{box-shadow:0 18px 45px #0c19195c;border-color:#f8f4e736}
.fleet-cover-caption{width:100%;display:flex;justify-content:space-between;gap:14px;font-size:9px;letter-spacing:.11em;line-height:1.5;color:#d0d7c3}
.work-card-fleet:first-child h3{margin-top:22px}
.fleet-case-intro .case-heading h1{font-size:clamp(64px,9vw,132px)}
.fleet-case-intro .case-heading>div>p{font-family:var(--serif);font-style:italic;color:var(--accent-ink);font-size:clamp(29px,3vw,43px)}
.fleet-explorer{background:#222b25;color:#f3efe7;padding:78px 0 70px;margin:0 0 80px}
.fleet-explorer :focus-visible{outline-color:#d4bd99}
.fleet-explorer-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:38px}
.fleet-explorer .eyebrow{font-size:10px;color:#d4c09f}
.fleet-explorer-heading h2{font-family:var(--display);font-weight:400;font-size:clamp(42px,5vw,70px);line-height:1.08;letter-spacing:-.045em;margin-top:23px}
.fleet-explorer-heading h2 em{font-family:var(--serif);font-weight:400;font-size:1.14em;color:#d4bd99}
.fleet-explorer-heading>p{font-size:15px;line-height:1.7;color:#c3c9bc;max-width:330px;margin-bottom:7px}
.fleet-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #a9b69b40;border-radius:6px;overflow:hidden}
.fleet-tabs button{display:flex;align-items:center;gap:15px;min-height:64px;padding:18px 22px;border:0;border-right:1px solid #a9b69b40;background:transparent;color:#e0e4d8;font:500 16px var(--font);cursor:pointer;transition:color .2s,background .2s}
.fleet-tabs button:last-child{border-right:0}
.fleet-tabs button>span:first-child{font-size:11px;opacity:.65}
.fleet-tabs button>span:last-child{margin-left:auto;font-size:18px;font-weight:400}
.fleet-tabs button:hover{background:#ffffff0b}
.fleet-tabs button[aria-selected=true]{background:#d4bd99;color:#222b25}
.fleet-tabs button:focus-visible{outline:2px solid #f3efe7;outline-offset:-5px}
.fleet-explorer-panel{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:60px;padding-top:40px;animation:fleet-view-in .3s ease-out}
.fleet-explorer-panel[hidden]{display:none}
.fleet-view-copy{max-width:430px}
.fleet-view-number{color:#b5c0aa;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.fleet-view-copy h3{font:400 clamp(30px,3vw,43px)/1.12 var(--display);letter-spacing:-.04em;margin:22px 0}
.fleet-view-copy>p{font-size:16px;line-height:1.75;color:#c3c9bc}
.fleet-view-copy ul{list-style:none;padding:0;margin:25px 0 0;display:grid;gap:14px}
.fleet-view-copy li{display:flex;align-items:center;gap:13px;font-size:13px;color:#e0e4d8;line-height:1.5}
.fleet-view-copy li:before{content:'↗';color:#d4bd99;font-size:17px}
.fleet-view-figure{margin:0;min-width:0}
.fleet-screen-crop{aspect-ratio:660/590;overflow:hidden;position:relative;border-radius:9px;background:#f4f7f1;border:1px solid #c5d1bc}
.fleet-screen-crop>img{position:absolute;width:204.242424%;max-width:none;height:auto;left:-98.484848%;top:-25.423729%}
.fleet-view-figure figcaption{font-size:11px;line-height:1.5;color:#b7c1ae;margin-top:16px;text-align:center}
@keyframes fleet-view-in{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1099px){
 .work-card-fleet:first-child{grid-template-columns:1.2fr 1fr}
 .fleet-explorer-panel{gap:35px;grid-template-columns:.9fr 1.1fr}
 .fleet-view-copy h3{font-size:32px}
 .fleet-tabs button{font-size:15px;padding:16px 18px;min-height:58px}
 .fleet-cover-caption{font-size:8px;letter-spacing:.07em}
}
@media(max-width:799px){
 .work-card-fleet:first-child .work-visual{aspect-ratio:1.48;min-height:0}
 .fleet-explorer{padding:55px 0;margin-bottom:60px}
 .fleet-explorer-heading{display:block;margin-bottom:30px}
 .fleet-explorer-heading>p{margin-top:22px;font-size:15px}
 .fleet-explorer-panel{grid-template-columns:1fr;gap:30px;padding-top:30px}
 .fleet-view-figure{grid-row:1}
 .fleet-view-copy{max-width:560px}
 .fleet-view-copy h3{margin:15px 0;font-size:34px}
 .fleet-screen-crop{max-width:640px;margin-inline:auto}
}
@media(max-width:600px){
 .work-card-fleet:first-child .work-visual{padding:6% 5%;aspect-ratio:1.35;gap:13px}
 .fleet-cover-caption{font-size:7px;letter-spacing:.05em;gap:8px}
 .fleet-case-intro .case-heading h1{font-size:18vw}
 .fleet-explorer-heading h2{font-size:42px;margin-top:20px}
 .fleet-explorer .eyebrow{font-size:9px}
 .fleet-tabs button{font-size:13px;padding:13px 11px;min-height:52px;gap:8px}
 .fleet-tabs button>span:first-child{font-size:9px}
 .fleet-tabs button>span:last-child{display:none}
 .fleet-view-copy h3{font-size:30px}
 .fleet-view-copy>p{font-size:16px;line-height:1.7}
 .fleet-view-copy li{font-size:14px}
 .fleet-view-figure figcaption{font-size:10px}
 .fleet-explorer-panel{padding-top:24px}
}
@media(prefers-reduced-motion:reduce){.fleet-explorer-panel{animation:none}.fleet-tabs button{transition:none}}