/* Karriaro's own visual signature leads the portfolio, while optional detail stays quiet. */
.hero-live-proof{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;margin-top:11px;padding-bottom:4px;border-bottom:1px solid #a6a99b;color:#454c41;font-size:12px;line-height:1.4;text-decoration:none}
.hero-proposition-side .art-price{display:block;width:max-content;min-height:0;margin-top:14px}
.hero-proposition-side .hero-live-proof{display:flex;margin-top:5px}
.hero-live-proof-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#a34f38;box-shadow:0 0 0 3px #a34f3822}
.hero-live-proof:hover,.hero-live-proof:focus-visible{color:#a34f38;border-color:#a34f38}
.hero-identity{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);align-items:center;min-height:230px;overflow:hidden;margin:10px 0 0;background:#242821;color:#f2eee5}
.hero-identity-drawing{height:230px;overflow:hidden;position:relative;background:radial-gradient(circle at 32% 50%,#48504155,transparent 55%)}
.hero-identity-drawing:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#242821);pointer-events:none}
.hero-identity svg{display:block;width:100%;height:100%}
.hero-identity-grid{fill:none;stroke:#e7e7d414;stroke-width:1}
.hero-identity-guide{fill:none;stroke:#e7e7d458;stroke-width:1;stroke-dasharray:3 5}
.hero-identity-stroke{fill:none;stroke:#f3eee4;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:400;stroke-dashoffset:0}
.hero-identity-stroke--two{stroke-width:4}
.hero-identity-stroke--three{stroke-width:4}
.hero-identity circle{fill:#bc7255}
.hero-identity-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:13px;min-height:230px;padding:24px clamp(24px,4vw,58px) 24px 10px}
.hero-identity-copy span,.hero-identity-copy small{color:#bcbeb0;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.hero-identity-copy strong{font-size:clamp(29px,3.2vw,48px);font-weight:470;line-height:1.02;letter-spacing:-.06em}
.hero-identity-copy small{padding-top:14px;border-top:1px solid #f2eee44d;letter-spacing:.05em;text-transform:none}
@media(prefers-reduced-motion:no-preference){.hero-identity-stroke--one{animation:draw-karriaro .85s .15s both}.hero-identity-stroke--two{animation:draw-karriaro .8s .55s both}.hero-identity-stroke--three{animation:draw-karriaro .8s .85s both}@keyframes draw-karriaro{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}}
.hero-more-worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.hero-more-world{--world:#e6e4dd;position:relative;display:grid;grid-template-rows:150px 1fr;min-width:0;overflow:hidden;background:var(--world);color:#262b28;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.hero-more-world--raum{--world:#dce9e9}.hero-more-world--halo{--world:#ead9d8}.hero-more-world--vecto{--world:#dce2e8}
.hero-more-world-image{display:block;min-width:0;overflow:hidden;background:#c8d1cf}
.hero-more-world-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.hero-more-world--raum .hero-more-world-image img{object-position:50% 47%}.hero-more-world--halo .hero-more-world-image img{object-position:50% 56%}.hero-more-world--vecto .hero-more-world-image img{object-position:50% 48%}
.hero-more-world-content{position:relative;display:flex;flex-direction:column;min-height:216px;padding:17px 22px 18px}
.hero-more-world-index{font-size:10px;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.hero-more-world h4{display:block;margin:17px 0 0;font-size:clamp(24px,2.35vw,34px);font-weight:500;line-height:1.08;letter-spacing:-.04em;hyphens:manual}
.hero-more-world small{display:block;margin-top:7px;max-width:28ch;font-size:13px;line-height:1.45}
.hero-more-world b{position:absolute;right:20px;bottom:18px;font-size:24px;font-weight:400}
.hero-more-world:hover,.hero-more-world:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #2428211a}
.hero-more-world:hover img,.hero-more-world:focus-visible img{transform:scale(1.035)}
.hero-more-world:focus-visible,.outcome-card:focus-visible,.motion-disclosure summary:focus-visible{outline:2px solid #a4533b;outline-offset:3px}
.care-section{margin-top:-20px;margin-bottom:clamp(40px,6vw,80px)}
.care-section .care-disclosure{margin-top:0}
.care-section .care-disclosure>summary{min-height:78px}
.signature-bridge-inner{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(35px,7vw,110px);align-items:end;padding-block:clamp(49px,5.5vw,82px)}
.signature-copy{max-width:none}
.signature-copy .eyebrow{margin-bottom:21px}
.signature-copy h2{max-width:10ch;margin:0;font-size:clamp(54px,6.2vw,91px)}
.signature-principle{padding-bottom:4px}
.signature-principle p{max-width:43ch;margin:0;color:#464942;font-size:clamp(18px,1.7vw,23px);line-height:1.5;letter-spacing:-.022em}
.signature-principle a{display:flex;align-items:center;justify-content:space-between;gap:35px;width:max-content;min-width:190px;max-width:100%;margin-top:24px;padding:9px 0;border-bottom:1px solid currentColor;font-size:14px;font-weight:580}
.signature-principle a span{font-size:23px;font-weight:400;line-height:1}
.signature-principle a:hover,.signature-principle a:focus-visible{color:#a34f38}
.design-lab-section{border-top:1px solid #c9c7bc}
.design-lab-section .design-experience{margin-top:35px}
.design-lab-section .design-intro{border-top:1px solid #b9bcb0;padding-top:17px}
.design-lab-section .design-frame{height:clamp(470px,48vw,690px)}
.motion-disclosure{margin-top:30px;border-block:1px solid #c8c8bc}
.motion-disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;cursor:pointer;list-style:none;font-size:15px;font-weight:570}
.motion-disclosure summary::-webkit-details-marker{display:none}
.motion-disclosure summary span{font-size:25px;font-weight:300;transition:transform .25s}
.motion-disclosure[open] summary span{transform:rotate(45deg)}
.motion-disclosure .motion-examples{margin:0;padding:12px 0 32px}
.motion-disclosure .motion-grid{gap:14px}
.motion-disclosure .work-visual{min-height:290px}
.services{border-top:1px solid #c9c7bc}
.outcome-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:37px}
.outcome-card{--outcome-bg:#e8e1d5;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--outcome-bg);color:#272a25;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.outcome-card--sell{--outcome-bg:#efe0df}.outcome-card--book{--outcome-bg:#dce9e9}.outcome-card--inquire{--outcome-bg:#dde4e9}
.outcome-card:hover,.outcome-card:focus-visible{transform:translateY(-5px);box-shadow:0 16px 35px #2428211e}
.outcome-number{display:block;padding:19px 21px 15px;font-size:10px;font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.outcome-photo{display:block;overflow:hidden;aspect-ratio:1.45;background:#d6d3ca}
.outcome-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.outcome-card:hover .outcome-photo img,.outcome-card:focus-visible .outcome-photo img{transform:scale(1.035)}
.outcome-body{display:block;flex:1;padding:22px 22px 27px}
.outcome-body strong{display:block;font-size:clamp(25px,2.45vw,36px);line-height:1.08;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.outcome-body small{display:block;margin-top:14px;max-width:39ch;color:#4a4e48;font-size:14px;line-height:1.55}
.outcome-open{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 22px;border-top:1px solid #77796d77;padding:15px 0 18px;font-size:13px;font-weight:620}
.outcome-open span{font-size:22px;font-weight:400}
.outcome-disclosure{margin:14px 0 0;color:#6b6c63;font-size:12px;line-height:1.5}
.outcome-report{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(25px,5vw,75px);align-items:start;margin-top:clamp(65px,8vw,110px);padding:clamp(25px,4vw,58px);background:#2b352e;color:#f2efe5}
.outcome-report-intro>span{display:block;margin-bottom:23px;color:#c7d0bf;font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.outcome-report-intro h3{max-width:12ch;margin:0;font-size:clamp(38px,4.2vw,65px);font-weight:460;line-height:1.03;letter-spacing:-.06em}
.outcome-report-intro p{max-width:37ch;margin:24px 0 0;color:#d3d8ce;font-size:15px;line-height:1.62}
.outcome-report .feature-disclosure{border:1px solid #f2efe585;min-width:0}
.outcome-report .feature-disclosure>summary{padding:24px 54px 24px 25px}
.outcome-report .feature-disclosure>summary>span{font-size:21px;color:#f2efe5}
.outcome-report .feature-disclosure>summary small{color:#d2dace;font-size:13px}
.outcome-report .feature-disclosure>summary b{right:20px}
.outcome-report .feature-disclosure[open] .feature-disclosure-content{grid-template-columns:1fr}
.outcome-report .feature-disclosure .report-example{min-height:0}
.outcome-report .feature-disclosure .capability-copy{padding-top:4px}
.outcome-report .feature-disclosure .capability-copy p{color:#e9eee4}
.outcome-report .feature-disclosure .capability-copy .capability-clarification{color:#c5d0c3}
.outcome-report .feature-disclosure .text-link{color:#f2efe5}
.outcome-footer{max-width:75ch;margin:21px 0 0;color:#6b6c63;font-size:13px;line-height:1.55}
@media(max-width:900px){.outcome-grid{gap:9px}.outcome-body{padding:18px}.outcome-open{margin-inline:18px}.outcome-body strong{font-size:25px}.outcome-report{grid-template-columns:1fr}.outcome-report-intro h3{max-width:none}}
@media(max-width:760px){.hero-identity{grid-template-columns:1fr;min-height:0;margin-top:22px}.hero-identity-drawing{height:145px}.hero-identity-drawing:after{background:linear-gradient(0deg,#242821,transparent 60%)}.hero-identity svg{max-width:390px}.hero-identity-copy{min-height:0;gap:8px;padding:2px 21px 21px}.hero-identity-copy strong{font-size:33px}.hero-identity-copy small{padding-top:9px}.hero-more-worlds{grid-template-columns:1fr;gap:7px}.hero-more-world{min-height:100px;padding:14px 18px 15px}.hero-more-world h4{margin-top:9px;font-size:26px}.hero-more-world small{margin-top:3px;font-size:12px}.hero-more-world b{right:16px;bottom:18px}.signature-bridge-inner{grid-template-columns:1fr;gap:21px;padding-block:43px 49px}.signature-copy h2{font-size:clamp(49px,11vw,70px)}.signature-principle p{font-size:17px}.signature-principle a{margin-top:17px}.design-lab-section .design-frame{height:490px}.outcome-grid{grid-template-columns:1fr;gap:10px}.outcome-card{display:grid;grid-template-columns:42% 58%;grid-template-rows:auto 1fr auto;min-height:210px}.outcome-number{grid-column:1/-1;padding:12px 14px}.outcome-photo{grid-column:1;grid-row:2/4;aspect-ratio:auto;height:100%}.outcome-body{grid-column:2;grid-row:2;padding:13px 14px 8px}.outcome-body strong{font-size:clamp(20px,5.4vw,27px)}.outcome-body small{font-size:11px;line-height:1.35;margin-top:8px}.outcome-open{grid-column:2;grid-row:3;margin:0 14px;padding:9px 0 11px;font-size:10px}.outcome-open span{font-size:18px}.outcome-report{margin-top:65px;padding:25px 18px}.outcome-report-intro h3{font-size:40px}.outcome-report .feature-disclosure[open] .feature-disclosure-content{padding:0 13px 16px}.outcome-report .feature-disclosure .report-example{padding:14px}.outcome-report .feature-disclosure .report-mail{padding:16px}.motion-disclosure .motion-examples{grid-template-columns:1fr}.motion-disclosure .motion-grid{grid-template-columns:1fr}.motion-disclosure .work-visual{min-height:250px}}
@media(max-width:760px){.signature-bridge-inner{grid-template-columns:minmax(0,1fr)}.signature-copy{min-width:0}.signature-principle a{min-width:0}}
@media(max-width:410px){.hero-identity-drawing{height:130px}.hero-identity-copy strong{font-size:31px}.outcome-card{grid-template-columns:39% 61%}.outcome-body strong{font-size:20px}.outcome-body small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-more-world,.outcome-card,.outcome-photo img,.motion-disclosure summary span{transition:none}}

/* The three secondary concepts still show the actual website, at a quieter scale. */
@media(max-width:760px){
  .hero-more-world{grid-template-columns:38% minmax(0,1fr);grid-template-rows:1fr;min-height:164px;padding:0}
  .hero-more-world-image{min-height:164px}
  .hero-more-world-content{min-height:164px;padding:17px 20px 17px 16px}
  .hero-more-world h4{margin-top:12px;font-size:clamp(22px,5.5vw,30px)}
  .hero-more-world small{margin-top:6px;max-width:19ch;font-size:13px;line-height:1.35}
  .hero-more-world b{right:16px;bottom:13px;font-size:21px}
  .outcome-card{grid-template-columns:35% minmax(0,1fr);min-height:236px}
  .outcome-number{font-size:11px;line-height:1.4}
  .outcome-body{padding:16px 15px 9px}
  .outcome-body strong{font-size:clamp(21px,5.4vw,27px);line-height:1.08}
  .outcome-body small{font-size:14px;line-height:1.45;margin-top:10px}
  .outcome-open{margin-inline:15px;padding:10px 0 13px;font-size:13px;line-height:1.3}
  .outcome-open span{font-size:21px}
  .outcome-disclosure{font-size:13px}
}
@media(max-width:370px){
  .hero-more-world{grid-template-columns:34% minmax(0,1fr)}
  .outcome-card{grid-template-columns:30% minmax(0,1fr);min-height:250px}
  .outcome-body strong{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.hero-more-world-image img{transition:none}}


/* Each saved style belongs to its own website, before the next group starts. */
.hero-world-entry{scroll-margin-top:120px;display:flex;flex-direction:column;grid-column:span 3;min-width:0}
.hero-world-entry--wide{grid-column:1/-1}
.hero-world-entry>.hero-world{flex:1;margin-bottom:0}
.hero-world-save{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;padding:13px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:500 12px/1.4 var(--sans);text-align:left;cursor:pointer}
.hero-world-save b{flex:none;font-size:18px;font-weight:400}
.hero-world-save:hover,.hero-world-save[aria-pressed=true]{color:#a04432}
.hero-world-save:focus-visible{outline:2px solid #a04432;outline-offset:4px}
.hero-more-intro{margin-top:34px;padding:23px 0 6px;border-top:1px solid var(--line)}
.hero-more-intro h3{font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.25;letter-spacing:-.025em;margin:0;scroll-margin-top:130px}
.hero-more-world h4>span{display:block;font-size:.68em;font-weight:450;letter-spacing:-.015em;margin-bottom:5px}
.hero-more-world-content>small{margin-bottom:18px}
.hero-more-world-action{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:auto;padding-top:10px;border-top:1px solid #262b2855;font-size:12px;line-height:1.35}
.hero-more-world-action b{position:static;flex:none;font-size:21px}
@media(max-width:760px){
  .hero-world-entry{margin-bottom:20px}
  .hero-world-entry:last-child{margin-bottom:0}
  .hero-more-intro{margin-top:28px;padding-top:22px}
  .hero-more-world-content{min-height:190px;padding:16px}
  .hero-more-world-index{font-size:9px;letter-spacing:.07em}
  .hero-more-world-content>small{font-size:12px;margin-bottom:12px}
  .hero-more-world-action{font-size:11px;gap:8px}
}