*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0}

:root{
  --bg:#efebe3;
  --paper:#faf6ef;
  --ink:#111;
  --muted:#746e65;
  --line:rgba(17,17,17,.12);
  --line-soft:rgba(17,17,17,.07);
  --serif:"Bricolage Grotesque",Arial,Helvetica,sans-serif;
  --sans:"Plus Jakarta Sans",Arial,Helvetica,sans-serif;
  --pad:16px;
  --mx:72%;
  --my:34%;
  --tilt-x:0deg;
  --tilt-y:0deg;
  --lift:0px;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  min-width:320px;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.menu-lock{overflow:hidden}

img,video,svg{display:block;max-width:100%}
button,a{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
a{text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}

button:focus-visible,
a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* =========================================================
   MOTION TYPOGRAPHY
   Words never break internally.
   ========================================================= */

.motion-word{
  display:inline-block;
  white-space:nowrap;
}

.motion-char{
  display:inline-block;
  will-change:transform,opacity;
}

.motion-space{
  display:inline-block;
  width:.27em;
}

.headline-line{
  display:block;
  white-space:nowrap;
}

/* =========================================================
   HEADER
   ========================================================= */

.topbar{
  position:fixed;
  z-index:90;
  inset:0 0 auto;
  height:54px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
  background:rgba(247,245,239,.88);
  backdrop-filter:blur(16px) saturate(1.08);
}

.menu{
  justify-self:start;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.menu__lines{
  display:grid;
  gap:4px;
}

.menu__lines i{
  display:block;
  width:15px;
  height:1px;
  background:currentColor;
  transition:transform .24s ease;
}

.menu__label,
.brand,
.topnote{
  font-size:7px;
  font-weight:600;
  letter-spacing:.17em;
}

.brand{justify-self:center}

.topnote{
  justify-self:end;
  text-align:right;
  line-height:1.2;
  color:var(--muted);
}

.menu[aria-expanded="true"] .menu__lines i:first-child{
  transform:translateY(2.5px) rotate(45deg);
}

.menu[aria-expanded="true"] .menu__lines i:last-child{
  transform:translateY(-2.5px) rotate(-45deg);
}

@media (max-width:599px){
  .topnote{display:none}
}

/* =========================================================
   SMALL DRAWER MENU
   ========================================================= */

.menu-scrim{
  position:fixed;
  z-index:79;
  inset:54px 0 0;
  background:rgba(15,14,12,.07);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s;
}

.menu-scrim.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.site-menu{
  position:fixed;
  z-index:80;
  left:0;
  top:54px;
  bottom:0;
  width:min(76vw,280px);
  padding:20px 18px 20px var(--pad);
  display:flex;
  flex-direction:column;
  background:rgba(248,246,240,.992);
  border-right:1px solid var(--line);
  box-shadow:22px 0 62px rgba(20,18,15,.075);
  transform:translateX(-102%);
  visibility:hidden;
  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .52s;
}

.site-menu.is-open{
  transform:none;
  visibility:visible;
  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    visibility 0s;
}

.site-menu__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.site-menu__top>span,
.site-menu__foot{
  color:var(--muted);
  font-size:7px;
  font-weight:600;
  letter-spacing:.15em;
  line-height:1.5;
}

.site-menu__close{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-size:18px;
}

.site-menu nav{
  display:grid;
  margin-top:22px;
}

.site-menu a{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:end;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}

.site-menu a>span{
  padding-bottom:3px;
  color:var(--muted);
  font-size:8px;
}

.site-menu a strong{
  font-family:var(--serif);
  font-size:35px;
  font-weight:500;
  line-height:.88;
  letter-spacing:-.035em;
}

.site-menu__foot{
  margin-top:auto;
  padding-top:17px;
}

/* =========================================================
   HOME STAGE
   ========================================================= */

.projects-runway{
  position:relative;
  height:340vh;
}

.projects-sticky{
  position:sticky;
  top:0;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  perspective:1900px;
  touch-action:pan-y;
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.96),rgba(255,255,255,0) 29%),
    linear-gradient(116deg,#fbfaf6 0%,#f5f2ec 58%,#ece8e1 100%);
}

.projects-sticky::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 17%,rgba(255,255,255,.68),transparent 20%),
    radial-gradient(circle at 18% 78%,rgba(220,212,200,.22),transparent 27%);
}

.projects-sticky::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.1;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.014) 0,
      rgba(0,0,0,.014) 1px,
      transparent 1px,
      transparent 3px
    );
}


/* =========================================================
   INTRO — deliberate 2-line headline on mobile
   ========================================================= */

.intro-copy{
  position:absolute;
  z-index:30;
  left:var(--pad);
  top:72px;
  width:calc(100% - 32px);
  pointer-events:none;
}

.intro-label{
  margin-bottom:8px;
  color:var(--muted);
  font-size:7px;
  font-weight:600;
  letter-spacing:.18em;
}

.intro-copy h1{
  max-width:360px;
  font-family:var(--serif);
  font-size:clamp(28px,8.2vw,38px);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.036em;
}

.intro-text{
  max-width:265px;
  margin-top:9px;
  color:var(--muted);
  font-size:9px;
  line-height:1.46;
}

.project-count-label{
  position:absolute;
  z-index:30;
  top:76px;
  right:var(--pad);
  display:none;
  text-align:right;
  color:var(--muted);
}

.project-count-label span{
  display:block;
  color:var(--ink);
  font-family:var(--serif);
  font-size:21px;
  line-height:.8;
}

.project-count-label small{
  font-size:7px;
  font-weight:600;
  letter-spacing:.15em;
}

/* =========================================================
   ACTIVE IMAGE
   Static state is calm. Peripheral leaves mostly stay outside.
   ========================================================= */

.project-stage{
  position:absolute;
  inset:0;
  z-index:6;
  transform-style:preserve-3d;
}

.project-card{
  position:absolute;
  top:29%;
  left:50%;
  width:min(78vw,680px);
  aspect-ratio:1.64/1;
  transform-origin:center;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
  cursor:pointer;
}

.project-card__shadow{
  position:absolute;
  inset:auto 12% -8%;
  height:20%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(24,20,16,.16),rgba(24,20,16,0) 70%);
  filter:blur(18px);
  transform:translateZ(-45px);
}

.project-card__shell{
  position:relative;
  width:100%;
  height:100%;
  transform:
    rotateX(var(--tilt-y))
    rotateY(var(--tilt-x))
    translateY(var(--lift));
  transition:transform .28s ease;
}

.project-card__frame{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#d9d4cb;
  border-radius:1px;
  box-shadow:
    0 30px 78px rgba(22,19,15,.17),
    0 0 0 1px rgba(255,255,255,.22) inset;
}

.project-card__frame::before{
  content:"";
  position:absolute;
  inset:-25% -14%;
  z-index:2;
  background:
    linear-gradient(112deg,transparent 30%,rgba(255,255,255,.13) 44%,transparent 57%);
  transform:translateX(-120%);
  opacity:0;
  transition:transform .85s ease,opacity .65s ease;
  pointer-events:none;
}

.project-card.is-active .project-card__frame::before{
  transform:translateX(110%);
  opacity:1;
}

.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.035);
  will-change:transform;
}

.project-card.is-active .project-card__frame{
  box-shadow:
    0 37px 98px rgba(22,19,15,.20),
    0 0 0 1px rgba(255,255,255,.25) inset;
}

/* =========================================================
   META — compact plaque below, not competing with image
   ========================================================= */

.project-meta{
  position:absolute;
  z-index:30;
  left:var(--pad);
  right:var(--pad);
  bottom:10.5vh;
  pointer-events:none;
}

.project-meta__line{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-bottom:6px;
}

.project-index{
  display:flex;
  align-items:flex-start;
  gap:3px;
}

.project-index span{
  font-family:var(--serif);
  font-size:35px;
  line-height:.68;
  letter-spacing:-.06em;
}

.project-index small{
  padding-top:1px;
  color:var(--muted);
  font-size:8px;
}

.project-meta__line>p{
  padding-bottom:1px;
  color:var(--muted);
  font-size:7px;
  font-weight:600;
  letter-spacing:.15em;
}

.project-meta h2{
  max-width:90%;
  font-family:var(--serif);
  font-size:clamp(33px,9.4vw,45px);
  font-weight:500;
  line-height:.88;
  letter-spacing:-.036em;
}

.project-meta__copy{
  max-width:34ch;
  margin-top:7px;
  color:var(--muted);
  font-size:9px;
  line-height:1.42;
}

.image-link-hint{
  display:none;
}

.scroll-progress{
  position:absolute;
  z-index:28;
  left:var(--pad);
  right:86px;
  bottom:27px;
  height:1px;
  overflow:hidden;
  background:var(--line-soft);
}

.scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  background:var(--ink);
  transform:scaleX(.02);
  transform-origin:left;
}

.project-controls{
  position:absolute;
  z-index:30;
  right:var(--pad);
  bottom:7px;
  display:flex;
}

.project-controls button{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:17px;
  transition:opacity .22s ease,transform .22s ease;
}

.project-controls button:disabled{opacity:.2}
.project-controls button:not(:disabled):hover{transform:translateY(-1px)}

.scroll-note{display:none}

/* =========================================================
   SERVICES
   ========================================================= */

.services{
  max-width:1500px;
  margin-inline:auto;
  padding:90px var(--pad) 120px;
}

.eyebrow{
  color:var(--muted);
  font-size:8px;
  font-weight:600;
  letter-spacing:.18em;
}

.service{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px 14px;
  padding:24px 0;
  border-top:1px solid var(--line);
}

.service:last-child{border-bottom:1px solid var(--line)}

.service>span{
  padding-top:5px;
  color:var(--muted);
  font-size:8px;
}

.service h3{
  font-family:var(--serif);
  font-size:36px;
  font-weight:500;
  line-height:.9;
  letter-spacing:-.03em;
}

