/* ============ Case study pages ============ */
.case{padding-top:0}
.case-hero{padding:160px var(--pad) 80px;max-width:var(--max);margin:0 auto}
.case-hero__meta{display:flex;justify-content:space-between;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:18px;flex-wrap:wrap;gap:10px}
.case-hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(72px,16vw,240px);line-height:.9;letter-spacing:-.03em;margin:30px 0 24px}
.case-hero__sub{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(20px,2.6vw,36px);line-height:1.25;max-width:24ch;color:#2c2a23}

/* logo stage */
.logo-stage{margin-top:70px;background:#163a4d;color:#f4f1ea;border-radius:4px;padding:clamp(40px,8vw,110px);display:flex;flex-direction:column;align-items:center;gap:36px}
.golfo-mark{width:min(460px,70vw);height:auto;color:#f4f1ea}
.golfo-line{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3s cubic-bezier(.7,0,.2,1) forwards}
.golfo-sun{opacity:0;animation:fadein .6s ease 2.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.logo-word{display:flex;align-items:baseline;gap:14px;font-family:var(--serif)}
.logo-word__name{font-size:clamp(34px,5vw,64px);letter-spacing:-.02em}
.logo-word__tag{font-size:14px;letter-spacing:.18em;text-transform:uppercase;opacity:.7;font-family:var(--sans)}

/* generic case blocks */
.case-block{padding:clamp(70px,11vh,150px) 0}
.case-block--tint{background:var(--paper-2)}
.case-grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(30px,6vw,90px);max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.case-grid__label{font-size:13px;letter-spacing:.05em;color:var(--accent);text-transform:uppercase;padding-top:6px}
.case-grid__body{max-width:62ch}
.case-lead{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.2;margin-bottom:26px}
.case-lead em,.case-grid__body em{color:var(--accent);font-family:var(--serif)}
.case-grid__body p{font-size:clamp(15px,1.2vw,18px);color:#2c2a23;margin-bottom:18px;line-height:1.6}
.muted{color:var(--ink-soft);font-size:.85em}

/* mark showcase */
.mark-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--max);margin:60px auto 0;padding:0 var(--pad)}
.mark-tile{aspect-ratio:4/3;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px}
.mark-tile svg{width:70%;height:auto}
.mark-tile span{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mark-tile--ink{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.mark-tile--ink span{color:var(--ink-soft)}
.mark-tile--sea{background:#163a4d;color:#f4f1ea}
.mark-tile--sea span{opacity:.7}
.mark-tile--sun{background:#e07a3f;color:#fff}
.mark-tile--sun span{opacity:.85}

/* swatches */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--max);margin:60px auto 50px;padding:0 var(--pad)}
.swatch{aspect-ratio:3/4;background:var(--c);border-radius:3px;border:1px solid var(--line);position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.swatch__hex{font-size:12px;letter-spacing:.05em;mix-blend-mode:difference;color:#fff}
.swatch__name{font-family:var(--serif);font-size:18px;mix-blend-mode:difference;color:#fff}

/* type spec */
.type-spec{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.type-spec__row{display:flex;align-items:baseline;gap:30px;border-top:1px solid var(--line);padding:26px 0}
.type-spec__row:last-child{border-bottom:1px solid var(--line)}
.type-spec__meta{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);min-width:160px}
.type-spec__sample{font-size:clamp(28px,5vw,56px);line-height:1}

/* applications */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--max);margin:60px auto 0;padding:0 var(--pad)}
.app{display:flex;flex-direction:column;gap:16px}
.app figcaption{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.app--key .app__card{aspect-ratio:1.6/1;background:#163a4d;border-radius:10px;color:#f4f1ea;position:relative;display:flex;align-items:center;justify-content:center;padding:30px}
.app--key svg{width:75%}
.app__hole{position:absolute;top:16px;right:16px;width:16px;height:16px;border:2px solid rgba(244,241,234,.5);border-radius:50%}
.app--sign .app__plate{aspect-ratio:1.6/1;background:var(--paper);border:1px solid var(--line);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.app--sign .app__plate span{font-family:var(--serif);font-size:clamp(28px,4vw,46px);letter-spacing:.04em}
.app--sign .app__plate i{width:60%;height:2px;background:var(--accent)}
.app--web .app__screen{aspect-ratio:1.6/1;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.app--web .app__bar{display:flex;gap:6px;padding:12px}
.app--web .app__bar i{width:8px;height:8px;border-radius:50%;background:#ddd}
.app--web .app__hero{flex:1;background:linear-gradient(160deg,#163a4d,#1d4a5f);color:#f4f1ea;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.app--web .app__hero b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,40px)}
.app--web .app__hero small{font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}

/* next */
.case-next{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;max-width:var(--max);margin:0 auto;padding:90px var(--pad);border-top:1px solid var(--line)}
.case-next__pre{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.case-next__title{font-family:var(--serif);font-size:clamp(40px,7vw,90px);letter-spacing:-.02em}
.case-next__link:hover .case-next__title{color:var(--accent)}
.case-next__cta{font-size:14px;border:1px solid var(--ink);border-radius:40px;padding:12px 22px;transition:.35s}
.case-next__cta:hover{background:var(--ink);color:var(--paper)}

/* ===== Sfusato ===== */
.sfu-title{color:#2f5233}
.bottle-stage{margin-top:70px;background:#f3ecd9;border-radius:4px;padding:clamp(40px,7vw,90px) 20px;display:flex;flex-direction:column;align-items:center;gap:26px;overflow:hidden}
.bottle{position:relative;width:200px;filter:drop-shadow(0 30px 40px rgba(47,82,51,.22))}
.bottle__cap{width:54px;height:34px;background:#2f5233;border-radius:4px 4px 2px 2px;margin:0 auto}
.bottle__neck{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:46px;height:54px;background:linear-gradient(90deg,#cdd9b8,#e7eed8 40%,#cdd9b8);z-index:-1}
.bottle__body{width:200px;height:320px;margin-top:-8px;background:linear-gradient(90deg,#bcd197,#e3edcb 45%,#bcd197);border-radius:18px 18px 26px 26px;display:flex;align-items:center;justify-content:center;position:relative}
.bottle__body::before{content:"";position:absolute;left:18px;top:30px;width:14px;height:78%;background:rgba(255,255,255,.45);border-radius:10px;filter:blur(2px)}
.bottle__label{background:#f7f2e6;width:150px;padding:22px 12px;border-radius:3px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1px solid rgba(47,82,51,.25);box-shadow:0 4px 12px rgba(47,82,51,.08)}
.bottle__lemon{color:#e9c93b}.bottle__lemon svg{width:54px}
.bottle__name{font-family:var(--serif);font-size:30px;color:#2f5233;line-height:1}
.bottle__sub{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#2f5233}
.bottle__abv{font-size:8px;letter-spacing:.1em;color:var(--ink-soft);margin-top:4px}
.bottle-stage__note{font-size:12px;color:var(--ink-soft);font-style:italic}

.sfu-hero-img{margin-top:70px;border-radius:4px;overflow:hidden}
.sfu-hero-img img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.sfu-frames{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:var(--max);margin:60px auto 0;padding:0 var(--pad)}
.sfu-shot{display:flex;flex-direction:column;gap:14px}
.sfu-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;display:block}
.sfu-shot figcaption{font-size:12px;letter-spacing:.04em;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}
.sfu-bleed{margin-top:0}
.sfu-bleed img{width:100%;display:block;aspect-ratio:2/1;object-fit:cover}

/* full-bleed lifestyle band (Phisios "in use") */
.app-bleed{margin:0}
.app-bleed img{width:100%;display:block}
.app-bleed figcaption{max-width:var(--max);margin:14px auto 0;padding:0 var(--pad);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}

/* ===== Quartiere ===== */
.qua-title{color:#d8231d}
.qua-stage{margin-top:70px;background:#1a1714;border-radius:4px;padding:clamp(40px,7vw,90px) 20px;display:flex;flex-direction:column;align-items:center;gap:24px}
.mag-cover{width:min(380px,80vw);aspect-ratio:3/4;background:#efe9dc;padding:26px 24px;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative}
.mag-cover__masthead{font-family:var(--serif);font-weight:600;font-size:clamp(30px,6vw,46px);color:#d8231d;letter-spacing:-.02em;line-height:1}
.mag-cover__rule{height:3px;background:#1a1714;margin:10px 0}
.mag-cover__meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#1a1714}
.mag-cover__art{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:10px 0}
.mag-cover__big{font-family:var(--serif);font-weight:700;font-size:clamp(56px,15vw,104px);line-height:.82;color:#1a1714;letter-spacing:-.01em}
.mag-cover__kicker{font-family:var(--serif);font-style:italic;font-size:15px;color:#1a1714;margin-top:14px}
.mag-cover__foot{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#1a1714;border-top:1px solid #1a1714;padding-top:8px}
.qua-stage__note{font-size:12px;color:rgba(239,233,220,.6);font-style:italic}

.type-poster{max-width:var(--max);margin:60px auto 0;padding:clamp(30px,6vw,70px) var(--pad);background:#d8231d;color:#efe9dc;border-radius:4px;text-align:center}
.type-poster__char{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(120px,28vw,320px);line-height:.8}
.type-poster__set{display:block;font-family:var(--serif);font-size:clamp(20px,3vw,34px);margin:24px 0 14px;opacity:.95}
.type-poster__line{display:block;font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}

.spread{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:var(--max);margin:60px auto 0;padding:0 var(--pad)}
.spread__page{background:#efe9dc;aspect-ratio:3/4;padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;color:#1a1714;position:relative}
.spread__folio{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#d8231d;margin-bottom:auto}
.spread__head{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.5vw,56px);line-height:.95;letter-spacing:-.01em;margin:14px 0 16px}
.spread__cols{column-count:2;column-gap:16px;font-size:11px;line-height:1.5}
.spread__cols p{margin-bottom:8px}
.spread__page--img{padding:0;overflow:hidden}
.spread__photo{flex:1;width:100%;background:repeating-linear-gradient(45deg,#d8d1c2,#d8d1c2 10px,#cfc8b8 10px,#cfc8b8 20px);display:flex;align-items:center;justify-content:center}
.spread__photo span{font-size:11px;letter-spacing:.2em;color:#9a9384}
.spread__cap{font-size:10px;color:#1a1714;background:#efe9dc;padding:10px}
/* ===== App / UI-UX case (real project) ===== */
.badge-real{color:#34a853;font-weight:600;letter-spacing:.02em}
.ph-tag{display:inline-block;vertical-align:super;font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:2px 8px;margin-left:14px}
.case-title-row{display:flex;align-items:center;gap:clamp(16px,2.5vw,30px);margin:30px 0 24px}
.app-icon{width:clamp(64px,9vw,108px);height:auto;border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.22);flex-shrink:0}
.case-title-row .case-hero__title{margin:0}
.app-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:var(--max);margin:50px auto 0}
.app-facts>div{background:var(--paper);padding:20px;display:flex;flex-direction:column;gap:6px}
.app-facts .k{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.app-facts .v{font-family:var(--serif);font-size:19px}

/* Phisios — designer-grade case study */
/* big feature scene */
.case-feature{margin-top:60px;border-radius:10px;overflow:hidden;background:#0a0a0a}
.case-feature img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.case-feature__fallback{object-fit:contain;background:#0a0a0a}

/* pull quote */
.case-pull{padding:clamp(80px,14vh,160px) var(--pad);max-width:1100px;margin:0 auto;text-align:center}
.case-pull__line{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.6vw,60px);line-height:1.12;letter-spacing:-.02em}
.case-pull__line em{font-style:italic;color:var(--accent)}

/* screens showcase — alternating device + text rows */
.screens-showcase{max-width:var(--max);margin:60px auto 0;padding:0 var(--pad);display:flex;flex-direction:column;gap:clamp(40px,7vw,90px)}
.screen-card{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.screen-card--flip{grid-template-columns:1fr 300px}
.screen-card--flip .screen-card__text{order:-1}
.screen-card__device{aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#0a0a0a;box-shadow:0 30px 60px rgba(0,0,0,.28);border:6px solid #0a0a0a}
/* crop the marketing headline off the top, show the phone screen only */
.screen-card__device img{width:100%;height:100%;object-fit:cover;object-position:center 78%;display:block}
.screen-card__text{max-width:42ch}
.screen-card__n{font-size:14px;color:var(--accent)}
.screen-card__text h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,52px);letter-spacing:-.02em;margin:8px 0 14px}
.screen-card__text p{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:#2c2a23}

/* quiz row */
.quiz-row{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,6vw,80px);align-items:center;max-width:var(--max);margin:clamp(40px,7vw,90px) auto 0;padding:0 var(--pad)}
.quiz-row__device{aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#0a0a0a;box-shadow:0 30px 60px rgba(0,0,0,.28);border:6px solid #0a0a0a}
.quiz-row__device img{width:100%;height:100%;object-fit:cover;object-position:center 80%;display:block}
.quiz-row__text{max-width:44ch}
.quiz-row__text p{font-size:clamp(16px,1.5vw,21px);line-height:1.5;margin-top:14px;color:#2c2a23}

/* ===== Studio Napoli — live browser embed ===== */
.case-live-btn{display:inline-block;margin-top:8px;font-size:14px;border:1px solid var(--ink);border-radius:40px;padding:11px 22px;transition:.35s}
.case-live-btn:hover{background:var(--ink);color:var(--paper)}
.browser{margin-top:50px;border-radius:10px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.22);border:1px solid var(--line);background:#0a0708}
.browser__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#1c1a18}
.browser__dots{display:flex;gap:7px}
.browser__dots i{width:11px;height:11px;border-radius:50%;background:#3a3733}
.browser__dots i:first-child{background:#e0996b}
.browser__url{flex:1;max-width:340px;margin:0 auto;text-align:center;font-size:12px;letter-spacing:.02em;color:#a8a39b;background:#0a0708;border-radius:20px;padding:5px 14px}
.browser__spacer{width:54px}
.browser__viewport{position:relative;width:100%;aspect-ratio:16/10;background:#0a0708;overflow:hidden}
.browser__viewport img,.browser__viewport video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.browser__pending{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:0 20px;font-size:13px;color:#a8a39b;font-style:italic}
.browser__pending code{font-family:var(--sans);font-style:normal;background:rgba(239,232,219,.1);padding:2px 7px;border-radius:5px;margin-left:4px}
.browser__viewport--pending img[src=""]{display:none}
.browser__note{text-align:center;margin-top:14px;font-size:12px;color:var(--ink-soft);font-style:italic}
.sn-gallery{display:flex;flex-direction:column;gap:24px;max-width:var(--max);margin:60px auto 0;padding:0 var(--pad)}
.sn-shot{border-radius:6px;overflow:hidden}
.sn-shot img{width:100%;display:block;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.18)}
.sn-shot figcaption{margin-top:12px;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);font-style:italic;font-family:var(--serif)}

@media (max-width:900px){
  .browser__viewport{aspect-ratio:4/3}
  .app-facts{grid-template-columns:repeat(2,1fr)}
  .screen-card,.screen-card--flip,.quiz-row{grid-template-columns:1fr;gap:24px;justify-items:start}
  .screen-card--flip .screen-card__text{order:0}
  .screen-card__device,.quiz-row__device{width:min(260px,70%)}
  .case-pull__line{font-size:clamp(26px,7vw,40px)}
  .sfu-frames{grid-template-columns:1fr}
  .spread{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr;gap:14px}
  .mark-showcase,.apps{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .type-spec__row{flex-direction:column;gap:8px}
}
/* tablet / small-laptop refinements (1100–640px) */
@media (max-width:1100px) and (min-width:901px){
  .mark-showcase,.apps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .swatches{grid-template-columns:repeat(2,1fr)}
  .browser__viewport{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){
  .golfo-line{stroke-dashoffset:0;animation:none}
  .golfo-sun{opacity:1;animation:none}
}