/* PEOPLE SUCK V1 — preview. Design baseline: 1920px artboard; 34px margins, 604x755 tiles, 20px gaps. */
:root{--white:#fff;--black:#000;--margin:clamp(15px,1.77084vw,34px);--gutter:20px;--sans:'Liberation Sans',Arial,Helvetica,sans-serif;--serif:'Spectral',Georgia,serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.site-header{height:105px;position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:31px var(--margin) 0;z-index:10}
.logo-link{display:block;width:72px;line-height:0}.logo-link img{width:100%;height:auto;display:block}
.primary-nav{display:flex;gap:29px;position:absolute;left:50%;top:34px;transform:translateX(-50%);font-family:var(--serif);font-size:15px;line-height:18px;letter-spacing:-.006em}
.primary-nav a{text-decoration:none}.primary-nav a:hover,.primary-nav a:focus-visible{text-decoration:underline}
.social-links{display:flex;gap:8px;align-items:center}.social-links a{display:block;line-height:0;width:24px;height:24px}.social-links a img{height:100%;width:100%}
.page-hero{height:298px;margin:0 var(--margin);position:relative}
.home-hero{display:flex;align-items:flex-start;justify-content:center;padding:0}
.mega-heading,.footer-brand{font-family:var(--sans);font-size:min(12vw,230px);font-weight:700;line-height:1;letter-spacing:.042em;white-space:nowrap;margin:0;text-align:center}
.home-hero .mega-heading{width:100%}
.tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:var(--gutter);margin:0 var(--margin)}
.work-tile,.work-image,.work-empty{position:relative;display:block;aspect-ratio:604/755;min-width:0;overflow:hidden}
.work-tile>img,.work-image>img{width:100%;height:100%;display:block;object-fit:cover}
.is-project{text-decoration:none;outline-offset:3px}
.is-project>img{transition:transform .38s ease;will-change:transform}
.tile-overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);color:white;display:grid;place-items:center;text-align:center;opacity:0;transition:opacity .28s ease;padding:14px}
.tile-overlay-inner{max-width:100%}
.tile-title{font-family:var(--sans);font-size:clamp(23px,2.605vw,50px);line-height:1.02;letter-spacing:.08em;font-weight:700;margin:0 0 31px}
.tile-client{font-family:var(--serif);font-size:clamp(15px,1.042vw,20px);line-height:1.1;letter-spacing:-.006em;margin:0 0 11px}
.tile-categories{font-family:var(--mono);font-size:clamp(11px,.8334vw,16px);line-height:1.125;letter-spacing:.08em;margin:0}
.is-project:hover .tile-overlay,.is-project:focus-visible .tile-overlay,.is-project.is-revealed .tile-overlay{opacity:1}
.is-project:hover>img,.is-project:focus-visible>img,.is-project.is-revealed>img{transform:scale(1.035)}
.is-project:focus-visible{outline:3px solid #444}
.project-hero{display:grid;grid-template-columns:1fr 1fr;align-items:start;padding-top:35px}
.project-heading{font-family:var(--sans);font-size:100px;font-weight:700;letter-spacing:.05em;line-height:.96;margin:0;max-width:100%}
.project-intro{padding-left:0;padding-top:6px}
.project-intro h2{font-family:var(--sans);font-size:15px;letter-spacing:.045em;line-height:17px;margin:0 0 27px;font-weight:700}
.project-intro>p:not(.project-tags){font-family:var(--serif);font-size:15px;line-height:21px;letter-spacing:-.006em;margin:0}
.project-tags{font-family:var(--mono);font-size:14px;letter-spacing:.08em;line-height:18px;margin:67px 0 0;text-transform:uppercase}
.project-gallery .work-empty{background:#fff}
.site-footer{margin:57px var(--margin) 0;min-width:0}
.footer-brand{display:block;text-decoration:none;font-size:min(12vw,230px);line-height:1;letter-spacing:.042em;white-space:nowrap;width:100%;text-align:center}
.footer-meta{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:28px 0 27px;font:700 12px/1.25 var(--sans);letter-spacing:0}
.footer-meta a{text-decoration:none}.footer-meta a:hover{text-decoration:underline}
.standard-hero{margin:0 var(--margin);height:330px}.standard-hero .mega-heading{font-size:min(12vw,230px)}
.about-layout{margin:0 var(--margin);display:grid;grid-template-columns:2.05fr .9fr 1fr;gap:30px;align-items:start}
.about-layout h2,.contact-company h2{font:700 15px/18px var(--sans);letter-spacing:.045em;margin:0 0 22px}
.manifesto,.contact-company p{font:400 21px/1.31 var(--serif);margin:0;letter-spacing:-.006em}
.manifesto p{margin:0 0 26px}.about-services p,.about-clients p{font:400 17px/1.43 var(--mono);letter-spacing:.04em;margin:0}
.team-grid{margin:185px var(--margin) 0;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:22px}
.team-grid h2{font:700 clamp(28px,2.6vw,49px)/.95 var(--sans);letter-spacing:.09em;margin:0 0 20px}.team-grid h2 span{text-decoration:line-through;letter-spacing:.025em}
.team-grid p{font:400 19px/1.18 var(--serif);margin:0}.team-grid small{font:400 15px/1.2 var(--mono)}
.contact-columns{margin:0 var(--margin);display:grid;grid-template-columns:1fr 1fr;gap:30px;min-height:350px}.contact-emails{padding-top:26px}.contact-emails a{font:400 30px/1.28 var(--sans);display:block;width:max-content;text-decoration:underline}.contact-company{padding-top:0}.contact-company p{font-size:24px;line-height:1.4}.contact-company strong{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:.02em}
.generic-hero-image{margin:0 var(--margin);max-width:604px}.generic-hero-image img{aspect-ratio:604/755;display:block;width:100%;object-fit:cover}
@media(max-width:1100px){.project-heading{font-size:clamp(55px,5.2vw,100px)}.about-layout{grid-template-columns:1.5fr 1fr 1fr}.manifesto{font-size:17px}.manifesto br{display:none}.about-services p,.about-clients p{font-size:13px}}
@media(max-width:900px){:root{--gutter:12px;--margin:16px}.site-header{height:86px;padding-top:24px}.primary-nav{top:25px}.page-hero{height:200px}.project-hero{padding-top:20px}.project-heading{font-size:clamp(40px,6.5vw,68px)}.project-intro h2{font-size:13px;margin-bottom:9px}.project-intro>p:not(.project-tags){font-size:13px}.project-tags{font-size:11px;line-height:1.3;margin-top:26px}.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-gallery .work-empty{display:none}.tile-title{font-size:clamp(22px,4.2vw,36px)}.tile-client{font-size:16px}.tile-categories{font-size:12px}.standard-hero{height:230px}.about-layout{grid-template-columns:1fr 1fr}.about-copy{grid-column:1/-1}.team-grid{margin-top:115px}.contact-company p{font-size:18px}.contact-company strong{font-size:15px}}
@media(max-width:540px){:root{--margin:13px;--gutter:9px}.site-header{height:78px;padding-top:18px}.logo-link{width:58px}.primary-nav{top:20px;gap:16px;font-size:13px}.social-links a{width:20px;height:20px}.social-links{gap:5px}.page-hero{height:108px}.mega-heading,.footer-brand{font-size:11vw;letter-spacing:.035em}.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile-overlay{padding:8px}.tile-title{font-size:clamp(15px,4.35vw,25px);margin-bottom:10px;letter-spacing:.045em}.tile-client{font-size:11px;margin-bottom:5px}.tile-categories{font-size:9px;letter-spacing:0}.project-hero{height:auto;min-height:204px;grid-template-columns:1fr;gap:19px;padding-top:10px;padding-bottom:20px}.project-heading{font-size:clamp(42px,10.2vw,57px);line-height:.91}.project-intro{padding-top:0}.project-intro h2{font-size:12px;margin-bottom:5px}.project-intro p{font-size:13px!important}.project-tags{margin-top:14px!important;font-size:11px!important}.site-footer{margin-top:33px}.footer-meta{font-size:9px;margin-top:19px;align-items:flex-start;gap:8px}.footer-meta span:last-child{text-align:right}.standard-hero{height:150px}.standard-hero .mega-heading{font-size:10vw}.about-layout{grid-template-columns:1fr;gap:35px}.about-copy{grid-column:auto}.manifesto{font-size:16px}.about-services p,.about-clients p{font-size:14px}.team-grid{grid-template-columns:1fr;margin-top:70px;gap:45px}.team-grid h2{font-size:34px}.team-grid p{font-size:16px}.contact-columns{grid-template-columns:1fr;gap:43px;min-height:400px}.contact-emails{padding-top:0}.contact-emails a{font-size:21px}.contact-company p{font-size:17px}.contact-company strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}}

/* REVIEW 01 — all project-page intro text starts at the Contact nav anchor. */
@media (min-width: 541px) {
  .project-intro { padding-left: 9px; text-align: left; }
  .project-intro > * { text-align: left; }
}
@media (max-width: 540px) {
  .project-intro { padding-left: 0; text-align: left; }
  .project-intro > * { text-align: left; }
}
/* The original header keeps its exact initial placement. An identical copy
   appears in a white overlay only after the visitor has scrolled. */
.site-header--floating {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .24s ease, opacity .18s ease, visibility .24s;
}
.site-header--floating.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .site-header--floating { transition: none; }
}