.service p{
  grid-column:2;
  max-width:38ch;
  color:var(--muted);
  font-size:12px;
  line-height:1.52;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:700px){
  :root{--pad:3.4vw}

  .topbar{height:58px}
  .menu{min-height:58px}
  .menu-scrim{inset:58px 0 0}
  .site-menu{top:58px}

  .ambient-word{
    display:block;
    position:absolute;
    z-index:2;
    left:9vw;
    top:21%;
    font-family:var(--serif);
    font-size:clamp(160px,20vw,320px);
    line-height:.72;
    letter-spacing:-.075em;
    color:rgba(17,17,17,.018);
    transform:rotate(-4deg);
    pointer-events:none;
  }

  .intro-copy{
    top:12vh;
    left:3.4vw;
    width:290px;
  }

  .intro-copy h1{
    font-size:clamp(34px,4.4vw,52px);
  }

  .intro-text{
    font-size:10px;
  }

  .project-count-label{
    display:block;
    top:12vh;
    right:3.4vw;
  }

  .project-card{
    top:23%;
    width:min(62vw,820px);
  }

  .project-meta{
    left:3.4vw;
    right:auto;
    bottom:9.8vh;
    width:420px;
  }

  .project-index span{
    font-size:42px;
  }

  .project-meta h2{
    font-size:clamp(38px,4.8vw,60px);
  }

  .project-meta__copy{
    max-width:38ch;
    font-size:10px;
  }

  .image-link-hint{
    position:absolute;
    z-index:30;
    right:3.4vw;
    bottom:10.6vh;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:7px;
    font-weight:600;
    letter-spacing:.15em;
    pointer-events:none;
  }

  .image-link-hint i{
    color:var(--ink);
    font-size:13px;
    font-style:normal;
  }

  .scroll-progress{
    right:108px;
  }

  .service{
    grid-template-columns:54px .72fr 1fr;
    align-items:center;
  }

  .service p{grid-column:auto}
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:1100px){
  :root{--pad:4.5vw}

  .projects-runway{height:355vh}

  .intro-copy{
    left:4.5vw;
    top:17vh;
    width:300px;
  }

  .intro-copy h1{
    font-size:clamp(39px,2.9vw,56px);
  }

  .project-count-label{
    top:17vh;
    right:4.5vw;
  }

  /* active project dominates a protected central/right zone */
  .project-card{
    top:18%;
    left:58%;
    width:min(52vw,920px);
  }

  /* metadata lives completely outside the card's footprint */
  .project-meta{
    left:4.5vw;
    bottom:11vh;
    width:28vw;
    max-width:500px;
  }

  .project-index span{
    font-size:48px;
  }

  .project-meta h2{
    font-size:clamp(42px,3.35vw,64px);
  }

  .project-meta__copy{
    max-width:32ch;
    font-size:11px;
  }

  .image-link-hint{
    right:4.5vw;
    bottom:11.5vh;
  }

  .scroll-progress{
    left:4.5vw;
    right:15vw;
    bottom:28px;
  }

  .project-controls{
    right:4.5vw;
    bottom:8px;
  }

  .scroll-note{
    display:block;
    position:absolute;
    z-index:30;
    left:4.5vw;
    bottom:19px;
    color:var(--muted);
    font-size:7px;
    font-weight:600;
    letter-spacing:.16em;
  }

  .brand:hover,
  .site-menu a:hover{
    opacity:.64;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}

/* ==============================================================
   V4.5.3 — CONTINUOUS DEPTH TRANSITION
   All cards share EXACTLY the same resting position. The leaving
   card exits while the arriving one settles on that position.
   Never park an image above/below the stage or at rotateX(90deg).
   ============================================================= */
.project-stage{
  perspective:1600px;
  perspective-origin:50% 50%;
}
.project-card{
  transform:translate3d(-50%,0,0);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  filter:none;
  backface-visibility:visible;
  will-change:auto;
}
.project-card.is-active,
.project-card.is-entering,
.project-card.is-exiting{
  visibility:visible;
  opacity:1;
}
.project-card.is-active,
.project-card.is-entering{
  z-index:12;
}
.project-card.is-active{pointer-events:auto;}
.project-card.is-entering,
.project-card.is-exiting{
  pointer-events:none;
}
.project-card.is-exiting{z-index:11;}
.project-card__rotator{
  position:relative;
  width:100%;
  height:100%;
  transform:translate3d(0,0,0);
  transform-origin:center center;
  transform-style:preserve-3d;
  backface-visibility:visible;
}
.project-card__shadow{pointer-events:none;}
/* The same horizontal rotation idea, but only a restrained 12deg tilt.
   Exit and entrance overlap; both resolve in the center of the screen. */
.slide-rotate-hor-t-bck{
  animation:card-arrives .64s cubic-bezier(.17,.80,.23,1) both;
}
.slide-rotate-hor-t-bck-out{
  animation:card-leaves .54s cubic-bezier(.40,0,.45,1) both;
}
/* CSS custom property communicates travel direction to both animations. */
@keyframes card-arrives{
  0%{
    transform:translate3d(0,calc(var(--travel-dir,1) * 38px),-86px) rotateX(var(--enter-tilt,-12deg)) scale(.97);
    opacity:0;
  }
  42%{opacity:1;}
  100%{transform:translate3d(0,0,0) rotateX(0deg) scale(1);opacity:1;}
}
@keyframes card-leaves{
  0%{transform:translate3d(0,0,0) rotateX(0deg) scale(1);opacity:1;}
  55%{opacity:.25;}
  100%{
    transform:translate3d(0,calc(var(--travel-dir,1) * -42px),-86px) rotateX(var(--exit-tilt,12deg)) scale(.97);
    opacity:0;
  }
}
@media(prefers-reduced-motion:reduce){
  .slide-rotate-hor-t-bck,
  .slide-rotate-hor-t-bck-out{animation:none!important;}
}


/* ==========================================================
   V4.5.4 • direct contact + horizontal creation timeline
   ========================================================== */
.header-contact{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  color:var(--ink);
  font-size:8px;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.header-contact:hover{opacity:.6}
.header-contact span{font-size:13px;line-height:1}

.creation{
  position:relative;
  padding:92px var(--pad) 78px;
  background:#f8f6f1;
  overflow:hidden;
}
.creation::before{
  content:"";
  pointer-events:none;
  position:absolute;
  top:0;left:var(--pad);right:var(--pad);
  height:1px;background:var(--line);
}
.creation__heading{
  max-width:1280px;
  margin:0 auto 30px;
  display:grid;
  gap:14px;
}
.creation__eyebrow,.contact-section__eyebrow{
  color:var(--muted);font-size:9px;line-height:1.4;font-weight:600;letter-spacing:.16em;
}
.creation__heading h2{
  margin-top:13px;
  font-family:var(--serif);
  font-size:clamp(43px,8.2vw,80px);
  line-height:.92;
  letter-spacing:-.04em;
  font-weight:500;
}
.creation__intro{
  max-width:35ch;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}

/* V4.5.5: paced timeline + material paper cards */
.timeline{max-width:1280px;margin:0 auto;position:relative}
.timeline__rail{
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  outline-offset:3px;
}
.timeline__rail::-webkit-scrollbar{display:none}
.timeline__track{
  --timeline-dot-y:230px;
  --timeline-column:calc(100vw - 2 * var(--pad));
  position:relative;
  width:max-content;min-width:100%;
  display:flex;
  min-height:480px;
  padding:0 2px;
  isolation:isolate;
}
.timeline__line{
  position:absolute;z-index:0;
  top:var(--timeline-dot-y);
  left:calc(var(--timeline-column) / 2 + 2px);
  right:calc(var(--timeline-column) / 2 + 2px);
  height:1px;background:#c8c1b5;
  transform:translateY(-.5px);
}
.timeline__fill{
  display:block;width:100%;height:2px;
  background:linear-gradient(90deg,#4c4740,#141414);
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  transition:transform 1.25s cubic-bezier(.22,1,.36,1);
}
.timeline-step{
  position:relative;
  flex:0 0 var(--timeline-column);
  width:var(--timeline-column);
  height:474px;
  scroll-snap-align:center;
  isolation:isolate;
}
/* Alternating index cards with tactile paper, a tiny folded corner and subtle ink details. */
.timeline-step__copy{
  position:absolute;
  z-index:2;
  left:19px;right:19px;
  height:170px;
  padding:19px 20px 17px;
  background:
    repeating-linear-gradient(0deg,rgba(109,91,67,.014) 0,rgba(109,91,67,.014) 1px,transparent 1px,transparent 4px),
    linear-gradient(140deg,#fffef9 0%,#faf7ef 70%,#f2ede3 100%);
  border:1px solid rgba(111,96,79,.18);
  border-radius:2px;
  box-shadow:0 16px 25px -18px rgba(47,38,25,.38),0 5px 16px rgba(72,56,36,.045);
  opacity:0;
  transform:translateY(24px) rotate(-1.5deg) scale(.975);
  transition:
    opacity 1.15s linear,
    transform 1.3s cubic-bezier(.16,1,.3,1),
    box-shadow .5s ease;
  will-change:opacity,transform;
}
.timeline-step__copy::before{
  content:"";
  position:absolute;left:20px;top:-5px;width:37px;height:9px;
  background:rgba(214,199,169,.55);
  border:1px solid rgba(168,149,122,.16);
  transform:rotate(-6deg);
  box-shadow:0 1px 2px rgba(69,53,31,.05);
}
.timeline-step__copy::after{
  content:"";position:absolute;right:-1px;top:-1px;
  width:22px;height:22px;
  background:linear-gradient(135deg,#eee6d7 0%,#f5f0e5 47%,#f8f6f0 50%,#f8f6f0 100%);
  clip-path:polygon(0 0,100% 100%,100% 0);
  border-right:1px solid rgba(111,96,79,.16);
  border-top:1px solid rgba(111,96,79,.16);
  box-shadow:-2px 3px 3px rgba(68,52,35,.05);
}
.timeline-step.is-above .timeline-step__copy{top:11px}
.timeline-step.is-below .timeline-step__copy{
  top:282px;
  transform:translateY(24px) rotate(1.4deg) scale(.975);
}
.timeline-step.is-revealed .timeline-step__copy{
  opacity:1;
  transform:translateY(0) rotate(-.65deg) scale(1);
}
.timeline-step.is-below.is-revealed .timeline-step__copy{transform:translateY(0) rotate(.65deg) scale(1)}
.timeline-step.is-selected .timeline-step__copy{
  box-shadow:0 19px 29px -18px rgba(47,38,25,.42),0 7px 18px rgba(72,56,36,.085);
}
.timeline-step__number{
  display:block;margin-bottom:13px;
  color:#847c70;font-size:9px;font-weight:600;letter-spacing:.18em;
}
.timeline-step h3{
  font-family:var(--serif);
  font-size:clamp(30px,3.1vw,43px);
  font-weight:500;
  line-height:.98;letter-spacing:-.027em;
}
.timeline-step p{
  max-width:29ch;margin-top:10px;
  font-size:11px;line-height:1.55;color:#746d63;
}
.timeline-step__stem{
  position:absolute;z-index:1;
  left:50%;width:1px;
  background:#aea494;
  transform:scaleY(0);
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}
.timeline-step.is-above .timeline-step__stem{
  top:190px;height:40px;transform-origin:bottom;
}
.timeline-step.is-below .timeline-step__stem{
  top:230px;height:46px;transform-origin:top;
}
.timeline-step.is-revealed .timeline-step__stem{transform:scaleY(1)}
.timeline-step__dot{
  position:absolute;z-index:3;
  left:50%;top:var(--timeline-dot-y);
  width:27px;height:27px;
  display:grid;place-items:center;
  border:1px solid #b9b1a5;border-radius:50%;
  background:#f8f6f1;
  transform:translate(-50%,-50%) scale(.52);
  opacity:0;
  transition:
    opacity 1.05s linear,
    transform 1.05s cubic-bezier(.16,1,.3,1),
    background .38s ease;
}
.timeline-step__dot span{
  width:6px;height:6px;border-radius:50%;background:#868076;
  transition:background .38s ease,transform .38s ease;
}
.timeline-step.is-revealed .timeline-step__dot{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Visited dots become solid black as the line passes through each card.
   Keep active and visited styles separate: past milestones remain dark. */
.timeline-step.is-passed .timeline-step__dot,
.timeline-step.is-selected .timeline-step__dot{
  background:var(--ink);
  border-color:var(--ink);
}
.timeline-step.is-passed .timeline-step__dot span,
.timeline-step.is-selected .timeline-step__dot span{
  background:#fff;
  transform:scale(1.16);
}
.timeline-step.is-selected .timeline-step__dot{
  box-shadow:0 0 0 5px rgba(17,17,17,.085);
}
@media(max-width:699px){
  /* Follow the finger directly: no delayed visual mismatch between line and dot. */
  .timeline__fill{transition:none}
  .timeline__rail.is-programmatic{scroll-snap-type:none}
  .timeline-step__dot{transition:opacity .75s linear, transform .85s cubic-bezier(.16,1,.3,1), background .26s ease, border-color .26s ease, box-shadow .26s ease}
  .timeline-step__dot{width:30px;height:30px;touch-action:manipulation}
  .timeline__rail{scroll-padding-inline:0}
}
.timeline__footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:17px;border-top:1px solid var(--line);
}
.timeline__footer p{
  display:flex;flex-wrap:wrap;gap:14px;
  color:var(--muted);font-size:8px;font-weight:600;letter-spacing:.15em;
}
.timeline__footer p span{color:var(--ink)}
.timeline__controls{display:flex;gap:2px}
.timeline__controls button{
  display:grid;place-items:center;
  width:40px;height:40px;font-size:22px;
  transition:opacity .3s ease;
}
.timeline__controls button:disabled{opacity:.25}
.timeline-motion-word{display:inline-block;white-space:nowrap}
.timeline-motion-char{display:inline-block;will-change:opacity,transform}
.timeline-motion-space{display:inline-block;width:.27em}
.timeline-ready [data-timeline-letters] .timeline-motion-char{
  opacity:0;transform:translateY(9px);
}
.timeline-ready .timeline-step.is-revealed [data-timeline-letters] .timeline-motion-char,
.timeline-ready .creation__heading.is-revealed [data-timeline-letters] .timeline-motion-char,
.timeline-ready .contact-section.is-revealed [data-timeline-letters] .timeline-motion-char{
  opacity:1;transform:translateY(0);
  transition:opacity .73s linear,transform .92s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--letter) * 23ms + 170ms);
}
.contact-section{
  padding:70px var(--pad) 20px;
  background:#eae7df;
}
.contact-section__eyebrow{max-width:1280px;margin:0 auto 18px}
.contact-section__row{
  max-width:1280px;margin:0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;
  padding-bottom:77px;
}
.contact-section h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(46px,9vw,100px);
  line-height:.9;
  letter-spacing:-.045em;
}
.contact-section__button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:49px;
  padding:0 18px;
  color:#f7f5ef;background:#161616;
  font-size:10px;font-weight:600;letter-spacing:.11em;
  transition:transform .2s ease, background .2s ease;
}
.contact-section__button span{font-size:16px}
.contact-section__button:hover{transform:translateY(-2px);background:#4e4942}
.contact-section__bottom{
  max-width:1280px;margin:0 auto;
  padding-top:15px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:8px;letter-spacing:.15em;font-weight:600;
}
@media(min-width:700px){
  .creation{padding-top:116px;padding-bottom:98px}
  .creation__heading{grid-template-columns:1.25fr .75fr;align-items:end;margin-bottom:49px}
  .creation__intro{justify-self:end;margin-bottom:3px;font-size:13px}
  .timeline__track{--timeline-column:20%;width:100%;min-height:480px}
  .timeline-step{height:474px}
  .timeline-step__copy{left:7px;right:7px;padding:18px 14px 16px;height:171px}
  .timeline-step.is-above .timeline-step__copy{top:11px}
  .timeline-step.is-below .timeline-step__copy{top:282px}
  .timeline-step h3{font-size:clamp(25px,2.6vw,38px)}
  .timeline-step p{font-size:11px}
  .timeline-step__number{margin-bottom:13px}
  .timeline__controls{display:none}
  .timeline__footer p{margin-left:auto}
  .contact-section{padding-top:100px}
  .contact-section__row{flex-direction:row;justify-content:space-between;align-items:end;gap:25px;padding-bottom:106px}
  .contact-section__button{white-space:nowrap;margin-bottom:8px}
}
@media(min-width:1100px){
  .creation__heading{margin-bottom:64px}
  .timeline__track{min-height:490px}
  .timeline-step{height:480px}
  .timeline-step__copy{left:10px;right:10px;padding:19px 17px 16px}
}
@media(prefers-reduced-motion:reduce){
  .timeline-step__copy,.timeline-step__stem,.timeline-step__dot,
  .timeline-motion-char,.timeline__fill{transition:none!important}
}

.contact-section h2 > span[data-timeline-letters]{display:block}


/* Shared white dissolve — no navigation library needed. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99999;
  background:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1);
}
html.is-arriving body::after{
  animation:paperPageReveal .72s .07s both;
}
html.is-leaving body::after{
  animation:none!important;
  opacity:1;
  transition:opacity .48s cubic-bezier(.22,.61,.36,1);
}
@keyframes paperPageReveal{
  from{opacity:1}
  to{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  body::after{transition-duration:.01ms!important}
  html.is-arriving body::after{animation-duration:.01ms!important;animation-delay:0s!important}
}


/* =========================================================
   V4.6.0 — Home timeline driven by vertical page scroll
   Sticky gallery travels left only as the viewer scrolls down.
   ========================================================= */
.creation{
  height:calc(100dvh + 300dvh);
  min-height:0;
  padding:0;
  overflow:visible;
}
.creation__sticky{
  position:sticky;
  z-index:1;
  top:54px;
  height:calc(100dvh - 54px);
  padding:clamp(14px,3vh,34px) var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:#f8f6f1;
}
.creation__heading{
  width:100%;
  margin:0 auto clamp(12px,2vh,26px);
  gap:8px;
  flex:0 0 auto;
}
.creation__heading h2{margin-top:7px;font-size:clamp(35px,7vw,69px)}
.creation__intro{font-size:11px;line-height:1.45}
.timeline{width:100%;max-width:1280px;margin:0 auto;min-width:0;flex:0 0 auto}
.timeline__rail{
  overflow:hidden;
  touch-action:pan-y;
  scroll-snap-type:none;
  width:100%;
}
.timeline__track{
  --timeline-column:min(80vw,330px);
  --timeline-dot-y:170px;
  width:calc(var(--timeline-column)*5);
  min-width:0;
  min-height:360px;
  padding:0;
  will-change:transform;
}
.timeline__line{
  left:calc(var(--timeline-column)/2);
  right:calc(var(--timeline-column)/2);
}
.timeline__fill{transition:none!important;will-change:transform}
.timeline-step{height:358px;scroll-snap-align:none}
.timeline-step__copy{
  height:153px;
  left:10px;right:10px;
  padding:14px 15px;
  transition:none!important;
  will-change:transform,opacity;
}
.timeline-step.is-above .timeline-step__copy{top:4px}
.timeline-step.is-below .timeline-step__copy{top:196px}
.timeline-step__number{margin-bottom:6px}
.timeline-step h3{font-size:clamp(25px,5vw,33px);line-height:.93}
.timeline-step p{font-size:10px;line-height:1.35;margin-top:8px}
.timeline-step.is-above .timeline-step__stem{top:157px;height:13px}
.timeline-step.is-below .timeline-step__stem{top:170px;height:26px}
.timeline-step__stem{transition:none!important}
.timeline-step__dot{transition:background .18s linear,border-color .18s linear,box-shadow .2s ease!important;will-change:opacity,transform}
.timeline__footer{padding-top:8px}
.timeline__controls{display:flex}
/* Do not launch the old timed letter sequence; card letter fades track the step threshold. */
.timeline-ready .timeline-step.is-revealed [data-timeline-letters] .timeline-motion-char{
  transition-duration:.34s,.34s;
  transition-delay:calc(var(--letter) * 12ms);
}
@media(min-width:700px){
  .creation{height:calc(100dvh + 300dvh)}
  .creation__sticky{top:58px;height:calc(100dvh - 58px)}
  .creation__heading{margin-bottom:clamp(14px,2vh,25px)}
  .timeline__track{
    --timeline-column:clamp(260px,29vw,365px);
    --timeline-dot-y:213px;
    min-height:458px;
  }
  .timeline-step{height:456px}
  .timeline-step__copy{height:174px;padding:18px 17px}
  .timeline-step.is-above .timeline-step__copy{top:10px}
  .timeline-step.is-below .timeline-step__copy{top:276px}
  .timeline-step h3{font-size:clamp(29px,2.8vw,39px)}
  .timeline-step p{font-size:11px;line-height:1.5}
  .timeline-step.is-above .timeline-step__stem{top:184px;height:29px}
  .timeline-step.is-below .timeline-step__stem{top:213px;height:63px}
  .timeline__controls{display:flex}
}
@media(max-height:720px) and (max-width:699px){
  .creation__sticky{padding-top:7px;padding-bottom:7px}
  .creation__heading{margin-bottom:5px}
  .creation__heading h2{font-size:32px}
  .creation__intro{font-size:10px}
  .timeline__track{--timeline-dot-y:145px;min-height:310px}
  .timeline-step{height:308px}
  .timeline-step__copy{height:132px;padding:10px 13px}
  .timeline-step h3{font-size:25px}
  .timeline-step p{font-size:9px;line-height:1.25;margin-top:5px}
  .timeline-step.is-above .timeline-step__copy{top:0}
  .timeline-step.is-below .timeline-step__copy{top:171px}
  .timeline-step.is-above .timeline-step__stem{top:132px;height:13px}
  .timeline-step.is-below .timeline-step__stem{top:145px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  .timeline-step__copy,.timeline-step__stem,.timeline-step__dot{transition:none!important}
}

/* Selection may be nearest, but a dot turns black only AFTER the line crosses it. */
.timeline-step.is-selected:not(.is-passed) .timeline-step__dot{
  background:#f8f6f1;
  border-color:#b9b1a5;
}
.timeline-step.is-selected:not(.is-passed) .timeline-step__dot span{
  background:#868076;
  transform:none;
}


/* V4.6.1 — ATMOSPHERE: tonal light only, never an illustrated element. */
:root{
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",Arial,Helvetica,sans-serif;
  --atmosphere-shift:0px;
}
.ambient-atmosphere{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;contain:paint;
}
.ambient-atmosphere::before,
.ambient-atmosphere::after{
  content:"";position:absolute;inset:-25%;
  pointer-events:none;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.ambient-atmosphere::before{
  opacity:.66;
  background:
    radial-gradient(ellipse 31% 30% at 70% 35%,rgba(255,255,255,.92),rgba(255,255,255,0) 78%),
    radial-gradient(ellipse 32% 34% at 27% 66%,rgba(214,205,190,.18),rgba(214,205,190,0) 78%);
  animation:atmosphereGlide 36s ease-in-out infinite alternate;
}
.ambient-atmosphere::after{
  opacity:.48;
  background:
    radial-gradient(ellipse 26% 32% at 28% 27%,rgba(255,254,248,.94),transparent 82%),
    radial-gradient(ellipse 29% 31% at 73% 72%,rgba(205,191,175,.15),transparent 82%);
  animation:atmosphereDrift 48s ease-in-out infinite alternate;
}
@keyframes atmosphereGlide{
  0%{transform:translate3d(-1.5%,1.2%,0) scale(1)}
  100%{transform:translate3d(2%,-1.5%,0) scale(1.025)}
}
@keyframes atmosphereDrift{
  0%{transform:translate3d(1.5%,-1%,0) scale(1.01)}
  100%{transform:translate3d(-1.7%,1.5%,0) scale(.985)}
}
@media(prefers-reduced-motion:reduce){
 .ambient-atmosphere::before,.ambient-atmosphere::after{animation:none!important;will-change:auto!important}
}


/* Atmospheric layers appear behind content, with no decorative foreground shapes. */
.projects-sticky{background:linear-gradient(116deg,#fbfaf6 0%,#f5f2ec 58%,#ece8e1 100%)}
.projects-sticky::before{opacity:.27}
.creation__sticky{background:rgba(248,246,241,.87)}
.creation__heading,.timeline{position:relative;z-index:2}
.contact-section{position:relative;isolation:isolate;background:#eae7df}
.contact-section .ambient-atmosphere{z-index:-1;opacity:.64}
/* Legibility after the font update. */
.intro-copy h1{letter-spacing:-.038em}
.project-meta h2,.creation__heading h2,.contact-section h2{letter-spacing:-.037em}
.intro-text,.project-meta__copy{font-size:max(11px,1.04vw);line-height:1.45}
.timeline-step p{font-size:clamp(11px,1vw,13px);line-height:1.42}
.timeline__footer p,.creation__intro{font-size:clamp(11px,1.05vw,13px)}
/* Reduce the number of empty scroll screens, especially on phones. */
.creation{height:calc(100dvh + 235dvh)}
@media(min-width:700px){.creation{height:calc(100dvh + 265dvh)}}
@media(max-width:699px){
 .timeline-step h3{font-size:clamp(25px,5.5vw,34px)}
 .timeline-step__copy{padding:13px 14px}
 .timeline__track{--timeline-column:min(84vw,350px)}
}
@media(max-height:720px) and (max-width:699px){
 .creation__heading h2{font-size:clamp(30px,7vw,36px)}
 .timeline-step__copy{padding:9px 12px;height:132px}
 .timeline-step p{font-size:10.5px;line-height:1.26;margin-top:4px}
}
/* Avoid a sticky, multi-screen forced journey when reduced motion is requested. */
@media(prefers-reduced-motion:reduce){
 .creation{height:auto!important;min-height:0!important;padding:48px var(--pad)!important}
 .creation__sticky{position:relative!important;top:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0!important}
 .timeline__rail{overflow-x:auto!important;touch-action:pan-x pan-y!important;scrollbar-width:thin}
 .timeline__track{transform:none!important;will-change:auto!important}
 .timeline__fill{transform:scaleX(1)!important}
 .timeline-step__copy{opacity:1!important;transform:none!important;will-change:auto!important}
 .timeline-step__stem{transform:scaleY(1)!important}
 .timeline-step__dot{opacity:1!important;transform:translate(-50%,-50%)!important}
 .timeline-motion-char{opacity:1!important;transform:none!important}
 .timeline__controls{display:none!important}
}

/* V4.6.2 — Luz em movimento: faixas largas de luz/sombra, não objetos decorativos.
   O deslocamento combina um ciclo ambiente com o progresso real de leitura. */
:root { --atmos-x:0px; --atmos-y:0px; }
.ambient-atmosphere {
  pointer-events:none;
  overflow:hidden;
  contain:paint;
  background:linear-gradient(127deg, #faf8f3 0%, #f2ede4 45%, #e8e1d6 100%);
}
.ambient-atmosphere::before,
.ambient-atmosphere::after {
  content:"";
  position:absolute;
  inset:-23%;
  pointer-events:none;
  will-change:transform;
  opacity:1;
}
.ambient-atmosphere::before {
  background:
    radial-gradient(ellipse 31% 50% at 83% 32%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.43) 55%,transparent 92%),
    linear-gradient(111deg,transparent 17%,rgba(212,198,178,.53) 32%,rgba(235,223,204,.48) 44%,rgba(255,255,255,.83) 53%,rgba(255,255,255,.15) 65%,transparent 78%);
  animation:lightAcross 14s ease-in-out infinite alternate;
}
.ambient-atmosphere::after {
  background:
    radial-gradient(ellipse 45% 38% at 18% 78%,rgba(189,170,146,.28) 0%,rgba(205,189,168,.12) 63%,transparent 92%),
    radial-gradient(ellipse 40% 45% at 90% 82%,rgba(255,255,255,.81),transparent 81%);
  animation:shadowAcross 19s ease-in-out infinite alternate;
}
@keyframes lightAcross {
  from { transform:translate3d(calc(var(--atmos-x) - 6%),calc(var(--atmos-y) + 1%),0) scale(1.04) rotate(-2deg); }
  to   { transform:translate3d(calc(var(--atmos-x) + 8%),calc(var(--atmos-y) - 2%),0) scale(1.04) rotate(2deg); }
}
@keyframes shadowAcross {
  from { transform:translate3d(calc(var(--atmos-x) + 5%),calc(var(--atmos-y) - 1%),0) scale(1.04); }
  to   { transform:translate3d(calc(var(--atmos-x) - 7%),calc(var(--atmos-y) + 2%),0) scale(1.05); }
}
@media (prefers-reduced-motion:reduce) {
  .ambient-atmosphere::before,.ambient-atmosphere::after {
    animation:none!important;transform:none!important;will-change:auto!important;
  }
}

/* Expor as camadas: na versão anterior a luz se perdia sob fundos quase opacos. */
.projects-sticky { background:#f0ebe2; }
.projects-sticky > .ambient-atmosphere {position:absolute;inset:0;z-index:0;opacity:1}
.projects-sticky::before {opacity:0;}
.creation__sticky {background:#eee7dc;isolation:isolate}
.creation__sticky > .ambient-atmosphere {position:absolute;inset:0;z-index:0;opacity:1}
.creation__heading,.timeline,.timeline__footer {position:relative;z-index:2}
.contact-section {background:#eee8de;isolation:isolate}
.contact-section > .ambient-atmosphere {z-index:0;opacity:1}
.contact-section > :not(.ambient-atmosphere) {position:relative;z-index:1}
/* Pequeno contraste editorial: ainda clean, mas a fonte não parece idêntica. */
.intro-copy .headline-line:last-child {font-style:italic;letter-spacing:-.043em}
.project-meta h2 {font-style:italic;letter-spacing:-.047em}
.creation__heading h2 {letter-spacing:-.054em}
@media(max-width:699px){
  .intro-copy h1{letter-spacing:-.05em}
  .intro-copy .headline-line:last-child{letter-spacing:-.055em}
  .creation__heading h2{letter-spacing:-.055em}
}


/* =========================================================
   V4.6.3 — PAPER DEPTH
   matte materiality + wider typography + structural depth
   ========================================================= */
:root{
  --bg:#efeae2;
  --paper:#faf6ef;
  --paper-2:#f5f0e8;
  --ink:#171411;
  --muted:#6f685f;
  --line:rgba(23,20,17,.11);
  --line-soft:rgba(23,20,17,.06);
  --shadow-paper:0 18px 34px rgba(49,40,29,.06),0 2px 5px rgba(49,40,29,.04);
  --shadow-float:0 38px 80px rgba(28,24,19,.12),0 8px 22px rgba(28,24,19,.06);
}
body{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.52), rgba(255,255,255,0) 34%),
    linear-gradient(180deg,#f5f1ea 0%,#efebe3 48%,#ece7de 100%);
  color:var(--ink);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.62;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(64,53,40,.06) .8px, transparent .95px),
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.72) .7px, transparent .85px),
    repeating-linear-gradient(0deg, rgba(89,74,56,.017) 0, rgba(89,74,56,.017) 1px, transparent 1px, transparent 4px);
  background-size: 15px 15px, 21px 21px, auto;
  transform:translate3d(0,var(--grain-shift,0px),0);
}
body::after{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 16%, rgba(0,0,0,.055), transparent 38%),
    radial-gradient(ellipse at 84% 12%, rgba(255,255,255,.55), transparent 26%),
    radial-gradient(ellipse at 72% 80%, rgba(0,0,0,.045), transparent 34%),
    radial-gradient(ellipse at 10% 90%, rgba(255,255,255,.38), transparent 24%);
  transform:translate3d(calc(var(--atmos-x,0px) * .55), calc(var(--atmos-y,0px) * .55), 0);
  transition:transform .22s linear;
}
.projects-sticky,
.creation,
.contact-section{
  background:transparent !important;
}
.projects-sticky{
  perspective:1700px;
}
.projects-sticky::before{
  background:
    radial-gradient(ellipse at 24% 28%, rgba(255,255,255,.24), transparent 28%),
    radial-gradient(ellipse at 80% 78%, rgba(0,0,0,.04), transparent 26%);
  opacity:1;
}
.projects-sticky::after{
  opacity:.14;
}
.ambient-atmosphere{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.ambient-atmosphere::before,
.ambient-atmosphere::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
}
.ambient-atmosphere::before{
  background:
    radial-gradient(ellipse at 20% 26%, rgba(0,0,0,.055), transparent 34%),
    radial-gradient(ellipse at 86% 16%, rgba(255,255,255,.34), transparent 18%),
    radial-gradient(ellipse at 80% 76%, rgba(0,0,0,.045), transparent 30%);
  transform:translate3d(calc(var(--atmos-x,0px) * .45), calc(var(--atmos-y,0px) * .45), 0);
  filter:blur(4px);
  opacity:.9;
}
.ambient-atmosphere::after{
  opacity:.18;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(48,39,30,.11) .6px, transparent .8px),
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.6) .55px, transparent .72px);
  background-size:18px 18px, 24px 24px;
  transform:translate3d(calc(var(--grain-shift,0px) * .75), calc(var(--grain-shift,0px) * -.65), 0);
}
.topbar,
.site-menu,
.menu-scrim{
  backdrop-filter:blur(10px);
}
.topbar{
  background:rgba(249,245,238,.82);
  border-bottom-color:rgba(23,20,17,.09);
}
.menu__label,
.brand,
.topnote,
.header-contact,
.site-menu__top>span,
.site-menu__foot,
.site-menu a>span,
.intro-label,
.project-meta__line>p,
.creation__eyebrow,.contact-section__eyebrow,
.eyebrow,.scroll-note{
  font-size:8.5px;
  letter-spacing:.14em;
}
.site-menu a strong,
.intro-copy h1,
.project-count-label span,
.project-index span,
.project-meta h2,
.service h3,
.creation__heading h2{
  font-family:var(--serif);
  font-style:normal !important;
}
.intro-copy h1{
  max-width:420px;
  font-weight:700;
  font-size:clamp(31px,8.7vw,62px);
  line-height:.92;
  letter-spacing:-.055em;
}
.intro-text,
.project-meta__copy{
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.project-count-label span,
.project-index span{
  font-weight:700;
  letter-spacing:-.05em;
}
.project-meta h2{
  max-width:92%;
  font-weight:700;
  font-size:clamp(34px,9.1vw,60px);
  line-height:.9;
  letter-spacing:-.05em;
}
.project-card__shadow{
  inset:auto 10% -11%;
  height:24%;
  background:radial-gradient(circle,rgba(24,20,16,.18),rgba(24,20,16,0) 72%);
  filter:blur(22px);
  transform:translateZ(-45px);
}
.project-card__frame{
  border-radius:2px;
  box-shadow:var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)),
    #ddd7cd;
}
.project-card__frame::before{
  display:none;
}
.project-card img{
  transform:scale(1.02);
  filter:saturate(.96) contrast(1.01);
}
.project-card__shell{
  transform:
    rotateX(calc(var(--tilt-y) * .45))
    rotateY(calc(var(--tilt-x) * .45))
    translateY(var(--lift));
}
.project-card.is-active .project-card__frame{
  box-shadow:0 34px 88px rgba(22,19,15,.14), 0 10px 24px rgba(22,19,15,.06), inset 0 0 0 1px rgba(255,255,255,.4);
}
.project-meta{
  padding:14px 16px 15px;
  background:rgba(250,246,239,.6);
  border:1px solid rgba(23,20,17,.08);
  box-shadow:var(--shadow-paper);
  backdrop-filter:blur(6px);
}
.service,
.creation__heading,
.contact-card,
.timeline-card,
.story-paper,
.project-title,
.home-arrow,.page-top__contact,
.project-nav a,
.site-menu,
.timeline__arrow,
.contact-button{
  box-shadow:var(--shadow-paper);
}
.creation,
.contact-section{
  position:relative;
}
.service h3{
  font-weight:700;
  font-size:clamp(32px,4vw,52px);
  letter-spacing:-.04em;
  line-height:.92;
}
@media (min-width:700px){
  .intro-copy h1{font-size:clamp(36px,4.7vw,64px);max-width:500px}
  .project-meta{width:460px}
  .project-meta h2{font-size:clamp(40px,5.1vw,66px)}
}
@media (min-width:1100px){
  .intro-copy{width:360px}
  .intro-copy h1{font-size:clamp(42px,3vw,62px)}
  .project-meta{width:31vw;max-width:560px}
  .project-meta h2{font-size:clamp(44px,3.35vw,68px)}
}
@media (prefers-reduced-motion:reduce){
  body::before, body::after,
  .ambient-atmosphere::before,.ambient-atmosphere::after{
    transform:none !important;
  }
}

/* ==========================================================
   V4.6.4 — MATTE PAPER: ordinary tactile paper, wider titles,
   protected image region and composed editorial cards.
   ========================================================== */
:root{
  --serif:"Bricolage Grotesque", "Arial", sans-serif;
  --sans:"Plus Jakarta Sans", "Arial", sans-serif;
  --bg:#f4f1eb;
  --paper:#f6f3ed;
  --ink:#171612;
  --muted:#5f5b54;
  --line:rgba(44,38,32,.16);
  --line-soft:rgba(44,38,32,.09);
  --paper-texture:url("assets/textures/paper-matte.webp");
  --paper-shadow:0 12px 24px rgba(46,38,28,.07),0 2px 4px rgba(46,38,28,.035);
}
body{background:#f4f1eb var(--paper-texture) repeat;color:var(--ink)}
/* Use continuous, irregular grain rather than the old visible dot grid. */
body::before,body::after{background-image:none}
body::before{display:none}
/* White dissolve remains on body::after; do not override its navigation animation. */
body::after{background:#fff}
.projects-sticky,.creation__sticky,.services,.contact-section{
  background-color:#f4f1eb!important;
  background-image:var(--paper-texture)!important;
  background-repeat:repeat!important;
}
.projects-sticky::before,.projects-sticky::after{display:none}
/* No polished gradients, sweeping light, reflective highlights or glass material. */
.ambient-atmosphere{background:transparent!important;opacity:1!important;contain:paint}
.ambient-atmosphere::before{
  display:block!important;inset:-12%!important;opacity:.62!important;
  background:radial-gradient(ellipse 40% 38% at 7% 16%,rgba(68,58,45,.09),transparent 88%),
             radial-gradient(ellipse 42% 36% at 95% 87%,rgba(65,54,41,.075),transparent 90%)!important;
  animation:none!important;filter:blur(28px)!important;
  transform:translate3d(calc(var(--atmos-x,0px) * .42),calc(var(--atmos-y,0px) * .42),0)!important;
}
.ambient-atmosphere::after{display:none!important}
.topbar,.site-menu{
  background-color:#f6f3ed;
  background-image:var(--paper-texture);
  backdrop-filter:none;
}
.menu-scrim{backdrop-filter:none}
.menu__label,.brand,.header-contact{font-size:10px;letter-spacing:.08em}
.site-menu a strong{font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:-.035em}
/* Prevent the first and second line from visually intruding over the central project. */
.intro-copy{top:clamp(77px,12vh,122px);width:calc(100% - 2 * var(--pad));max-width:580px}
.intro-copy h1{
  max-width:100%;font-family:var(--serif);font-style:normal!important;
  font-weight:750;font-size:clamp(27px,7.1vw,37px);line-height:1.08;
  letter-spacing:-.045em;overflow-wrap:normal;
}
.intro-copy .headline-line:last-child{font-style:normal!important;letter-spacing:-.045em}
.headline-line{white-space:normal;max-width:100%}
.intro-label{font-size:10px}
.intro-text{font-size:12px;line-height:1.5;max-width:31ch;margin-top:13px}
/* On narrow viewports the image is BELOW the headline, and metadata BELOW the image. */
.project-card{top:32%;width:min(78vw,680px)}
.project-card__frame,.project-card.is-active .project-card__frame{
  background:#e6e1da;border:1px solid rgba(47,39,29,.14);border-radius:1px;
  box-shadow:0 24px 47px rgba(43,36,26,.14),0 5px 10px rgba(43,36,26,.06);
}
.project-card__frame::before,.project-card__shadow{display:none!important}
.project-card img{filter:none;transform:scale(1.005)}
.project-card__shell{transform:translateY(var(--lift))!important}
.project-meta{
  background-color:#f7f4ee!important;background-image:var(--paper-texture)!important;
  border:1px solid rgba(47,39,29,.13);
  backdrop-filter:none!important;box-shadow:var(--paper-shadow);
  padding:18px 19px 20px;
  left:var(--pad);right:var(--pad);width:auto;max-width:530px;
  bottom:9.1vh;
}
.project-meta__line{gap:16px;align-items:center;margin-bottom:13px}
.project-index span{font-size:clamp(36px,7vw,45px);font-weight:750;letter-spacing:-.045em;line-height:.8}
.project-index small,.project-meta__line>p{font-size:10px;letter-spacing:.10em}
.project-meta h2{
  font-family:var(--serif);font-style:normal!important;font-size:clamp(30px,7.6vw,43px);
  font-weight:750;letter-spacing:-.045em;line-height:1.03;max-width:100%;
}
.project-meta__copy{font-size:12px;line-height:1.5;max-width:48ch;margin-top:12px}
.project-count-label span{font-family:var(--serif);font-weight:750;font-size:26px}
/* Simple matte paper instead of corner folds, tape or satin gradients. */
.creation__heading{box-shadow:none!important}
.creation__heading h2,.contact-section h2{
  font-family:var(--serif);font-style:normal!important;font-weight:750;
  letter-spacing:-.05em;line-height:1.02;
}
.creation__heading h2{font-size:clamp(30px,7vw,67px)}
.creation__intro{font-size:clamp(12px,1.12vw,15px);line-height:1.55}
.timeline{isolation:isolate}
.timeline__rail{
  mask-image:linear-gradient(to right, transparent 0, #000 clamp(25px,5vw,92px), #000 calc(100% - clamp(25px,5vw,92px)), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 clamp(25px,5vw,92px), #000 calc(100% - clamp(25px,5vw,92px)), transparent 100%);
}
.timeline-step__copy,.timeline-step.is-selected .timeline-step__copy{
  background:#f7f4ee var(--paper-texture) repeat!important;
  border:1px solid rgba(47,39,29,.14);border-radius:1px;
  box-shadow:var(--paper-shadow)!important;
}
.timeline-step__copy::before,.timeline-step__copy::after{display:none}
.timeline-step__number{color:#686156;font-size:10px}
.timeline-step h3{font-family:var(--serif);font-style:normal;font-weight:750;letter-spacing:-.04em;line-height:1.04}
.timeline-step p{color:var(--muted);font-size:clamp(12px,1vw,14px);line-height:1.43}
.timeline__footer p{font-size:10px;letter-spacing:.1em}
.timeline-step__dot{background:#f6f3ed}
/* Open space around each service. Each one is an independent ordinary-paper sheet. */
.services{max-width:1400px;margin-inline:auto;padding:clamp(70px,9vw,125px) var(--pad) clamp(95px,12vw,160px)}
.services>.eyebrow{font-size:11px;margin-bottom:29px}
.service{
  display:grid;grid-template-columns:38px minmax(0,1fr);
  align-items:start;gap:12px 20px;
  margin:0 0 16px;padding:clamp(24px,4.3vw,48px);
  border:1px solid rgba(47,39,29,.13)!important;
  background:#f7f4ee var(--paper-texture) repeat;
  box-shadow:var(--paper-shadow);min-height:146px;
}
.service:last-child{border-bottom:1px solid rgba(47,39,29,.13)}
.service>span{font-size:11px;letter-spacing:.09em;padding-top:8px}
.service h3{
  font-family:var(--serif);font-style:normal!important;font-size:clamp(33px,5vw,57px);
  font-weight:750;letter-spacing:-.045em;line-height:1.05;
  overflow-wrap:normal;
}
.service p{grid-column:2;max-width:48ch;font-size:clamp(13px,1.17vw,16px);line-height:1.65}
.contact-section{border-top:1px solid rgba(47,39,29,.12)}
@media(min-width:700px){
 .intro-copy{top:13vh;left:3.4vw;width:35vw;max-width:none}
 .intro-copy h1{font-size:clamp(28px,3.5vw,39px)}
 .intro-text{font-size:12px}
 .project-card{top:24%;left:73%;width:min(53vw,600px)}
 .project-meta{left:3.4vw;right:auto;bottom:10vh;width:min(36.5vw,420px);padding:21px 22px 23px}
 .project-meta h2{font-size:clamp(31px,3.4vw,43px)}
 .project-meta__copy{font-size:12px}
 .timeline-step__copy{min-height:175px;}
 .timeline-step h3{font-size:clamp(24px,2.4vw,34px)}
 .timeline-step p{font-size:clamp(11px,.88vw,13px)}
 .service{grid-template-columns:52px minmax(0,1fr)}
}
@media(min-width:1050px){
 .intro-copy{left:4.5vw;top:13vh;width:31vw;max-width:520px}
 .intro-copy h1{font-size:clamp(34px,2.7vw,49px);line-height:1.06}
 .project-card{top:18%;left:68.3%;width:min(55vw,920px)}
 .project-meta{left:4.5vw;width:min(32vw,560px);bottom:10.8vh;padding:25px 28px 27px}
 .project-meta h2{font-size:clamp(36px,3.2vw,53px)}
 .project-meta__copy{font-size:13px}
 .service{grid-template-columns:64px minmax(230px,1.1fr) minmax(230px,.9fr);align-items:center;gap:24px;min-height:185px}
 .service p{grid-column:3;font-size:clamp(14px,1.1vw,16px)}
 .service>span{align-self:center}
}
@media(max-width:699px) and (max-height:720px){
 .intro-copy{top:67px}
 .intro-copy h1{font-size:clamp(25px,7vw,32px)}
 .intro-text{margin-top:7px;font-size:11px}
 .project-card{top:32%;width:min(68vw,460px)}
 .project-meta{padding:13px 16px 14px;bottom:8vh}
 .project-meta__line{margin-bottom:6px}
 .project-meta h2{font-size:clamp(27px,7vw,34px)}
 .project-meta__copy{margin-top:5px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .ambient-atmosphere::before{transform:none!important}
}


/* =========================================================
   V4.6.5 — POST-IT PAPER
   background inspired by real matte creased paper + taped notes
   ========================================================= */
:root{
  --paper-photo:url("assets/textures/paper-reference-creased.jpg");
  --paper-texture:url("assets/textures/paper-matte.webp");
  --paper-base:#f6f4ef;
  --note:#fbf8f1;
  --note-edge:rgba(48,40,31,.14);
  --note-shadow:0 14px 28px rgba(46,38,28,.10),0 2px 4px rgba(46,38,28,.05);
  --tape:#e9dec7;
}
body{
  background:var(--paper-base)!important;
}
body::before{
  content:"";
  display:block!important;
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background-image:var(--paper-photo);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.34;
  filter:grayscale(.06) saturate(.88) brightness(1.04) contrast(.98);
}
/* keep white transition overlay on body::after from navigation */
.projects-sticky,.creation__sticky,.services,.contact-section{
  background:transparent!important;
}
.topbar,.site-menu{
  background:rgba(246,244,239,.88)!important;
  backdrop-filter:blur(10px)!important;
}
/* safer composition so the heading never collides with the project image */
@media(min-width:1050px){
  .intro-copy{left:4.6vw!important;top:12.4vh!important;width:min(28.5vw,470px)!important;max-width:470px!important}
  .intro-copy h1{font-size:clamp(33px,2.5vw,46px)!important;line-height:1.03!important;max-width:13ch!important}
  .project-card{left:70.8%!important;top:18%!important;width:min(50vw,860px)!important}
  .project-meta{left:4.6vw!important;width:min(31vw,520px)!important;bottom:9.8vh!important}
}
@media(min-width:700px) and (max-width:1049px){
  .intro-copy{width:min(34vw,380px)!important}
  .project-card{left:74%!important;width:min(51vw,560px)!important}
  .project-meta{width:min(38vw,390px)!important}
}
/* Post-it / paper note look */
.project-meta,
.timeline-step__copy,
.service,
.contact-section__button,
.home-arrow,.page-top__contact,
.project-nav a{
  background:linear-gradient(180deg, rgba(251,248,241,.98), rgba(247,243,234,.98))!important;
  border:1px solid var(--note-edge)!important;
  box-shadow:var(--note-shadow)!important;
}
.project-meta::before,
.project-meta::after,
.timeline-step__copy::before,
.timeline-step__copy::after,
.service::before,
.service::after,
.story-paper::before,
.story-paper::after{
  content:"";
  position:absolute;
  top:-10px;
  width:62px;
  height:18px;
  background:linear-gradient(180deg, rgba(233,222,199,.92), rgba(226,214,190,.72));
  border:1px solid rgba(168,149,118,.14);
  box-shadow:0 1px 2px rgba(74,59,38,.05);
  opacity:.95;
  pointer-events:none;
}
.project-meta::before,
.timeline-step__copy::before,
.service::before,
.story-paper::before{left:18px;transform:rotate(-6deg)}
.project-meta::after,
.timeline-step__copy::after,
.service::after,
.story-paper::after{right:18px;transform:rotate(6deg);opacity:.7;width:48px}

.project-meta{
  padding:24px 25px 24px!important;
  background-image:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.04))!important;
  overflow:visible;
}
.project-meta__line{margin-bottom:12px!important}
.project-index span{font-size:clamp(38px,6vw,49px)!important}
.project-meta h2{font-size:clamp(34px,6vw,49px)!important;line-height:1.02!important;margin-top:2px}
.project-meta__copy{font-size:13px!important;line-height:1.62!important;max-width:41ch!important}
.image-link-hint{bottom:40px!important;right:clamp(18px,3vw,38px)!important}

/* timeline notes */
.timeline{overflow:visible}
.timeline__rail{
  mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 6%, #000 13%, #000 87%, rgba(0,0,0,.55) 94%, transparent 100%)!important;
  -webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 6%, #000 13%, #000 87%, rgba(0,0,0,.55) 94%, transparent 100%)!important;
}
.timeline-step__copy,
.timeline-step.is-selected .timeline-step__copy{
  overflow:visible;
  min-height:182px;
  padding:18px 18px 16px!important;
  background-image:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0))!important;
}
.timeline-step.is-above .timeline-step__copy{transform:translateY(-18px) rotate(-1.6deg) scale(.97)}
.timeline-step.is-below .timeline-step__copy{transform:translateY(18px) rotate(1.4deg) scale(.97)}
.timeline-step.is-above.is-revealed .timeline-step__copy,
.timeline-step.is-selected.is-above .timeline-step__copy{transform:translateY(0) rotate(-1.3deg) scale(1)}
.timeline-step.is-below.is-revealed .timeline-step__copy,
.timeline-step.is-selected.is-below .timeline-step__copy{transform:translateY(0) rotate(1.1deg) scale(1)}
.timeline-step__number{font-size:10px!important;letter-spacing:.12em}
.timeline-step h3{font-size:clamp(28px,2.8vw,40px)!important;line-height:1.02!important}
.timeline-step p{font-size:clamp(12px,1vw,14px)!important;line-height:1.55!important;max-width:24ch}

/* service notes */
.services{padding-top:clamp(78px,10vw,130px)!important;padding-bottom:clamp(100px,12vw,170px)!important}
.service{
  min-height:170px!important;
  padding:clamp(28px,4.8vw,54px)!important;
  margin:0 0 24px!important;
  overflow:visible;
  background-image:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0))!important;
}
.service:nth-of-type(2){transform:rotate(-.35deg)}
.service:nth-of-type(3){transform:rotate(.45deg)}
.service:nth-of-type(4){transform:rotate(-.25deg)}
.service h3{font-size:clamp(38px,5vw,66px)!important;line-height:1.02!important}
.service p{max-width:40ch!important;line-height:1.7!important}

/* Contact CTA as a clean taped note */
.contact-section__button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 18px;
}

