*{box-sizing:border-box}
html,body{margin:0;color:#111;background:#fff;font-family:Arial,Helvetica,sans-serif}
body{font-size:13px}
img{max-width:100%}

.site-header{height:86px;display:grid;grid-template-columns:270px 1fr;align-items:center;padding:0 5.4%;border-bottom:1px solid #ddd}
.brand{color:#111;text-decoration:none;display:flex;flex-direction:column;line-height:1.15}
.brand strong{font-size:18px}
.brand span{font-size:9px;letter-spacing:.16em;margin-top:4px}
.site-header nav{display:flex;justify-content:center;gap:58px}
.site-header nav a,.site-footer a{color:inherit;text-decoration:none;font-size:11px}

.project-row{display:grid;grid-template-columns:74px 235px minmax(0,1fr);border-bottom:1px solid #ddd;min-height:185px}
.phase{padding:22px 10px 20px 19px;border-right:1px solid #ddd;font-size:9px;line-height:1.35}
.phase b,.phase span{display:block}
.phase b{font-weight:500;margin-bottom:4px}

.copy{padding:22px 28px 22px 34px}
.copy small{font-size:9px}
.copy h1,.copy h2{font-weight:300;letter-spacing:-.045em;margin:10px 0 8px;line-height:.93}
.copy h1{font-size:44px}
.copy h2{font-size:29px}
.copy h3{font-size:16px;font-weight:400;margin:16px 0}
.copy p{max-width:225px;color:#555;line-height:1.45;margin:13px 0}
.copy i{display:block;width:25px;border-top:1px solid #222;margin:12px 0}
.back,.explore{display:block;color:#111;text-decoration:none;font-size:9px;letter-spacing:.03em}
.explore{margin-top:25px}

.visual{margin:0;min-width:0;background:#eee}
.hero-visual,.final-visual{overflow:hidden}
.hero-visual img,.final-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-row{min-height:440px}
.hero-visual{aspect-ratio:2.05/1}
.final-visual{aspect-ratio:3.45/1}

/* SKETCHES: no crop. The full board is always visible. */
.sketches-visual{background:#fff;overflow:visible}
.sketches-visual img{display:block;width:100%;height:auto;object-fit:contain}

/* Four independent images: desktop 4 columns, tablet 2x2, mobile 1 column. */
.gallery{display:grid;background:#fff;overflow:visible}
.gallery-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery figure{margin:0;min-width:0;overflow:hidden;background:#eee;aspect-ratio:4/3}
.gallery figure+figure{border-left:1px solid #fff}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Slightly tighter footer than V1. */
.site-footer{min-height:112px;background:#111;color:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:22px 5.4%;gap:30px}
.footer-brand{display:flex;flex-direction:column}
.footer-brand strong{font-size:20px}
.footer-brand span{font-size:9px;letter-spacing:.16em}
.footer-contact{text-align:center;font-size:16px;font-weight:700}
.footer-contact b{color:#d71920}
.site-footer nav{display:flex;justify-content:flex-end;gap:38px}

@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto}
  .site-header nav{gap:24px}
  .project-row{grid-template-columns:64px 210px minmax(0,1fr)}
  .phase{padding-left:12px}
  .copy{padding-left:24px}
  .copy h1{font-size:38px}
  .copy h2{font-size:25px}
  .gallery-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery figure:nth-child(3){border-left:0}
  .gallery figure:nth-child(n+3){border-top:1px solid #fff}
}

@media(max-width:680px){
  .site-header{height:72px;padding:0 20px}
  .site-header nav{gap:14px}
  .site-header nav a{font-size:9px}

  .project-row{grid-template-columns:72px minmax(0,1fr)}
  .phase{grid-row:1/span 2;padding:18px 6px}
  .copy{padding:20px}
  .copy p{max-width:420px}

  .visual{grid-column:2}
  .hero-row{min-height:0}
  .hero-visual,.final-visual{aspect-ratio:16/9}

  /* Sketch board remains uncropped on mobile too. */
  .sketches-visual img{width:100%;height:auto}

  /* Independent images stack and therefore scale naturally. */
  .gallery-four{grid-template-columns:1fr}
  .gallery figure{aspect-ratio:16/10;border-left:0!important;border-top:1px solid #fff}

  .site-footer{grid-template-columns:1fr;padding:24px 20px;min-height:150px}
  .footer-contact{text-align:left}
  .site-footer nav{justify-content:flex-start}
}


/* PROJECT OUTCOME — aligned to the same 3-column grid as sections 01–06 */
.project-outcome{
  grid-template-columns:74px 235px minmax(0,1fr);
  min-height:260px;
  background:#fff;
}
.project-outcome .phase{grid-column:1}
.outcome-label{
  grid-column:2;
  padding:28px 28px 28px 34px;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.04em;
  border-right:1px solid #ddd;
}
.outcome-copy{grid-column:3;max-width:none;padding:28px 42px 38px;background:#fff}
.outcome-copy h2{font-size:29px;font-weight:300;letter-spacing:-.045em;line-height:.93;margin:0 0 12px}
.outcome-copy i{display:block;width:25px;border-top:1px solid #222;margin:12px 0 18px}
.outcome-copy p{max-width:760px;color:#111;line-height:1.55;margin:0 0 12px}
.outcome-copy strong{color:#111;font-weight:600}
@media(max-width:900px){
  .project-outcome{grid-template-columns:64px 210px minmax(0,1fr)}
  .outcome-label{padding-left:24px}
  .outcome-copy h2{font-size:25px}
}
@media(max-width:680px){
  .project-outcome{grid-template-columns:72px minmax(0,1fr)}
  .project-outcome .phase{grid-row:1 / span 2}
  .outcome-label{grid-column:2;padding:18px 20px;border-right:0;border-bottom:1px solid #ddd}
  .outcome-copy{grid-column:2;padding:24px 20px 28px}
}

/* =========================================================
   SECTION NAVIGATION + COMPACT ROW BEHAVIOUR
   ========================================================= */
html{scroll-behavior:smooth}
.project-row,.project-outcome{scroll-margin-top:18px}

.section-next{margin-top:18px}
.explore:hover{text-decoration:underline}

/* Desktop:
   rows 02/04/06 are deliberately shallow because their four-image strip
   is the visual content. Copy scrolls inside its own column instead of
   forcing a large white area below the images. */
@media (min-width:901px){
  #section-02,
  #section-04,
  #section-06{
    height:255px;
    min-height:255px;
  }

  #section-03{
    height:auto;
    min-height:0;
  }

  #section-05{
    height:390px;
    min-height:390px;
  }

  .compact-copy-row > .copy{
    min-height:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#aaa transparent;
    padding-right:24px;
  }

  .compact-copy-row > .copy::-webkit-scrollbar{width:4px}
  .compact-copy-row > .copy::-webkit-scrollbar-track{background:transparent}
  .compact-copy-row > .copy::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}

  #section-02 > .visual,
  #section-04 > .visual,
  #section-06 > .visual,
  #section-05 > .visual{
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  #section-02 .gallery,
  #section-04 .gallery,
  #section-06 .gallery{
    height:100%;
  }

  #section-02 .gallery figure,
  #section-04 .gallery figure,
  #section-06 .gallery figure{
    height:100%;
    aspect-ratio:auto;
  }
}

/* Tablet: enough room for the 2x2 image strips, while keeping copy contained. */
@media (min-width:681px) and (max-width:900px){
  #section-02,
  #section-04,
  #section-06{
    height:430px;
    min-height:430px;
  }

  #section-05{
    height:340px;
    min-height:340px;
  }

  .compact-copy-row > .copy{
    min-height:0;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
  }

  #section-02 > .visual,
  #section-04 > .visual,
  #section-06 > .visual,
  #section-05 > .visual{
    height:100%;
    overflow:hidden;
  }
}

/* Mobile: normal page flow is more usable than nested scroll areas. */
@media (max-width:680px){
  .compact-copy-row > .copy{
    height:auto;
    max-height:none;
    overflow:visible;
  }
}


/* =========================================================
   UX FIX — only descriptive copy scrolls, never whole section
   ========================================================= */
@media (min-width:681px){
  .compact-copy-row > .copy{
    overflow:visible !important;
    height:100% !important;
    min-height:0 !important;
    padding-right:24px;
  }

  .compact-copy-row .copy-scroll{
    max-height:116px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:12px;
    margin-bottom:0;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#b8b8b8 transparent;
  }

  .compact-copy-row .copy-scroll::-webkit-scrollbar{
    width:3px;
  }
  .compact-copy-row .copy-scroll::-webkit-scrollbar-track{
    background:transparent;
  }
  .compact-copy-row .copy-scroll::-webkit-scrollbar-thumb{
    background:#b8b8b8;
    border-radius:6px;
  }

  .compact-copy-row .section-next{
    display:block;
    margin-top:16px;
  }

  /* Keep section boundaries clean: no text may visually invade next row. */
  #section-02,
  #section-04,
  #section-06{
    min-height:290px !important;
    height:290px !important;
  }

  #section-05{
    min-height:390px !important;
    height:390px !important;
  }
}

/* The sketches row has enough natural height: no nested copy scroll needed. */
#section-03 .copy-scroll{
  max-height:none;
  overflow:visible;
  padding-right:0;
}

/* Outcome rail label stays aligned and intentionally occupies two lines. */
.project-outcome .rail,
.project-outcome .eyebrow{
  line-height:1.25;
}

@media (max-width:680px){
  .compact-copy-row .copy-scroll{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
}


/* =========================================================
   FINAL ALIGNMENT FIX — 02 INSIGHT + 06 DETAILS
   ========================================================= */
@media (min-width:901px){
  #section-02{
    height:350px !important;
    min-height:350px !important;
  }

  #section-02 > .copy{
    height:350px !important;
    box-sizing:border-box;
    overflow:hidden !important;
    padding-bottom:16px;
  }

  #section-02 .copy-scroll{
    max-height:132px !important;
    overflow-y:auto !important;
    margin-bottom:0 !important;
    padding-right:12px;
  }

  #section-02 .section-next{
    margin-top:12px !important;
  }
}

@media (min-width:681px) and (max-width:900px){
  #section-02{
    height:430px !important;
    min-height:430px !important;
  }

  #section-02 > .copy{
    height:430px !important;
    overflow:hidden !important;
  }

  #section-02 .copy-scroll{
    max-height:150px !important;
  }
}

/* READ SCROLL — scrolls only the paragraph, never navigates to another chapter */
@media (min-width:681px){
  .compact-copy-row .copy-scroll{
    max-height:104px !important;
    overflow-y:auto !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none;
    margin-bottom:0 !important;
    padding-right:4px !important;
  }
  .compact-copy-row .copy-scroll::-webkit-scrollbar{display:none !important}
  .compact-copy-row .read-scroll{
    margin-top:20px;
    padding-top:0;
    font-size:9px;
    line-height:1;
    letter-spacing:.08em;
    font-weight:500;
    color:#111;
  }
  #section-03 .copy-scroll{max-height:104px !important;overflow-y:auto !important}
}
@media(max-width:680px){.read-scroll{display:none}}


/* Desktop reading-scroll refinements — v4 */
@media (min-width: 901px){
  .copy-scroll{
    position:relative;
    box-sizing:border-box;
    padding-bottom:54px !important; /* dedicated white area for SCROLL */
    overflow-y:auto;
    scrollbar-width:none;
  }
  .copy-scroll::-webkit-scrollbar{display:none}

  .read-scroll-cue,
  .copy-scroll .scroll-cue,
  .copy-scroll .read-more{
    position:sticky;
    left:0;
    bottom:0;
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:18px 0 10px;
    margin:18px 0 0;
    background:#fff;
    color:#111;
    font-size:12px;
    line-height:1;
    font-weight:500;
    letter-spacing:.02em;
    text-transform:uppercase;
    z-index:3;
  }

  /* Never let a reading cue cross the grey divider into the next chapter. */
  .project-section .copy,
  .project-section .text-column,
  .project-section .section-copy{
    min-height:0;
    overflow:hidden;
  }
}

@media (min-width:901px){
 #section-02>.copy,#section-04>.copy,#section-05>.copy,#section-06>.copy{box-sizing:border-box!important;overflow:hidden!important}
 #section-02 .copy-scroll,#section-04 .copy-scroll,#section-05 .copy-scroll,#section-06 .copy-scroll{overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;padding:0 4px 0 0!important;margin:13px 0 0!important}
 #section-02 .copy-scroll::-webkit-scrollbar,#section-04 .copy-scroll::-webkit-scrollbar,#section-05 .copy-scroll::-webkit-scrollbar,#section-06 .copy-scroll::-webkit-scrollbar{display:none!important}
 #section-02 .read-scroll,#section-04 .read-scroll,#section-05 .read-scroll,#section-06 .read-scroll{display:block!important;position:static!important;width:auto!important;margin:20px 0 0!important;padding:0!important;background:#fff!important;color:#111!important;font-size:10px!important;line-height:1!important;letter-spacing:.06em!important;font-weight:500!important;text-transform:uppercase}
 #section-02 .copy-scroll{max-height:112px!important}
 #section-04 .copy-scroll{max-height:58px!important}
 #section-04 .read-scroll{margin-top:16px!important}
 #section-05 .copy-scroll{max-height:104px!important}
 #section-06 .copy-scroll{max-height:88px!important}
}

/* Fine tuning: section 02 — lift SCROLL cue 2 mm above divider */
@media (min-width:901px){
  #section-02 .read-scroll{
    transform:translateY(-2mm) !important;
  }
}

/* Footer brand — back to top of current project */
.footer-brand a{color:inherit;text-decoration:none;display:flex;flex-direction:column;}


/* SITE NAVIGATION STANDARD — Ducati Lamp / Ducati Perfume. Scoped to page header/footer only. */
html { scroll-behavior: smooth; }
body > header.sc-project-header { box-sizing:border-box!important; position:relative!important; top:auto!important; z-index:20!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; width:100%!important; min-height:86px!important; height:auto!important; padding:20px 5.4%!important; background:#fff!important; color:#111!important; border-bottom:1px solid #ddd!important; backdrop-filter:none!important; }
body > header.sc-project-header .sc-project-brand { display:flex!important; flex-direction:column!important; gap:4px!important; align-items:flex-start!important; text-decoration:none!important; color:#111!important; line-height:1.15!important; flex:none!important; }
body > header.sc-project-header .sc-project-brand strong { font:700 18px/1.15 Arial,Helvetica,sans-serif!important; letter-spacing:0!important; }
body > header.sc-project-header .sc-project-brand span { font:400 9px/1.2 Arial,Helvetica,sans-serif!important; letter-spacing:.16em!important; margin:0!important; }
body > header.sc-project-header nav.sc-project-nav { display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; gap:clamp(20px,4vw,58px)!important; margin:0!important; padding:0!important; width:auto!important; }
body > header.sc-project-header nav.sc-project-nav a { color:#111!important; text-decoration:none!important; font:400 11px/1.4 Arial,Helvetica,sans-serif!important; letter-spacing:.04em!important; }
body > header.sc-project-header nav.sc-project-nav a:hover { text-decoration:underline!important; }
body > footer.sc-unified-footer { box-sizing:border-box!important; position:relative!important; z-index:1!important; display:grid!important; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto auto!important; align-items:center!important; gap:22px!important; width:100%!important; height:auto!important; min-height:126px!important; margin:0!important; padding:30px 5.4%!important; border-top:1px solid #ddd!important; background:#fff!important; color:#111!important; font-family:Arial,Helvetica,sans-serif!important; }
body > footer.sc-unified-footer a { color:#111!important; text-decoration:none!important; }
body > footer.sc-unified-footer .sc-unified-brand { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:7px!important; }
body > footer.sc-unified-footer .sc-unified-brand strong { font-size:15px!important; font-weight:700!important; letter-spacing:.06em!important; }
body > footer.sc-unified-footer .sc-unified-brand small { font-size:9px!important; font-weight:400!important; letter-spacing:.03em!important; line-height:1.35!important; }
body > footer.sc-unified-footer .sc-unified-contact { font-size:11px!important; white-space:nowrap!important; }
body > footer.sc-unified-footer .sc-unified-contact span { font-size:16px!important; }
body > footer.sc-unified-footer .sc-unified-social { display:flex!important; flex-wrap:wrap!important; gap:20px!important; justify-content:flex-end!important; font-size:11px!important; }
body > footer.sc-unified-footer .sc-unified-up { display:grid!important; place-items:center!important; width:40px!important; height:40px!important; flex:none!important; border:1px solid #999!important; border-radius:50%!important; font-size:22px!important; line-height:1!important; }
@media(max-width:700px){body > header.sc-project-header{padding:17px 5%!important;gap:15px!important;min-height:0!important;}body > header.sc-project-header nav.sc-project-nav{display:flex!important;width:100%!important;justify-content:flex-start!important;gap:25px!important;}body > footer.sc-unified-footer{grid-template-columns:1fr auto!important;gap:20px!important;padding:25px 5%!important;}body > footer.sc-unified-footer .sc-unified-brand{grid-column:1/-1!important;}body > footer.sc-unified-footer .sc-unified-contact{grid-column:1/-1!important;}body > footer.sc-unified-footer .sc-unified-social{justify-content:flex-start!important;}body > footer.sc-unified-footer .sc-unified-up{justify-self:end!important;}}

/* Navigation EN/CN: isolated from project editorial layouts. */
.sc-project-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:86px;padding:18px 5.4%;background:#fff;border-bottom:1px solid #ddd;z-index:30}
.sc-project-brand{display:flex;flex-direction:column;gap:5px;color:#171717;text-decoration:none;white-space:nowrap}
.sc-project-brand strong{font-size:17px;letter-spacing:.04em}.sc-project-brand span{font-size:10px;letter-spacing:.12em}
.sc-project-nav{display:flex;align-items:center;gap:30px}.sc-project-nav a{color:#171717;text-decoration:none;font-size:11px;font-weight:600;white-space:nowrap}
.sc-project-nav a:hover{text-decoration:underline}.sc-project-nav .sc-language{color:#b51e24}
.sc-menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:42px;height:42px;border:1px solid #ddd;background:#fff;cursor:pointer}
.sc-menu-toggle span{display:block;width:19px;height:2px;background:#171717}
@media(max-width:760px){.sc-project-header{min-height:74px;padding:15px 20px;flex-wrap:nowrap}.sc-project-brand strong{font-size:14px}.sc-project-brand span{font-size:9px}.sc-menu-toggle{display:flex;flex:none}.sc-project-nav{display:none!important;position:absolute;top:100%;left:0;right:0;background:#fff;padding:18px 20px 22px;border-bottom:1px solid #ddd;box-shadow:0 8px 15px rgba(0,0,0,.06);flex-direction:column;align-items:flex-start;gap:20px;z-index:99}.sc-project-nav.is-open{display:flex!important}.sc-project-nav a{font-size:12px}}