/* REVIEW 02 — exact two-line hover captions from the supplied copy. */
.tile-title-blank{display:inline;white-space:pre}
/* Keep very long second lines on exactly two lines at the XD desktop scale. */
.tile-title-long{font-size:clamp(16px,2.4vw,46px);letter-spacing:.065em}
@media (max-width:900px) and (min-width:541px){
  .tile-title-long{font-size:clamp(16px,3.5vw,32px);letter-spacing:.055em}
}
@media (max-width:540px){
  .tile-title-long{font-size:clamp(10px,2.8vw,15px);letter-spacing:.02em}
  .tile-title-fit{font-size:clamp(11px,3.75vw,19px);letter-spacing:.02em}
}

/* REVIEW 03 — About + Contact: typography, spacing and grid from XD screenshots.
   All rules are page-scoped so the approved Home and project layouts remain unchanged. */
@media (min-width: 1101px) {
  .page-about .standard-hero {height: 295px;}
  .page-about .about-layout {
    grid-template-columns: minmax(0, 911fr) minmax(0, 415fr) minmax(0, 466fr);
    gap: 30px;
  }
  .page-about .team-grid {margin-top: 230px;}
  .page-about .team-grid h2 {margin-bottom: 47px;}
  .page-about .site-footer {margin-top: 258px;}
  .page-contact .standard-hero {height: 320px;}
  .page-contact .contact-columns {min-height: 328px;}
  .page-contact .contact-emails {padding-top: 40px;}
}
/* PS/F, SERVICES, CLIENTS — Liberation Sans Bold 15 / tracking 96 / leading 30. */
.page-about .about-layout h2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .096em;
  margin: 0 0 20px;
}
/* About body — Spectral Regular 20 / tracking 0 / leading 27. */
.page-about .manifesto {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0;
}
.page-about .manifesto p {margin: 0 0 31px;}
/* Services + Clients — IBM Plex Mono Regular 18 / tracking 40 / leading 30. */
.page-about .about-services p,
.page-about .about-clients p {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: .04em;
  margin: 0;
}
/* Team captions — Spectral Light 20 / tracking -13 / leading 23;
   IBM Plex Mono Regular 15 / tracking 20 / leading 23. */