@media(max-width:699px){
  .project-card{top:35%!important;width:min(70vw,430px)!important}
  .project-meta{bottom:7vh!important;max-width:calc(100vw - 32px)!important;padding:18px 18px 18px!important}
  .project-meta h2{font-size:clamp(28px,7vw,34px)!important}
  .timeline-step__copy,
  .timeline-step.is-selected .timeline-step__copy{min-height:140px;padding:12px 14px 12px!important}
  .timeline-step h3{font-size:clamp(22px,7vw,30px)!important}
  .service{grid-template-columns:34px minmax(0,1fr)!important;min-height:unset!important;padding:22px 18px!important}
  .service h3{font-size:clamp(34px,10vw,48px)!important}
}


/* V4.6.6: preserve the overlay positioning of the main project note and
   absolute anchoring of timeline notes. The shared post-it styling must not
   turn these positioned elements into regular-flow blocks. */
.project-meta{position:absolute!important;z-index:30;}
.timeline-step__copy{position:absolute!important;z-index:2;}


/* =========================================================
   V4.6.7 — refinement fixes from review
   ========================================================= */
/* 1) remove the right-side "04 projetos" counter */
.project-count-label{display:none!important}

/* 2) timeline lower cards must not be clipped */
.creation__sticky{overflow:visible!important}
.timeline__rail{overflow-x:hidden!important;overflow-y:visible!important}
.timeline__track{min-height:406px!important}
.timeline-step{height:404px!important}
.timeline-step.is-below .timeline-step__copy{top:214px!important}
.timeline-step.is-below .timeline-step__stem{top:188px!important;height:28px!important}
@media(min-width:700px){
  .timeline__track{min-height:506px!important}
  .timeline-step{height:504px!important}
  .timeline-step.is-below .timeline-step__copy{top:300px!important}
  .timeline-step.is-below .timeline-step__stem{top:213px!important;height:88px!important}
}

/* 3) services: keep tape visible on the first card too */
.services{overflow:visible!important}
.services>.eyebrow{position:relative;z-index:5}
.services>.service:first-of-type{margin-top:14px!important}
.service{position:relative;z-index:1}
.service::before,.service::after{z-index:3!important}

/* 4) WhatsApp CTA as a taped paper note with visible icon/text */
.contact-section__row{overflow:visible}
.contact-section__button,
.contact-button{
  position:relative;
  display:inline-flex!important;
  align-items:center!important;
  gap:14px!important;
  min-height:74px!important;
  padding:16px 22px!important;
  color:#121212!important;
  background:linear-gradient(180deg, rgba(251,248,241,.99), rgba(245,240,230,.98))!important;
  border:1px solid rgba(48,40,31,.14)!important;
  box-shadow:0 14px 28px rgba(46,38,28,.10),0 2px 4px rgba(46,38,28,.05)!important;
  overflow:visible!important;
}
.contact-section__button::before,
.contact-section__button::after{
  content:"";
  position:absolute;
  top:-10px;
  width:62px;
  height:18px;
  background:linear-gradient(180deg, rgba(233,222,199,.92), rgba(226,214,190,.72));
  border:1px solid rgba(168,149,118,.14);
  box-shadow:0 1px 2px rgba(74,59,38,.05);
  pointer-events:none;
}
.contact-section__button::before{left:16px;transform:rotate(-6deg)}
.contact-section__button::after{right:16px;width:48px;opacity:.74;transform:rotate(6deg)}
.contact-section__button-icon{
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid rgba(48,40,31,.14);
  background:rgba(255,255,255,.58);
  color:#111;
}
.contact-section__button-icon svg{width:25px;height:25px;display:block}
.contact-section__button-label{
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  white-space:nowrap;
}
.contact-section__button-arrow{font-size:16px!important;margin-left:2px}
.contact-section__button:hover{transform:translateY(-2px) rotate(-.35deg)!important;background:linear-gradient(180deg, rgba(252,249,243,1), rgba(246,241,232,.98))!important}