.page-about .team-grid p {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: -.013em;
  margin: 0;
}
.page-about .team-grid small {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: .02em;
}
/* Contact emails — Liberation Sans Regular 24 / tracking 45 / leading 35. */
.page-contact .contact-emails a {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: .045em;
}
/* Company labels — Liberation Sans Bold 15 / tracking 50 / leading 28. */
.page-contact .contact-company h2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: .05em;
  margin: 0 0 26px;
}
.page-contact .contact-company strong {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: .05em;
}
/* Addresses — Spectral Regular 20 / tracking 0 / leading 28. */
.page-contact .contact-company p {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
  margin: 0;
}
@media (max-width: 1450px) and (min-width: 901px) {
  .page-about .manifesto br {display: none;}
  .page-about .manifesto {font-size: clamp(16px, 1.15vw, 20px);line-height: 1.36;}
  .page-about .about-services p,
  .page-about .about-clients p {font-size: clamp(13px, 1.08vw, 18px);line-height: 1.65;}
  .page-about .team-grid {margin-top: 140px;}
  .page-about .site-footer {margin-top: 140px;}
  .page-contact .contact-company p {font-size: clamp(16px, 1.2vw, 20px);}
}
@media (max-width: 900px) {
  .page-about .manifesto br {display: none;}
  .page-about .manifesto {font-size: 17px;line-height: 1.4;}
  .page-about .about-services p,
  .page-about .about-clients p {font-size: 14px;line-height: 1.6;}
  .page-about .team-grid {margin-top: 100px;}
  .page-about .site-footer {margin-top: 65px;}
  .page-contact .contact-company p {font-size: 18px;line-height: 1.5;}
  .page-contact .contact-emails a {font-size: 21px;line-height: 1.5;}
}
@media (max-width: 540px) {
  .page-about .about-layout h2 {font-size: 13px;line-height: 26px;margin-bottom: 12px;}
  .page-about .manifesto {font-size: 16px;line-height: 1.4;}
  .page-about .about-services p,
  .page-about .about-clients p {font-size: 13px;line-height: 1.55;}
  .page-about .team-grid p {font-size: 18px;line-height: 24px;}
  .page-about .team-grid small {font-size: 12px;line-height: 19px;}
  .page-contact .contact-emails a {font-size: clamp(17px, 4.6vw, 21px);letter-spacing: 0;}
  .page-contact .contact-company h2 {font-size: 13px;line-height: 26px;margin-bottom: 12px;}
  .page-contact .contact-company p {font-size: 16px;line-height: 1.55;}
  .page-contact .contact-company strong {font-size: 12px;line-height: 1.55;}
}