@media(max-width:699px){
  .contact-section__button{min-height:66px!important;padding:14px 18px!important;gap:12px!important}
  .contact-section__button-label{font-size:11px!important}
}


/* =========================================================
   V4.6.8 — WhatsApp paper note fixes
   ========================================================= */
.topbar{overflow:visible!important}

/* compact taped note in header */
.header-contact--note{
  position:relative;
  justify-self:end;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:42px!important;
  padding:8px 12px!important;
  margin-right:2px;
  color:#111!important;
  background:linear-gradient(180deg, rgba(251,248,241,.99), rgba(245,240,230,.98))!important;
  border:1px solid rgba(48,40,31,.14)!important;
  box-shadow:0 10px 22px rgba(46,38,28,.08),0 1px 3px rgba(46,38,28,.04)!important;
  white-space:nowrap;
  overflow:visible!important;
}
.header-contact--note::before,
.header-contact--note::after{
  content:"";
  position:absolute;
  top:-8px;
  width:34px;height:12px;
  background:linear-gradient(180deg, rgba(233,222,199,.92), rgba(226,214,190,.72));
  border:1px solid rgba(168,149,118,.14);
  box-shadow:0 1px 2px rgba(74,59,38,.05);
  pointer-events:none;
}
.header-contact--note::before{left:8px;transform:rotate(-6deg)}
.header-contact--note::after{right:8px;transform:rotate(6deg);opacity:.74;width:28px}
.header-contact__icon,
.contact-section__button-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid rgba(48,40,31,.14);
  background:rgba(255,255,255,.66);
  overflow:hidden;
}
.header-contact__icon img,
.contact-section__button-icon img{width:78%;height:78%;object-fit:contain;display:block}
.header-contact__label{font-size:10px!important;font-weight:700!important;letter-spacing:.1em!important;line-height:1}
.header-contact__arrow{font-size:13px!important;line-height:1;margin-left:2px}
.header-contact--note:hover{opacity:1!important;transform:translateY(-1px) rotate(-.3deg)}

/* contact note uses png icon too */
.contact-section__button{
  min-width:294px;
  justify-content:flex-start!important;
}
.contact-section__button-icon{
  width:34px!important;height:34px!important;
}
.contact-section__button-label{letter-spacing:.10em!important}

@media(max-width:699px){
  .header-contact--note{
    min-height:38px!important;
    padding:7px 10px!important;
    gap:8px!important;
  }
  .header-contact__label{font-size:9px!important}
  .header-contact__icon{width:24px;height:24px}
}


/* V4.6.9 — marca original no cabeçalho, com proporções preservadas. */
.brand--logo{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:0;
  height:54px;
  position:relative;
  z-index:1;
}
.brand--logo img{
  display:block;
  width:auto;
  height:46px;
  max-width:140px;
  object-fit:contain;
}
@media(min-width:700px){
  .brand--logo{height:58px}
  .brand--logo img{height:50px;max-width:155px}
}
@media(max-width:520px){
  /* Keep the centered logo independent from the contact control on narrow screens. */
  .brand--logo img{height:43px;max-width:118px}
  .header-contact--note{min-width:42px!important;width:42px!important;height:38px!important;padding:6px!important;gap:0!important;justify-content:center!important;margin-right:0!important}
  .header-contact--note .header-contact__label,
  .header-contact--note .header-contact__arrow{display:none!important}
  .header-contact--note .header-contact__icon{width:25px!important;height:25px!important}
  .header-contact--note::before{left:3px;width:17px;height:8px;top:-5px}
  .header-contact--note::after{right:3px;width:15px;height:8px;top:-5px}
}


/* V4.8.2 — logo autônoma de esboço para pronta e de volta ao esboço. */
.brand--logo .brand__art {
  --logo-progress:0;
  position:relative;
  display:block;
  width:105px;
  height:46px;
  aspect-ratio:1138 / 500;
  flex:none;
  overflow:hidden;
}
.brand--logo .brand__art img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}
/* Esboço completo ao iniciar, preenchimento revelado progressivamente em cada ciclo. */
.brand--logo .brand__sketch {
  opacity:calc(1 - var(--logo-progress));
  filter:grayscale(1) contrast(1.08);
}
.brand--logo .brand__solid {
  opacity:var(--logo-progress);
  clip-path:inset(0 calc((1 - var(--logo-progress)) * 100%) 0 0);
}
@media(min-width:700px){ .brand--logo .brand__art{width:114px;height:50px} }
@media(max-width:520px){ .brand--logo .brand__art{width:98px;height:43px} }

/* Isola o HTML da abertura original, sem sobrescrever seus estilos ou imagens. */
body.ab-intro-active{overflow:hidden}
.ab-intro-frame{
  position:fixed;
  inset:0;
  display:block;
  width:100%;
  width:100vw;
  height:100%;
  height:100dvh;
  border:0;
  margin:0;
  padding:0;
  z-index:2147483000;
  background:#000;
  opacity:1;
  transition:opacity .45s ease;
}
.ab-intro-frame--leaving{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.ab-intro-frame--leaving{transition:none}}