/* REVIEW 04 — mixed-width project galleries + inline project videos. */
.work-video{position:relative;display:block;aspect-ratio:604/755;min-width:0;overflow:hidden;background:#000}
.work-video video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.project-gallery .span-2{grid-column:span 2;aspect-ratio:1228/755}
@media(max-width:900px){.project-gallery .span-2{grid-column:span 2}.project-gallery .work-video{min-height:0}}


/* REVIEW 05 — five additional project pages. */
.video-contain{background:#fff}.video-contain video{object-fit:contain;background:#fff}
.project-cristian .work-image.span-2 img,.project-italtrans .work-image.span-2 img{object-fit:cover}
@media(max-width:540px){.project-heading{overflow-wrap:normal}.project-taag .project-heading{font-size:clamp(34px,9.2vw,52px)}}

/* REVIEW 06 — Contact text block aligned vertically with About. */
@media (min-width:1101px){
  .page-contact .standard-hero{height:295px;}
  .page-contact .contact-columns{min-height:353px;}
  .page-contact .contact-emails{padding-top:0;}
  .page-contact .contact-company{padding-top:0;}
}


/* REVIEW 07 — Netflix project pages + inline YouTube embeds. */
.work-embed{position:relative;display:block;min-width:0;overflow:hidden;background:#f2f2f2;aspect-ratio:1228/755}
.work-embed iframe{display:block;width:100%;height:100%;border:0;background:#000}
.project-gallery .span-3{grid-column:1/-1;aspect-ratio:1836/755}
.project-gallery .span-3 > img,.project-gallery .span-3 iframe{width:100%;height:100%;display:block;object-fit:cover}
.project-gallery .span-2.work-embed{aspect-ratio:1228/755}
.project-gallery .span-2.work-image{aspect-ratio:1228/755}
@media(max-width:900px){.project-gallery .span-3{grid-column:1/-1}.project-gallery .span-2.work-embed,.project-gallery .span-2.work-image{grid-column:span 2}}
@media(max-width:540px){.work-embed{aspect-ratio:16/10}}


/* REVIEW 08 — Netflix artboards follow the dedicated XD measurements. */
.netflix-gallery{margin:0 var(--margin);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.netflix-poster{width:49.19%;aspect-ratio:911/1139;overflow:hidden;background:#fff}
.netflix-poster img{display:block;width:100%;height:100%;object-fit:cover}
.netflix-wide{width:100%;aspect-ratio:1852/753;overflow:hidden;background:#fff}
.netflix-wide img{display:block;width:100%;height:100%;object-fit:cover}
.netflix-extra{width:100%;overflow:hidden;background:#fff}
.netflix-extra img{display:block;width:100%;height:auto}
.youtube-preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#050505;cursor:pointer;margin-top:18px}
.youtube-preview>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,opacity .25s ease}
.youtube-preview:hover>img{transform:scale(1.015);opacity:.94}
.youtube-preview__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:68px;border:0;border-radius:17px;background:rgba(0,0,0,.78);cursor:pointer;display:grid;place-items:center;padding:0}
.youtube-preview__play span{display:block;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:25px solid #fff;margin-left:6px}
.youtube-preview__local-note{position:absolute;left:22px;bottom:18px;font:500 13px/1 var(--mono);letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.58);padding:8px 10px}
.youtube-preview.is-playing>img,.youtube-preview.is-playing>.youtube-preview__play,.youtube-preview.is-playing>.youtube-preview__local-note{display:none}
.youtube-preview iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:900px){.netflix-gallery{gap:12px}.netflix-poster{width:58%}.youtube-preview{margin-top:12px}}
@media(max-width:540px){.netflix-poster{width:100%}.netflix-wide{aspect-ratio:auto}.netflix-wide img{height:auto;object-fit:contain}.youtube-preview__play{width:72px;height:52px;border-radius:13px}.youtube-preview__play span{border-top-width:11px;border-bottom-width:11px;border-left-width:19px}}


/* REVIEW 09 — Maschi Veri poster proportions from XD (911 × 1278). */
.project-mave-s1 .netflix-poster,
.project-mave-s2 .netflix-poster{aspect-ratio:911/1278}


/* REVIEW 10 — project intro alignment + three new portfolio pages. */
@media (min-width: 541px){.project-hero{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);column-gap:30px}.project-intro{padding-top:0}.project-intro h2{margin-top:0}}
.project-academy .project-gallery,.project-manga .project-gallery,.project-quintopiano .project-gallery{align-items:start}
.project-academy .work-empty,.project-manga .work-empty,.project-quintopiano .work-empty{background:#fff}
@media(max-width:540px){.project-academy .project-heading,.project-quintopiano .project-heading,.project-manga .project-heading{font-size:clamp(38px,9.2vw,54px)}}


/* REVIEW 11 — pre-publication: align all project descriptions to the CONTACT guide. */
@media (min-width: 541px){
  .project-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;column-gap:0 !important;}
  .project-intro{padding-left:0 !important;padding-top:0 !important;align-self:start;}
  .project-intro h2{margin-top:0 !important;}
}

/* REVIEW 12 — restore the approved Contact-anchor alignment from earlier reviews.
   The project text column begins 9px to the right of the viewport centre,
   which matches the left edge of the “Contact” label in the centred nav. */
@media (min-width: 541px){
  .project-hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:0 !important;
  }
  .project-intro{
    padding-left:9px !important;
    padding-top:0 !important;
    align-self:start;
    text-align:left;
  }
  .project-intro > *{text-align:left;}
  .project-intro h2{margin-top:0 !important;}
}
@media (max-width:540px){
  .project-intro{padding-left:0 !important;}
}