/* V4.8.2 — fade BRANCO da abertura original para a home. */
html.ab-intro-pending body {overflow:hidden}
.ab-intro-white-fade {
  position:fixed;
  inset:0;
  z-index:2147483001;
  background:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.ab-intro-white-fade.is-covering {
  visibility:visible;
  opacity:1;
  transition:opacity .48s ease-in-out;
}
.ab-intro-white-fade.is-revealing {
  visibility:visible;
  opacity:0;
  transition:opacity .65s ease-in-out;
}
@media(prefers-reduced-motion:reduce){
  .ab-intro-white-fade.is-covering,.ab-intro-white-fade.is-revealing {transition:none}
}


/* V4.9.0 — Pontuações autorais: não altera o background nem a geometria do portfólio. */
.ab-process-character {
  position:absolute;
  z-index:4;
  top:153px;
  right:1px;
  width:76px;
  height:81px;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transform:translate3d(0,8px,0);
  transition:opacity .35s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s;
}
.timeline-step.is-selected .ab-process-character.is-loaded {
  visibility:visible;
  opacity:1;
  transform:none;
  transition-delay:0s;
}
.ab-process-character img {
  position:absolute;
  width:61px;
  height:79px;
  right:0;
  bottom:0;
  object-fit:contain;
  user-select:none;
}
.ab-process-character__point{opacity:0}
.ab-process-character__doodle {
  position:absolute;
  width:52px;
  height:43px;
  left:-24px;
  top:1px;
  overflow:visible;
}
.ab-process-character__doodle path {
  fill:none;
  stroke:#292929;
  stroke-width:1.6;
  stroke-linejoin:round;
  stroke-linecap:round;
  stroke-dasharray:170;
  stroke-dashoffset:170;
}
.timeline-step.is-selected .ab-process-character.is-loaded .ab-process-character__point {
  animation:abCharacterPoint 2.9s .24s ease-in-out forwards;
}
.timeline-step.is-selected .ab-process-character.is-loaded .ab-process-character__doodle path {
  animation:abCharacterDoodle 2.6s .22s cubic-bezier(.25,.3,.4,1) forwards;
}
@keyframes abCharacterPoint {0%,16%{opacity:0}23%,88%{opacity:1}100%{opacity:.1}}
@keyframes abCharacterDoodle {0%{stroke-dashoffset:170}100%{stroke-dashoffset:0}}

/* V4.9.1 — Mascote do contato. Um único sprite por vez, pés ancorados e sem troca brusca de camadas. */
.ab-contact-actions{
  display:flex;
  flex:none;
  align-items:flex-end;
  justify-content:flex-start;
  gap:clamp(5px,1vw,14px);
}
.ab-contact-character{
  --character-shift:0px;
  position:relative;
  flex:0 0 69px;
  width:69px;
  height:89px;
  overflow:visible;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:2;
  transform:translate3d(var(--character-shift),0,0);
  transition:opacity .28s ease;
}
.ab-contact-character.is-active{opacity:1;visibility:visible}
.ab-contact-character__sprite{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scaleX(-1); /* personagem aponta para o próprio botão */
  transform-origin:center bottom;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}
@media(min-width:700px){
  .ab-contact-actions{position:relative;display:block;flex:0 1 auto}
  /* Fica acima do cartão, sem tocar sua fita adesiva ou receber eventos de clique. */
  .ab-contact-character{
    position:absolute;
    right:8px;
    bottom:calc(100% + 16px);
    width:66px;
    height:86px;
    z-index:1;
  }
}
@media(max-width:699px){
  .ab-process-character{width:66px;height:73px;top:calc(var(--timeline-dot-y) - 74px);right:0}
  .ab-process-character img{width:54px;height:70px}
  .ab-process-character__doodle{width:42px;height:38px;left:-20px}
  .ab-contact-actions{max-width:100%;gap:5px;align-items:flex-end}
  .ab-contact-actions .contact-section__button{min-width:0}
  .ab-contact-character{flex:0 0 51px;width:51px;height:69px}
}
@media(max-width:370px){
  .ab-contact-character{flex:0 0 38px;width:38px;height:55px}
  .ab-contact-actions .contact-section__button{gap:7px!important;padding-inline:10px!important}
}
@media(prefers-reduced-motion:reduce){
  .ab-process-character,.ab-contact-character{transition:none!important;transform:none!important}
  .ab-process-character__point{animation:none!important;opacity:0!important}
  .ab-process-character__doodle path{animation:none!important;stroke-dashoffset:0!important}
  .ab-contact-character__sprite{will-change:auto}
}

/* Interação editorial discreta, sem deslocar a pilha ou os elementos de interface. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project-card.is-active .project-card__frame img{transition:transform .42s cubic-bezier(.2,.65,.3,1)}
  .project-card.is-active:hover .project-card__frame img{transform:scale(1.035)}
}

/* V4.9.2 — navegações envolvendo projetos não cobrem o papel com um branco puro.
   A transição branca da Open Screen continua no módulo ab-intro-bridge.js. */
html.is-project-route body::after,
html.is-returning-project body::after { display:none!important;animation:none!important; }

/* =========================================================
   V4.9.5 — Linha cronológica VERTICAL, com fluxo de página natural.
   Escopo restrito a #processo; preserva fundos, cartões e outras seções.
   Estas regras substituem o antigo motor de cards horizontais/sticky.
   ========================================================= */
#processo.creation {
  height:auto!important;
  min-height:0!important;
  padding:clamp(58px,7vw,100px) var(--pad) clamp(68px,8vw,112px)!important;
  overflow:visible!important;
}
#processo .creation__sticky {
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  display:block!important;
  justify-content:initial!important;
  overflow:visible!important;
}
#processo .creation__heading {
  width:100%!important;
  max-width:1100px!important;
  margin:0 auto clamp(30px,5vw,56px)!important;
}
#processo .timeline {
  max-width:1100px!important;
  width:100%!important;
  overflow:visible!important;
  margin:0 auto!important;
}
#processo .timeline__rail {
  display:block!important;
  width:100%!important;
  height:auto!important;
  overflow:visible!important;
  touch-action:pan-y!important;
  scroll-snap-type:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
#processo .timeline__track {
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}
#processo .timeline__line {
  position:absolute!important;
  left:calc(50% - 1px)!important;
  right:auto!important;
  top:clamp(106px,12vw,138px)!important;
  bottom:clamp(106px,12vw,138px)!important;
  width:2px!important;
  height:auto!important;
  transform:none!important;
  background:#b9b1a6!important;
  overflow:hidden;
  z-index:0;
}
#processo .timeline__fill {
  position:absolute!important;
  left:0!important;
  top:0!important;
  display:block!important;
  width:100%!important;
  height:0;
  max-height:100%;
  transform:none!important;
  transform-origin:top center!important;
  background:#292724!important;
  transition:height .38s ease!important;
  will-change:auto!important;
}
#processo .timeline-step {
  position:relative!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:245px!important;
  padding:23px 0!important;
  margin:0!important;
  scroll-snap-align:none!important;
  scroll-margin-top:clamp(72px,10vh,116px);
  isolation:isolate;
}
#processo .timeline-step__copy,
#processo .timeline-step.is-above .timeline-step__copy,
#processo .timeline-step.is-below .timeline-step__copy,
#processo .timeline-step.is-selected .timeline-step__copy {
  position:relative!important;
  flex:0 0 auto!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:calc(50% - 65px)!important;
  height:auto!important;
  min-height:175px!important;
  max-height:none!important;
  padding:clamp(17px,2.2vw,25px)!important;
  opacity:1!important;
  visibility:visible!important;
  transform:rotate(-.8deg)!important;
  transition:box-shadow .26s ease!important;
  will-change:auto!important;
}
#processo .timeline-step:nth-of-type(odd) .timeline-step__copy {margin:0 auto 0 0!important;}
#processo .timeline-step:nth-of-type(even) .timeline-step__copy {margin:0 0 0 auto!important;transform:rotate(.7deg)!important;}
#processo .timeline-step__number{margin-bottom:10px!important;}
#processo .timeline-step h3{font-size:clamp(25px,3vw,38px)!important;overflow-wrap:break-word;}
#processo .timeline-step p{font-size:clamp(12px,1.05vw,14px)!important;line-height:1.5!important;max-width:38ch!important;}
#processo .timeline-step__stem,
#processo .timeline-step.is-above .timeline-step__stem,
#processo .timeline-step.is-below .timeline-step__stem {
  position:absolute!important;
  left:calc(50% - 64px)!important;
  top:50%!important;
  width:64px!important;
  height:1px!important;
  background:#aaa196!important;
  transform:none!important;
  transition:none!important;
  z-index:0;
}
#processo .timeline-step:nth-of-type(even) .timeline-step__stem {left:50%!important;}
#processo .timeline-step__dot,
#processo .timeline-step.is-selected .timeline-step__dot {
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:30px!important;
  height:30px!important;
  transform:translate(-50%,-50%)!important;
  opacity:1!important;
  z-index:4;
  cursor:pointer;
  touch-action:manipulation;
}
#processo .timeline__footer {
  max-width:1100px;
  margin:clamp(24px,4vw,42px) auto 0!important;
  padding-top:14px!important;
  border-top:1px solid var(--line);
}
#processo .timeline__controls{display:flex!important;gap:8px;}
#processo .timeline__controls button{min-width:42px;min-height:42px;}
#processo .ab-process-character{
  top:calc(50% - 42px)!important;
  left:calc(50% + 40px)!important;
  right:auto!important;
  bottom:auto!important;
}
@media(max-width:699px){
  #processo.creation{
    padding:clamp(46px,9vw,70px) max(14px,var(--pad)) 65px!important;
  }
  #processo .creation__heading{margin-bottom:30px!important;}
  #processo .timeline__line{
    left:19px!important;
    top:95px!important;
    bottom:95px!important;
  }
  #processo .timeline-step{
    min-height:218px!important;
    padding:15px 0!important;
    align-items:center!important;
  }
  #processo .timeline-step__copy,
  #processo .timeline-step.is-above .timeline-step__copy,
  #processo .timeline-step.is-below .timeline-step__copy,
  #processo .timeline-step.is-selected .timeline-step__copy,
  #processo .timeline-step:nth-of-type(even) .timeline-step__copy {
    width:calc(100% - 59px)!important;
    min-height:145px!important;
    margin:0 0 0 59px!important;
    transform:rotate(-.45deg)!important;
    padding:16px 15px 17px!important;
  }
  #processo .timeline-step__stem,
  #processo .timeline-step.is-above .timeline-step__stem,
  #processo .timeline-step.is-below .timeline-step__stem,
  #processo .timeline-step:nth-of-type(even) .timeline-step__stem {
    left:19px!important;
    top:50%!important;
    width:40px!important;
    height:1px!important;
  }
  #processo .timeline-step__dot,
  #processo .timeline-step.is-selected .timeline-step__dot{
    left:20px!important;
    top:50%!important;
    width:30px!important;
    height:30px!important;
  }
  #processo .timeline-step h3{font-size:clamp(23px,6.3vw,31px)!important;}
  #processo .timeline-step p{font-size:clamp(12px,3.2vw,14px)!important;}
  /* Mascote da etapa 3 abaixo do cartão, com espaço reservado, sem sobreposição. */
  #processo .timeline-step[data-step="2"]{
    min-height:305px!important;
    align-items:flex-start!important;
  }
  #processo .timeline-step[data-step="2"] .timeline-step__copy{
    margin-top:0!important;
    padding-right:18px!important;
  }
  #processo .timeline-step[data-step="2"] .timeline-step__dot,
  #processo .timeline-step[data-step="2"] .timeline-step__stem {top:106px!important;}
  #processo .timeline-step[data-step="2"] .ab-process-character{
    left:auto!important;
    top:auto!important;
    right:clamp(10px,6vw,30px)!important;
    bottom:12px!important;
    width:66px!important;
    height:75px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #processo .timeline__fill{transition:none!important;}
  #processo .timeline-step__copy{transform:none!important;}
  #processo .timeline__rail{overflow:visible!important;touch-action:pan-y!important;}
}

/* =========================================================
   V4.9.6 — 5 sprites autorais para os cards da linha do tempo.
   Cada personagem surge uma única vez acima do respectivo card
   e depois permanece estático, sem reiniciar ao voltar no scroll.
   ========================================================= */
#processo .timeline-step{
  padding-top:56px!important;
}
#processo .timeline-step__copy{
  overflow:visible!important;
}
#processo .ab-card-character{
  position:absolute;
  left:50%;
  bottom:calc(100% - 10px);
  width:108px;
  height:108px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:6;
  transform:translate(-50%,18px) scale(.82) rotate(-2deg);
  transform-origin:center bottom;
  transition:opacity .28s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
}
#processo .ab-card-character[data-character="direcao"]{width:118px;height:118px;bottom:calc(100% - 12px);}
#processo .ab-card-character[data-character="publicacao"]{width:102px;height:102px;}
#processo .ab-card-character.is-visible,
#processo .ab-card-character.is-done{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
#processo .ab-card-character.is-done{
  transform:translate(-50%,0) scale(1) rotate(0deg);
}
#processo .ab-card-character__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.10));
}
@media(max-width:699px){
  #processo .timeline-step{
    min-height:238px!important;
    padding-top:44px!important;
  }
  #processo .ab-card-character,
  #processo .ab-card-character[data-character="direcao"],
  #processo .ab-card-character[data-character="publicacao"]{
    width:84px;
    height:84px;
    bottom:calc(100% - 4px);
  }
  /* remove o antigo tratamento exclusivo da etapa 3 */
  #processo .timeline-step[data-step="2"]{
    min-height:238px!important;
    align-items:center!important;
  }
  #processo .timeline-step[data-step="2"] .timeline-step__copy{
    margin:0 0 0 59px!important;
    padding-right:15px!important;
  }
  #processo .timeline-step[data-step="2"] .timeline-step__dot,
  #processo .timeline-step[data-step="2"] .timeline-step__stem{
    top:50%!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #processo .ab-card-character{transition:none!important;transform:translate(-50%,0) scale(1)!important;}
}

/* V4.9.9 — Mascotes da timeline maiores, centralizados e com entrada única.
   O layout de fundo e dos próprios cartões continua igual. */
#processo .timeline-step{padding-top:clamp(78px,7vw,92px)!important;}
#processo .ab-card-character{
  width:136px;
  height:136px;
  bottom:calc(100% - 4px);
  transform:translate(-50%,13px) scale(.9);
  transition:opacity .3s ease,transform .54s cubic-bezier(.2,.7,.25,1),visibility 0s linear .4s;
}
#processo .ab-card-character[data-character="direcao"]{width:136px;height:136px;bottom:calc(100% - 4px);}
#processo .ab-card-character[data-character="publicacao"]{width:130px;height:130px;bottom:calc(100% - 4px);}
#processo .ab-card-character.is-done{transform:translate(-50%,0) scale(1);}
#processo .ab-card-character__img{filter:drop-shadow(0 4px 5px rgba(19,19,19,.055));}
@media(max-width:699px){
  #processo .timeline-step{min-height:273px!important;padding-top:70px!important;}
  #processo .timeline-step[data-step="2"]{min-height:273px!important;}
  #processo .ab-card-character,
  #processo .ab-card-character[data-character="direcao"],
  #processo .ab-card-character[data-character="publicacao"]{
    width:106px;height:106px;bottom:calc(100% - 4px);
  }
}
@media(prefers-reduced-motion:reduce){
  #processo .ab-card-character{transition:none!important;transform:translate(-50%,0) scale(1)!important;}
}

/* =========================================================
   V5.0.0 — sprites dos cards mais fluidos.
   Crossfade entre quadros + entrada mais suave.
   ========================================================= */
#processo .ab-card-character{
  transform:translate(-50%,22px) scale(.78) rotate(-1.5deg);
  transition:opacity .24s ease, transform .62s cubic-bezier(.2,.72,.2,1), visibility 0s linear .3s;
}
#processo .ab-card-character.is-visible,
#processo .ab-card-character.is-done{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
#processo .ab-card-character.is-done,
#processo .ab-card-character.is-visible{
  transform:translate(-50%,0) scale(1) rotate(0deg);
}
#processo .ab-card-character__img{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .17s linear, transform .24s ease;
  transform:translateY(0);
  will-change:opacity;
}
#processo .ab-card-character__img.is-front{opacity:1;}
#processo .ab-card-character.is-done .ab-card-character__img.is-front{
  transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  #processo .ab-card-character__img{transition:none!important;}
}

/* =========================================================
   V5.0.3 — card Conversa com animação articulada em loop
   aprovada no piloto, sem braço quebrado e sem piscar.
   ========================================================= */
#processo .ab-card-character--rig{
  width:142px;
  height:142px;
  bottom:calc(100% - 6px);
}
#processo .ab-card-character__rig{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  opacity:0;
}
#processo .ab-card-character__rig [data-part]{transform-box:view-box;}
#processo .ab-card-character__head{transform-origin:250px 238px;}
#processo .ab-card-character__mouth{transform-origin:268px 201px;}
#processo .ab-card-character__mouth .lip{stroke:#171717;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
#processo .ab-card-character__mouth .teeth{fill:#fff;}
#processo .ab-card-character__mouth .tongue{fill:#8f8e8e;}
#processo .ab-card-character__arm-canvas{display:block;width:190px;height:180px;}
@media(max-width:699px){
  #processo .ab-card-character--rig{width:102px;height:102px;bottom:calc(100% - 2px);}
}

/* =========================================================
   V5.0.5 — todos os timeline-characters em procedimento completo.
   Conversa mantém o rig aprovado, e os demais passam a usar
   estrutura em camadas (body + part canvas + head) para loop
   mais limpo e natural, sem crossfade de sprite inteiro.
   ========================================================= */
#processo .ab-card-character--sprite-rig{
  width:118px;
  height:118px;
  bottom:calc(100% - 4px);
}
#processo .ab-card-character__sprite-rig{
  position:relative;
  width:100%;
  height:100%;
  opacity:0;
}
#processo .ab-card-character__rig-body,
#processo .ab-card-character__rig-head,
#processo .ab-card-character__rig-part-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
#processo .ab-card-character__rig-head{
  transform-origin:50% 28%;
}
#processo .ab-card-character[data-character="publicacao"] .ab-card-character__rig-head{transform-origin:48% 30%;}
#processo .ab-card-character[data-character="direcao"] .ab-card-character__rig-head{transform-origin:49% 29%;}
#processo .ab-card-character__rig-part-canvas{
  pointer-events:none;
}
@media(max-width:699px){
  #processo .ab-card-character--sprite-rig{width:92px;height:92px;bottom:calc(100% - 2px);}  
}

/* V5.0.6 — os quatro mascotes ficam visíveis MESMO ANTES de entrar no viewport.
   No momento da ativação, a imagem intacta só cede lugar ao rig depois
   de todos os elementos terem carregado. Evita os cards sem personagens. */
#processo .ab-card-character--sprite-rig,
#processo .ab-card-character--sprite-rig.is-visible,
#processo .ab-card-character--sprite-rig.is-done{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,0) scale(1)!important;
  transition:none!important;
  width:136px;
  height:136px;
  bottom:calc(100% - 4px);
}
#processo .ab-card-character--sprite-rig .ab-card-character__sprite-rig{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  opacity:1;
  isolation:isolate;
}
#processo .ab-card-character--sprite-rig .ab-card-character__rig-fallback,
#processo .ab-card-character--sprite-rig .ab-card-character__rig-body,
#processo .ab-card-character--sprite-rig .ab-card-character__rig-head,
#processo .ab-card-character--sprite-rig .ab-card-character__rig-action{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
#processo .ab-card-character--sprite-rig .ab-card-character__rig-body,
#processo .ab-card-character--sprite-rig .ab-card-character__rig-head,
#processo .ab-card-character--sprite-rig .ab-card-character__rig-action{opacity:0;}
#processo .ab-card-character--sprite-rig .ab-card-character__sprite-rig.is-rig-ready .ab-card-character__rig-fallback{visibility:hidden;}
#processo .ab-card-character--sprite-rig .ab-card-character__sprite-rig.is-rig-ready .ab-card-character__rig-body,
#processo .ab-card-character--sprite-rig .ab-card-character__sprite-rig.is-rig-ready .ab-card-character__rig-head,
#processo .ab-card-character--sprite-rig .ab-card-character__sprite-rig.is-rig-ready .ab-card-character__rig-action{opacity:1;}
@media(max-width:699px){
 #processo .ab-card-character--sprite-rig,
 #processo .ab-card-character--sprite-rig.is-visible,
 #processo .ab-card-character--sprite-rig.is-done{width:106px;height:106px;bottom:calc(100% - 3px);}
}
@media(prefers-reduced-motion:reduce){
 #processo .ab-card-character--sprite-rig .ab-card-character__rig-head,
 #processo .ab-card-character--sprite-rig .ab-card-character__rig-action{transform:none!important;}
}


/* ===== V5.0.8: AB pendurado na linha acima de ETAPAS DO PROCESSO =====
   Um desenho continuo preso à mesma origem da corda; balanco sem trocar imagens.
   16 quadros extras exportados em assets/rappel/frames/ para reuso como sprites. */
@media (min-width: 901px) {
  #processo .timeline__footer {position:relative!important; isolation:isolate;}
  #processo .ab-rappel {
    position:absolute;
    top:-1px;
    left:18%;
    width:clamp(126px,9vw,165px);
    aspect-ratio:2/3;
    z-index:1;
    pointer-events:none;
    user-select:none;
    overflow:visible;
  }
  #processo .ab-rappel__fixacao {
    position:absolute;
    left:57.7%;
    top:-3px;
    transform:translateX(-50%);
    width:7px;
    height:7px;
    border:1.5px solid rgba(31,29,27,.75);
    background:#f8f6f0;
    border-radius:50%;
    z-index:2;
  }
  #processo .ab-rappel__art {
    display:block;
    width:100%;
    height:auto;
    opacity:.97;
    transform-origin:57.7% 0%;
    transform:rotate(-6.5deg);
    animation:ab-rappel-balanco 5.8s ease-in-out infinite;
    will-change:transform;
    filter:drop-shadow(0 4px 2px rgba(25,22,19,.025));
  }
  @keyframes ab-rappel-balanco {
    0%,100% {transform:rotate(-6.5deg)}
    50% {transform:rotate(6.5deg)}
  }
}
@media (max-width: 900px) {#processo .ab-rappel{display:none!important;}}
@media (prefers-reduced-motion:reduce) {
  #processo .ab-rappel__art {animation:none!important;transform:rotate(0deg)!important;will-change:auto!important;}
}


/* =========================================================
   V5.0.9 — ajustes finos: rapel menor/mais à esquerda,
   botão Menu em papel colado e logo editorial fixa em esboço.
   ========================================================= */

/* Menu com linguagem de post-it igual ao WhatsApp */
.menu{
  position:relative;
  min-height:42px!important;
  padding:8px 12px!important;
  gap:10px!important;
  color:#111!important;
  background:linear-gradient(180deg, rgba(251,248,241,.99), rgba(245,240,230,.98))!important;
  border:1px solid rgba(48,40,31,.14)!important;
  box-shadow:0 10px 22px rgba(46,38,28,.08),0 1px 3px rgba(46,38,28,.04)!important;
  white-space:nowrap;
  overflow:visible!important;
}
.menu::before,
.menu::after{
  content:"";
  position:absolute;
  top:-8px;
  width:34px;
  height:12px;
  background:linear-gradient(180deg, rgba(233,222,199,.92), rgba(226,214,190,.72));
  border:1px solid rgba(168,149,118,.14);
  box-shadow:0 1px 2px rgba(74,59,38,.05);
  pointer-events:none;
}
.menu::before{left:8px;transform:rotate(-6deg)}
.menu::after{right:8px;transform:rotate(6deg);opacity:.74;width:28px}
.menu__lines{
  display:grid;
  place-items:center;
  gap:4px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid rgba(48,40,31,.14);
  background:rgba(255,255,255,.66);
}
.menu__lines i{width:13px}
.menu:hover{opacity:1!important;transform:translateY(-1px) rotate(-.3deg)}
@media(max-width:699px){
  .menu{min-height:38px!important;padding:7px 10px!important;gap:8px!important}
  .menu__label{font-size:9px!important}
  .menu__lines{width:24px;height:24px}
  .menu::before{left:3px;width:17px;height:8px;top:-5px}
  .menu::after{right:3px;width:15px;height:8px;top:-5px}
}

/* Logo fixa em esboço/editorial, sem animação */
.brand--logo .brand__art{
  --logo-progress:0!important;
  overflow:visible;
}
.brand--logo .brand__solid{display:none!important;opacity:0!important;clip-path:none!important}
.brand--logo .brand__sketch{
  opacity:1!important;
  filter:grayscale(1) contrast(1.06) brightness(.98)!important;
}

/* Rapel menor e mais à esquerda */
@media (min-width: 901px) {
  #processo .ab-rappel{
    left:10.5%!important;
    width:clamp(102px,7.2vw,138px)!important;
  }
  #processo .ab-rappel__art{
    transform-origin:57.7% 0%;
  }
}