*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Libre Franklin",Arial,sans-serif;background:#222;color:#151515;overflow-x:hidden}.progress{position:fixed;z-index:1000;top:0;left:0;width:100%;height:2px}.progress span{display:block;height:100%;background:#f1f1ed;transform-origin:left;transform:scaleX(0)}a{color:inherit;text-decoration:none}.site-header{height:82px;position:sticky;top:0;z-index:100;background:#242424;color:#f6f6f2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4.4vw;border-bottom:1px solid #444}.brand{font-size:13px;font-weight:700;letter-spacing:.24em}.desktop-nav{display:flex;gap:42px}.desktop-nav a,.contact-pill{font-size:11px;text-transform:uppercase;letter-spacing:.26em}.contact-pill{justify-self:end;background:#f2f2ee;color:#202020;padding:14px 20px;font-weight:600}.menu-toggle,.mobile-menu{display:none}.hero{min-height:calc(100vh - 82px);background:#d8d8d5;position:relative;display:grid;grid-template-columns:48% 52%;grid-template-rows:1fr auto;overflow:hidden}.hero-media{grid-row:1/3;min-height:720px;border-right:1px solid #aaa;position:relative;background:linear-gradient(145deg,#e8e8e4 0%,#b9b9b5 100%);overflow:hidden}.editorial-placeholder:after,.grid-placeholder:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:40px 40px}.placeholder-label{position:absolute;top:34px;left:38px;font-size:10px;letter-spacing:.25em;z-index:2}.hero-ghost{position:absolute;bottom:-5vw;left:-1vw;font-size:36vw;line-height:.75;font-weight:800;color:rgba(0,0,0,.07);letter-spacing:-.1em}.hero-copy{align-self:center;margin:5vw 5vw 0;background:#6d6d6a;color:#f7f7f2;padding:4vw;position:relative;z-index:3}.eyebrow,.section-heading{font-size:10px;letter-spacing:.28em;text-transform:uppercase}.display{font-size:clamp(50px,6vw,98px);line-height:.79;letter-spacing:-.055em;margin:28px 0 34px;text-transform:uppercase}.display span,.display em{display:block;font-style:normal}.display span{font-weight:800}.display em{font-weight:400;color:#d7d7d2}.hero-intro{font-size:clamp(17px,1.45vw,24px);line-height:1.55;max-width:650px;margin:0}.hero-services{grid-column:1/3;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(28,28,28,.93);color:#eee;z-index:4}.hero-service{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:28px 3.7vw;border-right:1px solid #666}.hero-service small{letter-spacing:.2em}.hero-service strong{font-size:18px}.scroll-cue{position:absolute;bottom:104px;left:3.7vw;color:white;z-index:5;font-size:12px;border-bottom:1px solid #aaa;padding-bottom:8px}.section{padding:76px 4.4vw 100px;position:relative}.section:before{content:"";position:absolute;left:8.1vw;top:0;bottom:0;width:1px;background:rgba(120,120,120,.18);pointer-events:none}.light{background:#efefec}.dark{background:#242424;color:#f1f1ed}.mid{background:#626260;color:#f3f3ef}.section-heading{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-bottom:28px}.section-heading i{height:1px;background:currentColor;opacity:.28}.section-lead{font-size:clamp(18px,2vw,28px);line-height:1.2;margin:0 0 64px;font-weight:700}.service-list{border-top:1px solid #bdbdb8}.service-row{display:grid;grid-template-columns:55px 1.25fr 1.3fr .9fr;gap:26px;padding:56px 0;border-bottom:1px solid #bdbdb8;align-items:start}.service-no{font-size:11px;letter-spacing:.2em}.service-row h3{font-size:clamp(30px,3vw,46px);line-height:.98;letter-spacing:-.04em;margin:0 0 20px}.service-row p{font-size:16px;line-height:1.62;margin:0;max-width:430px}.service-row .italic{font-style:italic;color:#666;font-size:14px}.text-cta{font-size:11px;text-transform:uppercase;letter-spacing:.17em;background:#1f1f1f;color:#fff;padding:18px 20px;display:flex;justify-content:space-between;gap:20px;transition:.25s}.text-cta:hover{background:#555}.dark .section-heading i{background:#fff}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.project-visual{aspect-ratio:4/5;position:relative;border:1px solid #555;display:flex;align-items:center;padding:20px;overflow:hidden;background:linear-gradient(180deg,#292929,#3a3a39)}.project-visual>span{position:absolute;top:20px;left:20px;font-size:10px;letter-spacing:.25em;color:#aaa;z-index:2}.project-visual b{font-size:clamp(22px,2.15vw,36px);line-height:.98;letter-spacing:-.04em;z-index:2;max-width:92%;text-wrap:balance}.project-visual strong{position:absolute;right:20px;bottom:15px;font-size:56px;color:#5d5d5d;z-index:2}.project-meta{border-top:1px solid #555;margin-top:20px;padding-top:17px;display:flex;justify-content:space-between;gap:15px}.project-meta h3{font-size:16px;margin:0}.project-meta span{font-size:10px;letter-spacing:.2em;color:#999}.project p{color:#aaa;line-height:1.5}.portfolio-actions{display:flex;gap:40px;border-top:1px solid #555;margin-top:60px;padding-top:32px}.portfolio-actions a,.outline-cta{border:1px solid currentColor;padding:16px 24px;text-transform:uppercase;letter-spacing:.18em;font-size:10px}.portfolio-actions a[data-disabled]{opacity:.45;cursor:not-allowed}.camaras-grid{display:grid;grid-template-columns:42% 58%;gap:6vw;align-items:start}.massive{font-size:clamp(58px,7vw,112px);line-height:.78;letter-spacing:-.06em;margin:48px 0 36px}.big-copy{font-size:20px;line-height:1.55;max-width:430px}.outline-cta{display:inline-block;margin-top:28px}.camaras-copy{padding-top:50px}.camaras-copy>p{font-size:20px;line-height:1.55;max-width:720px}.trinity{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #aaa;margin-top:52px}.trinity div{padding:24px 0 8px;border-right:1px solid #999;display:flex;flex-direction:column;gap:28px}.trinity div:last-child{border-right:0}.trinity b{font-size:12px;letter-spacing:.22em}.trinity span{font-size:14px;color:#ddd}.about-grid{display:grid;grid-template-columns:38% 1fr;gap:7vw;align-items:center}.portrait{margin:0;position:relative;overflow:hidden;background:#ddd}.portrait img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.portrait:hover img{transform:scale(1.025)}.portrait figcaption{position:absolute;left:22px;bottom:22px;color:#fff;font-size:18px;font-weight:800}.about-title{font-size:20px;margin:0 0 36px}.about-copy{font-size:17px;line-height:1.65;max-width:740px}.about blockquote{border-left:1px solid #aaa;margin:42px 0;padding:0 0 0 24px;font-size:21px;line-height:1.5;font-style:italic;max-width:700px}.about-footer{border-top:1px solid #bbb;padding-top:26px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em}.contact-title{font-size:clamp(58px,8vw,130px);letter-spacing:-.065em;line-height:.9;margin:64px 0 24px}.contact-sub{font-size:20px;color:#bbb;margin-bottom:76px}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #555}.contact-card{padding:34px 4vw 20px 0;border-right:1px solid #444}.contact-card:last-child{border:0;padding-left:3vw}.contact-card:nth-child(2){padding-left:3vw}.contact-card h3{font-size:18px}.contact-card p{color:#aaa;font-style:italic;line-height:1.55;min-height:130px}.copy-btn{border:1px solid #777;background:transparent;color:#eee;padding:15px 20px;text-transform:uppercase;letter-spacing:.18em;font-size:10px;cursor:pointer;transition:.25s}.copy-btn:hover{background:#eee;color:#222}.whatsapp-cta{display:inline-block}.contact-email{display:flex;align-items:center;gap:18px;border-top:1px solid #555;margin-top:30px;padding-top:22px;font-size:12px;letter-spacing:.08em}.contact-email .copy-btn{margin-left:4px}@media(max-width:900px){.contact-email{flex-wrap:wrap;gap:14px}}.footer{background:#161616;color:#eee;padding:55px 4.4vw;display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:40px;border-top:1px solid #444}.footer strong{font-size:13px;letter-spacing:.22em}.footer p{color:#999;line-height:1.5}.footer nav{display:grid;gap:12px;font-size:12px}.footer-socials{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#999;font-size:11px;letter-spacing:.02em}.footer-socials a:hover{color:#fff}.footer-meta{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:9px;letter-spacing:.18em;color:#888}.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:900px){
.site-header{height:70px;grid-template-columns:1fr auto;padding:0 22px}.desktop-nav,.contact-pill{display:none}.menu-toggle{display:block;background:none;border:0;color:#fff;text-transform:uppercase;letter-spacing:.18em;font-size:10px;position:relative;padding:15px 0 15px 20px}.menu-toggle i{display:block;width:18px;height:1px;background:#fff;margin:5px 0}.mobile-menu{display:flex;position:fixed;inset:70px 0 auto 0;background:#242424;color:#fff;flex-direction:column;padding:30px 22px 40px;gap:25px;transform:translateY(-120%);transition:.45s;z-index:-1;border-bottom:1px solid #555}.mobile-menu.open{transform:none}.mobile-menu a{font-size:20px}.hero{min-height:auto;display:block;padding-bottom:0}.hero-media{height:58vh;min-height:430px;border:0}.hero-copy{margin:-90px 20px 0;padding:30px 24px}.display{font-size:clamp(46px,13vw,72px);margin:20px 0 25px}.hero-services{position:relative;margin-top:0;grid-template-columns:1fr}.hero-service{padding:20px 24px;border-right:0;border-bottom:1px solid #555}.scroll-cue{display:none}.section{padding:58px 22px 75px}.section:before{left:44px}.section-lead br{display:none}.service-row{grid-template-columns:38px 1fr;padding:38px 0;gap:18px}.service-row>p,.service-row>.text-cta{grid-column:2}.service-row h3{font-size:36px}.text-cta{margin-top:8px}.project-grid{grid-template-columns:1fr}.project-visual{aspect-ratio:4/5}.project-visual b{font-size:34px}.portfolio-actions{flex-direction:column;gap:14px}.camaras-grid{grid-template-columns:1fr}.massive{font-size:64px}.camaras-copy{padding-top:0}.trinity{grid-template-columns:1fr}.trinity div{border-right:0;border-bottom:1px solid #999;flex-direction:row;justify-content:space-between}.about-grid{grid-template-columns:1fr}.portrait{max-height:75vh}.portrait img{object-position:center 30%}.about-footer{gap:20px;flex-direction:column}.contact-title{font-size:17vw}.contact-grid{grid-template-columns:1fr}.contact-card,.contact-card:nth-child(2),.contact-card:last-child{padding:28px 0;border-right:0;border-bottom:1px solid #444}.contact-card p{min-height:auto}.footer{grid-template-columns:1fr}.footer-meta{align-items:flex-start;gap:12px}.section-heading{grid-template-columns:auto 1fr auto}
}
@media(max-width:480px){
.brand{font-size:11px;letter-spacing:.18em}.hero-media{height:50vh}.hero-copy{margin:-55px 14px 0}.eyebrow{font-size:8px}.display{font-size:13.5vw}.hero-intro{font-size:15px}.section{padding-left:18px;padding-right:18px}.section:before{display:none}.section-heading{gap:10px;font-size:8px}.service-row{grid-template-columns:30px 1fr}.service-row h3{font-size:31px}.project-visual{aspect-ratio:4/5}.project-visual b{font-size:28px}.massive{font-size:15vw}.big-copy,.camaras-copy>p{font-size:17px}.portrait figcaption{font-size:14px}.about-copy{font-size:15px}.about blockquote{font-size:18px}.contact-sub{font-size:16px;margin-bottom:45px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.portrait img,.mobile-menu{transition:none}}

/* V1.2 visible corrections */
.display .creative-role{
  display:block;
  margin-top:.34em;
}
.display .creative-role em{
  display:block;
}
.project-grid{
  align-items:start;
}
.project-visual{
  width:100%;
  aspect-ratio:4 / 5 !important;
  min-height:0 !important;
}
.project-visual b{
  font-size:clamp(22px,2.15vw,36px) !important;
  line-height:.98 !important;
  max-width:92%;
}
@media(max-width:900px){
  .project-visual{aspect-ratio:4 / 5 !important;}
}
@media(max-width:480px){
  .project-visual{aspect-ratio:4 / 5 !important;}
  .display .creative-role{margin-top:.38em;}
}

/* V1.3 — Selected Work: true portrait 4:5 cards */
#portfolio .project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  align-items:start;
}
#portfolio .project{
  min-width:0;
}
#portfolio .project-visual{
  display:flex;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:4 / 5 !important;
  align-items:center;
  overflow:hidden;
}
#portfolio .project-visual b{
  font-size:clamp(20px,2vw,34px) !important;
  line-height:1 !important;
}

@media(max-width:900px){
  #portfolio .project-grid{grid-template-columns:1fr;}
  #portfolio .project-visual{
    aspect-ratio:4 / 5 !important;
    max-width:620px;
  }
}

/* V1.4 — refinements requested after visual review */

/* Remove the continuous editorial vertical guide from all sections */
.section:before{
  display:none !important;
}

/* Keep all placeholder titles safely inside the 4:5 frame */
#portfolio .project-visual{
  padding:28px 22px !important;
  align-items:flex-end !important;
}
#portfolio .project-visual b{
  position:relative;
  z-index:3;
  display:block;
  width:calc(100% - 72px);
  max-width:calc(100% - 72px) !important;
  margin:0;
  padding:0 0 4px;
  font-size:clamp(18px,1.65vw,27px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}
#portfolio .project-visual strong{
  z-index:3;
  font-size:48px;
  line-height:1;
}
@media(max-width:900px){
  #portfolio .project-visual b{
    font-size:clamp(22px,5.4vw,34px) !important;
    width:calc(100% - 78px);
    max-width:calc(100% - 78px) !important;
  }
}
@media(max-width:480px){
  #portfolio .project-visual{
    padding:22px 18px !important;
  }
  #portfolio .project-visual b{
    font-size:clamp(19px,6.1vw,27px) !important;
    width:calc(100% - 60px);
    max-width:calc(100% - 60px) !important;
  }
  #portfolio .project-visual strong{
    font-size:38px;
  }
}

/* V1.5 — definitive Selected Work portrait cards */
#portfolio .project-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:32px !important;
  align-items:start !important;
}
#portfolio .project{
  display:block !important;
  min-width:0 !important;
}
#portfolio .project-visual{
  box-sizing:border-box !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:4 / 5 !important;
  padding:26px 22px !important;
  overflow:hidden !important;
}
#portfolio .project-visual > span{
  top:20px !important;
  left:22px !important;
}
#portfolio .project-visual b{
  position:relative !important;
  display:block !important;
  width:calc(100% - 66px) !important;
  max-width:calc(100% - 66px) !important;
  margin:0 !important;
  padding:0 !important;
  font-size:clamp(17px,1.55vw,25px) !important;
  line-height:1.04 !important;
  letter-spacing:-.035em !important;
  overflow:visible !important;
  white-space:normal !important;
  text-wrap:balance !important;
  z-index:4 !important;
}
#portfolio .project-visual strong{
  position:absolute !important;
  right:18px !important;
  bottom:20px !important;
  font-size:42px !important;
  line-height:1 !important;
  z-index:4 !important;
}
@media(max-width:900px){
  #portfolio .project-grid{
    grid-template-columns:1fr !important;
  }
  #portfolio .project-visual{
    width:min(100%,620px) !important;
    aspect-ratio:4 / 5 !important;
  }
  #portfolio .project-visual b{
    font-size:clamp(22px,5vw,34px) !important;
  }
}
@media(max-width:480px){
  #portfolio .project-visual{
    aspect-ratio:4 / 5 !important;
    padding:22px 18px !important;
  }
  #portfolio .project-visual b{
    width:calc(100% - 58px) !important;
    max-width:calc(100% - 58px) !important;
    font-size:clamp(19px,6vw,27px) !important;
  }
}

/* V1.6 — Safari-safe 4:5 geometry without relying on aspect-ratio */
#portfolio .project-visual{
  aspect-ratio:auto !important;
  width:100% !important;
  height:calc((100vw - 8.8vw - 64px) / 3 * 1.25) !important;
  min-height:420px !important;
  max-height:650px !important;
}
#portfolio .project-visual b{
  font-size:clamp(17px,1.5vw,24px) !important;
}
@media(min-width:1440px){
  #portfolio .project-visual{
    height:520px !important;
  }
}
@media(max-width:1100px) and (min-width:901px){
  #portfolio .project-visual{
    height:calc((100vw - 8.8vw - 64px) / 3 * 1.25) !important;
    min-height:340px !important;
  }
}
@media(max-width:900px){
  #portfolio .project-visual{
    width:min(100%,620px) !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 5 !important;
  }
}

/* V2 HERO — supplied editorial photograph, structure below preserved */
.hero.hero-photo{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(680px,calc(100vh - 82px)) auto !important;
  min-height:calc(100vh - 82px) !important;
  background:#ececea !important;
  overflow:hidden !important;
}
.hero-photo-img{
  position:absolute;
  inset:0 0 auto 0;
  width:100%;
  height:calc(100% - 86px);
  object-fit:cover;
  object-position:center center;
  filter:grayscale(1);
  z-index:0;
}
.hero-photo-copy{
  position:relative;
  z-index:3;
  grid-row:1;
  align-self:center;
  justify-self:end;
  width:min(47vw,700px);
  margin:0 5vw 2vw 0;
  color:#171717;
  padding:0;
}
.hero-photo-copy .eyebrow{
  color:#222;
}
.hero-photo-copy .display{
  margin:25px 0 32px;
  font-size:clamp(58px,6.5vw,104px);
  line-height:.79;
}
.hero-photo-copy .display span{
  color:#111;
}
.hero-photo-copy .display .creative-role{
  margin-top:.31em;
}
.hero-photo-copy .display .creative-role em{
  color:#575754;
  font-weight:400;
}
.hero-photo-copy .hero-intro{
  color:#292929;
  max-width:590px;
  font-size:clamp(16px,1.35vw,21px);
}
.hero-photo .hero-services{
  position:relative;
  z-index:5;
  grid-row:2;
  grid-column:1;
}
.hero-photo .scroll-cue{
  bottom:112px;
  color:#fff;
}
@media(max-width:1100px) and (min-width:901px){
  .hero-photo-copy{
    width:48vw;
    margin-right:3vw;
  }
  .hero-photo-copy .display{
    font-size:6.5vw;
  }
}
@media(max-width:900px){
  .hero.hero-photo{
    display:grid !important;
    grid-template-rows:minmax(610px,78vh) auto !important;
    min-height:auto !important;
  }
  .hero-photo-img{
    height:calc(100% - 178px);
    object-position:38% center;
  }
  .hero-photo:after{
    content:"";
    position:absolute;
    inset:0 0 178px 0;
    background:linear-gradient(180deg,rgba(255,255,255,0) 36%,rgba(240,240,237,.94) 78%,#efefec 100%);
    z-index:1;
    pointer-events:none;
  }
  .hero-photo-copy{
    grid-row:1;
    align-self:end;
    justify-self:stretch;
    width:auto;
    margin:0;
    padding:0 22px 38px;
    z-index:3;
  }
  .hero-photo-copy .eyebrow{
    font-size:8px;
  }
  .hero-photo-copy .display{
    font-size:clamp(45px,13vw,70px);
    margin:18px 0 22px;
    line-height:.8;
  }
  .hero-photo-copy .hero-intro{
    max-width:500px;
    font-size:15px;
  }
  .hero-photo .hero-services{
    grid-row:2;
    margin:0;
  }
}
@media(max-width:480px){
  .hero.hero-photo{
    grid-template-rows:minmax(600px,78vh) auto !important;
  }
  .hero-photo-img{
    height:calc(100% - 174px);
    object-position:32% center;
  }
  .hero-photo-copy{
    padding:0 18px 30px;
  }
  .hero-photo-copy .display{
    font-size:12.7vw;
  }
  .hero-photo-copy .display .creative-role{
    margin-top:.28em;
  }
}

/* V2 Hero.2 — raise desktop hero typography away from the glove */
@media(min-width:901px){
  .hero-photo-copy{
    align-self:center !important;
    transform:translateY(-58px);
  }
}

/* V2 Hero.3 — remove the thin light seam above the hero service bar */
.hero-photo-img{
  height:calc(100% - 85px) !important;
}
.hero-photo .hero-services{
  margin-top:-1px !important;
  border-top:0 !important;
}
.hero.hero-photo{
  border-bottom:0 !important;
}

/* V2 Hero.4 — only the requested cinematic bottom haze */
.hero.hero-photo::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:85px;
  height:38%;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(40,40,40,0) 0%,
    rgba(40,40,40,.05) 24%,
    rgba(38,38,38,.20) 52%,
    rgba(34,34,34,.48) 78%,
    rgba(30,30,30,.72) 100%
  );
}
@media(max-width:900px){
  .hero.hero-photo::before{
    bottom:174px;
    height:34%;
    background:linear-gradient(
      to bottom,
      rgba(40,40,40,0) 0%,
      rgba(40,40,40,.05) 25%,
      rgba(38,38,38,.18) 55%,
      rgba(31,31,31,.62) 100%
    );
  }
}

/* V2 Hero.5 — stronger visible grey haze */
.hero.hero-photo::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:84px !important;
  height:48% !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(
    to bottom,
    rgba(82,82,82,0) 0%,
    rgba(78,78,78,.10) 22%,
    rgba(69,69,69,.30) 48%,
    rgba(56,56,56,.58) 72%,
    rgba(39,39,39,.86) 100%
  ) !important;
}
@media(max-width:900px){
  .hero.hero-photo::before{
    bottom:173px !important;
    height:43% !important;
    background:linear-gradient(
      to bottom,
      rgba(82,82,82,0) 0%,
      rgba(74,74,74,.12) 25%,
      rgba(61,61,61,.38) 58%,
      rgba(38,38,38,.80) 100%
    ) !important;
  }
}

/* V2 Hero.6 — seamless integration: photo haze flows into service strip */
.hero.hero-photo{
  background:#242424 !important;
}

/* Remove the old 1px seam tricks/borders completely */
.hero-photo .hero-services{
  margin-top:0 !important;
  border-top:0 !important;
  box-shadow:none !important;
}
.hero-photo .hero-service{
  border-top:0 !important;
}

/* Extend image/gradient a few pixels behind the services so no white gap can appear */
.hero-photo-img{
  height:calc(100% - 80px) !important;
}

/* Fade to the exact same dark tone as the services bar */
.hero.hero-photo::before{
  bottom:80px !important;
  height:50% !important;
  background:linear-gradient(
    to bottom,
    rgba(36,36,36,0) 0%,
    rgba(36,36,36,.08) 22%,
    rgba(36,36,36,.28) 48%,
    rgba(36,36,36,.60) 75%,
    rgba(36,36,36,.96) 100%
  ) !important;
}

/* Make the service strip itself continue the haze rather than start as a new block */
.hero-photo .hero-services{
  background:#242424 !important;
  position:relative !important;
}
.hero-photo .hero-services::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:12px;
  background:linear-gradient(to bottom,rgba(36,36,36,.88),#242424);
  pointer-events:none;
}

@media(max-width:900px){
  .hero-photo-img{
    height:calc(100% - 168px) !important;
  }
  .hero.hero-photo::before{
    bottom:168px !important;
    height:44% !important;
    background:linear-gradient(
      to bottom,
      rgba(36,36,36,0) 0%,
      rgba(36,36,36,.08) 25%,
      rgba(36,36,36,.34) 60%,
      rgba(36,36,36,.94) 100%
    ) !important;
  }
}

/* V2 Hero.7 — services float directly over the photograph */
@media(min-width:901px){
  .hero.hero-photo{
    display:block !important;
    min-height:calc(100vh - 82px) !important;
    height:calc(100vh - 82px) !important;
    background:#242424 !important;
  }

  .hero-photo-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    z-index:0 !important;
  }

  /* The haze now continues all the way to the bottom of the photo. */
  .hero.hero-photo::before{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:48% !important;
    z-index:1 !important;
    background:linear-gradient(
      to bottom,
      rgba(28,28,28,0) 0%,
      rgba(30,30,30,.08) 22%,
      rgba(31,31,31,.28) 48%,
      rgba(29,29,29,.58) 74%,
      rgba(24,24,24,.82) 100%
    ) !important;
  }

  .hero-photo-copy{
    position:absolute !important;
    z-index:3 !important;
    right:5vw !important;
    top:50% !important;
    width:min(47vw,700px) !important;
    margin:0 !important;
    transform:translateY(calc(-50% - 70px)) !important;
  }

  /* No bar: service navigation sits on the image itself. */
  .hero-photo .hero-services{
    position:absolute !important;
    z-index:4 !important;
    left:3.5vw !important;
    right:3.5vw !important;
    bottom:26px !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    background:transparent !important;
    margin:0 !important;
    border:0 !important;
  }
  .hero-photo .hero-services::before{
    display:none !important;
  }
  .hero-photo .hero-service{
    background:transparent !important;
    color:#fff !important;
    padding:18px 2.6vw !important;
    border-top:1px solid rgba(255,255,255,.28) !important;
    border-right:1px solid rgba(255,255,255,.25) !important;
    border-bottom:0 !important;
  }
  .hero-photo .hero-service:first-child{
    padding-left:0 !important;
  }
  .hero-photo .hero-service:last-child{
    border-right:0 !important;
    padding-right:0 !important;
  }
  .hero-photo .scroll-cue{
    display:none !important;
  }
}

/* Mobile: same concept — image + haze + white service links, no grey bar. */
@media(max-width:900px){
  .hero.hero-photo{
    position:relative !important;
    display:block !important;
    min-height:860px !important;
    background:#242424 !important;
  }
  .hero-photo-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:32% center !important;
  }
  .hero.hero-photo::before{
    bottom:0 !important;
    height:58% !important;
    background:linear-gradient(
      to bottom,
      rgba(30,30,30,0) 0%,
      rgba(31,31,31,.12) 25%,
      rgba(29,29,29,.55) 62%,
      rgba(24,24,24,.90) 100%
    ) !important;
  }
  .hero-photo:after{
    display:none !important;
  }
  .hero-photo-copy{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:245px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
  }
  .hero-photo-copy .eyebrow,
  .hero-photo-copy .display span,
  .hero-photo-copy .display .creative-role em,
  .hero-photo-copy .hero-intro{
    color:#fff !important;
  }
  .hero-photo .hero-services{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:20px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    background:transparent !important;
    margin:0 !important;
  }
  .hero-photo .hero-services::before{display:none !important;}
  .hero-photo .hero-service{
    background:transparent !important;
    color:#fff !important;
    padding:16px 0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-top:1px solid rgba(255,255,255,.28) !important;
  }
}

/* HERO V8 — FINAL OVERLAY IMPLEMENTATION */
@media (min-width:901px){
  #inicio.hero.hero-photo{
    position:relative !important;
    display:block !important;
    height:calc(100vh - 82px) !important;
    min-height:720px !important;
    overflow:hidden !important;
    background:#111 !important;
  }
  #inicio .hero-photo-img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    z-index:0 !important;
  }
  #inicio.hero.hero-photo::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:auto 0 0 0 !important;
    height:50% !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:linear-gradient(to bottom,
      rgba(25,25,25,0) 0%,
      rgba(25,25,25,.10) 25%,
      rgba(25,25,25,.34) 52%,
      rgba(22,22,22,.64) 76%,
      rgba(18,18,18,.88) 100%) !important;
  }
  #inicio .hero-photo-copy{
    position:absolute !important;
    right:5vw !important;
    top:50% !important;
    width:min(47vw,700px) !important;
    margin:0 !important;
    transform:translateY(calc(-50% - 70px)) !important;
    z-index:3 !important;
  }
  #inicio .hero-services{
    position:absolute !important;
    left:3.5vw !important;
    right:3.5vw !important;
    bottom:18px !important;
    width:auto !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    z-index:5 !important;
    background:none !important;
    background-color:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  #inicio .hero-services::before,
  #inicio .hero-services::after{
    content:none !important;
    display:none !important;
  }
  #inicio .hero-service{
    background:none !important;
    background-color:transparent !important;
    color:#fff !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.28) !important;
    border-right:1px solid rgba(255,255,255,.24) !important;
    padding:18px 2.6vw 10px !important;
  }
  #inicio .hero-service:first-child{padding-left:0 !important;}
  #inicio .hero-service:last-child{
    border-right:0 !important;
    padding-right:0 !important;
  }
  #inicio .scroll-cue{display:none !important;}
}

/* HERO V9 — bottom corner cues from the approved visual reference */
.hero-corner-cue{
  position:absolute;
  z-index:7;
  bottom:8px;
  color:#fff;
  font-size:11px;
  line-height:1;
  text-decoration:none;
}
.hero-corner-left{
  left:3.5vw;
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.58);
}
.hero-corner-left span{
  font-size:15px;
  transform:translateY(-1px);
}
.hero-corner-right{
  right:3.5vw;
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:9px;
}
.hero-corner-right .cue-line{
  display:block;
  width:112px;
  height:1px;
  background:rgba(255,255,255,.58);
}
@media(min-width:901px){
  /* Give the corner cues their own lower visual plane without restoring a bar */
  #inicio .hero-services{
    bottom:44px !important;
  }
}
@media(max-width:900px){
  .hero-corner-cue{display:none !important;}
}

/* HERO V10 — subtle vertical breathing room in the lower photographic area */
@media(min-width:901px){
  /* Raise 01/02/03 navigation slightly more into the glove/photo area */
  #inicio .hero-services{
    bottom:70px !important;
  }

  /* Raise the two lower corner cues, but keep a clear hierarchy between them */
  #inicio .hero-corner-cue{
    bottom:20px !important;
  }

  /* Slightly more air inside the service navigation itself */
  #inicio .hero-service{
    padding-top:20px !important;
    padding-bottom:12px !important;
  }
}

/* HERO V11 — raise only the three service menus a little further */
@media(min-width:901px){
  #inicio .hero-services{
    bottom:88px !important;
  }
}

/* HERO V12 — give the cedilla in "Criativa" optical breathing room */
@media(min-width:901px){
  #inicio .hero-photo-copy .display .creative-role em + em{
    margin-top:.085em !important;
  }
}
@media(max-width:900px){
  #inicio .hero-photo-copy .display .creative-role em + em{
    margin-top:.07em !important;
  }
}

/* HERO V13 — optical typography + subtle depth inspired by original portfolio */

/* 1) Definitively separate Direção / Criativa so the cedilla has clean air. */
#inicio .hero-photo-copy .display .creative-role{
  display:flex !important;
  flex-direction:column !important;
  gap:.105em !important;
}
#inicio .hero-photo-copy .display .creative-role em{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:.78 !important;
}
#inicio .hero-photo-copy .display .creative-role em + em{
  margin-top:0 !important;
}

/* 2) Very restrained shadow: depth, not an "effect". */
#inicio .hero-photo-copy .display > span:not(.creative-role){
  text-shadow:0 5px 12px rgba(0,0,0,.10);
}
#inicio .hero-photo-copy .display .creative-role em{
  text-shadow:0 6px 14px rgba(0,0,0,.17);
}

/* A faint localized graphite veil behind the title only.
   It preserves the black Christian/Ferreira while giving the grey role more depth. */
#inicio .hero-photo-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-28px;
  right:-24px;
  top:20%;
  bottom:5%;
  pointer-events:none;
  background:radial-gradient(
    ellipse at 52% 58%,
    rgba(35,35,35,.065) 0%,
    rgba(35,35,35,.035) 42%,
    rgba(35,35,35,0) 74%
  );
  filter:blur(10px);
}

@media(max-width:900px){
  #inicio .hero-photo-copy .display .creative-role{
    gap:.09em !important;
  }
  #inicio .hero-photo-copy .display > span:not(.creative-role){
    text-shadow:0 4px 10px rgba(0,0,0,.13);
  }
  #inicio .hero-photo-copy .display .creative-role em{
    text-shadow:0 5px 12px rgba(0,0,0,.18);
  }
}

/* HERO V14 — definitive cedilla clearance */
#inicio .hero-photo-copy .display .creative-role{
  display:block !important;
  margin-top:.31em !important;
}
#inicio .hero-photo-copy .display .creative-role em{
  display:block !important;
  line-height:.82 !important;
  margin:0 !important;
}
#inicio .hero-photo-copy .display .creative-role em + em{
  margin-top:.18em !important;
}
@media(max-width:900px){
  #inicio .hero-photo-copy .display .creative-role em + em{
    margin-top:.15em !important;
  }
}

/* HERO V15 — tiny optical lift of the intro sentence only */
@media(min-width:901px){
  #inicio .hero-photo-copy .hero-intro{
    transform:translateY(-8px) !important;
  }
}

/* HERO V19 — align lower corner labels with the page's main content grid */
@media(min-width:901px){
  #inicio .hero-corner-left{
    left:4.05vw !important;
  }
  #inicio .hero-corner-right{
    right:4.05vw !important;
  }
}

/* V20 — editorial internal carousels for Selected Work only */
#portfolio .project-carousel{
  position:relative !important;
  isolation:isolate;
  cursor:ew-resize;
  background:#242424 !important;
}
#portfolio .project-slides{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
#portfolio .project-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(1.5%);
  transition:opacity .48s cubic-bezier(.22,.61,.36,1), transform .58s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
#portfolio .project-slide.is-active{
  opacity:1;
  transform:translateX(0);
}
#portfolio .project-slide-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:22px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.022) 32px),
    #2a2a29;
}
#portfolio .project-slide-placeholder small{
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.48);
}
#portfolio .project-cover-title{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .3s ease;
}
#portfolio .project-cover-title b{
  position:absolute !important;
  left:22px !important;
  bottom:27px !important;
  width:calc(100% - 86px) !important;
  max-width:calc(100% - 86px) !important;
  color:#fff;
}
#portfolio .project-cover-title strong{
  position:absolute !important;
  right:18px !important;
  bottom:22px !important;
  color:rgba(255,255,255,.22);
}
#portfolio .project-carousel.not-cover .project-cover-title{
  opacity:0;
}
#portfolio .project-carousel-nav{
  position:absolute;
  z-index:5;
  left:20px;
  right:20px;
  bottom:16px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  color:#fff;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
#portfolio .project-carousel:hover .project-carousel-nav,
#portfolio .project-carousel:focus-within .project-carousel-nav,
#portfolio .project-carousel.not-cover .project-carousel-nav{
  opacity:1;
  transform:translateY(0);
}
#portfolio .project-carousel-nav button{
  pointer-events:auto;
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  padding:7px 3px;
  font:inherit;
  font-size:16px;
  cursor:pointer;
  opacity:.72;
  transition:opacity .2s ease,transform .2s ease;
}
#portfolio .project-carousel-nav button:hover{
  opacity:1;
  transform:translateX(2px);
}
#portfolio .project-carousel-nav .project-prev:hover{
  transform:translateX(-2px);
}
#portfolio .project-counter{
  font-size:9px;
  letter-spacing:.18em;
  white-space:nowrap;
  opacity:.8;
}
#portfolio .project-more{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:20px;
  color:inherit;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:9px;
}
#portfolio .project-more span{
  transition:transform .2s ease;
}
#portfolio .project-more:hover span{transform:translateX(3px);}

@media(max-width:900px){
  #portfolio .project-carousel{
    cursor:default;
    touch-action:pan-y;
  }
  #portfolio .project-carousel-nav{
    opacity:1;
    transform:none;
    bottom:15px;
  }
}
@media(prefers-reduced-motion:reduce){
  #portfolio .project-slide,
  #portfolio .project-carousel-nav,
  #portfolio .project-more span{
    transition:none !important;
  }
}

/* V21 — carousel controls centered at the top of each project card */
#portfolio .project-carousel-nav{
  left:50% !important;
  right:auto !important;
  top:16px !important;
  bottom:auto !important;
  width:max-content !important;
  justify-content:center !important;
  transform:translate(-50%, -4px) !important;
}
#portfolio .project-carousel:hover .project-carousel-nav,
#portfolio .project-carousel:focus-within .project-carousel-nav,
#portfolio .project-carousel.not-cover .project-carousel-nav{
  transform:translate(-50%, 0) !important;
}
@media(max-width:900px){
  #portfolio .project-carousel-nav{
    top:14px !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
  }
}

/* V23 — real imagery remains strictly inside the existing 4:5 project card */
#portfolio .project-slide-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}


/* V24 — contrast treatment for the white Câmaras de Luz cover */
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-carousel-nav{
  color:#151515 !important;
}
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-carousel-nav button{
  color:#151515 !important;
  text-shadow:0 1px 8px rgba(255,255,255,.9);
}
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-counter{
  color:#151515 !important;
  opacity:.78 !important;
  text-shadow:0 1px 8px rgba(255,255,255,.9);
}
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-cover-title b{
  color:#151515 !important;
  text-shadow:0 1px 10px rgba(255,255,255,.85);
}
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-cover-title strong{
  color:rgba(21,21,21,.38) !important;
  text-shadow:0 1px 10px rgba(255,255,255,.75);
}

/* V25 — dark Câmaras cover: restore light editorial overlays */
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-carousel-nav,
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-carousel-nav button,
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-counter,
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-cover-title b{
  color:#fff !important;
  text-shadow:0 1px 12px rgba(0,0,0,.55) !important;
}
#portfolio .project-carousel[data-project="camaras"]:has(.project-slide[data-slide="1"].is-active) .project-cover-title strong{
  color:rgba(255,255,255,.42) !important;
  text-shadow:0 1px 12px rgba(0,0,0,.45) !important;
}

.service-actions{display:flex;flex-direction:column;align-items:flex-start;gap:7px}


/* V34 — uncropped presentation, scoped only to the third Fashion Image carousel */
#portfolio .project-carousel[data-project="editorial"] {
  background: #242424 !important;
}
#portfolio .project-carousel[data-project="editorial"] .project-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242424;
}
#portfolio .project-carousel[data-project="editorial"] .project-slide-image {
  object-fit: contain;
  object-position: center;
}


/* V37 — subtle bottom contrast gradient, limited to the three creative direction cards */
#portfolio .project-carousel[data-project="camaras"]::after,
#portfolio .project-carousel[data-project="educacao"]::after,
#portfolio .project-carousel[data-project="editorial"]::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.38) 0%, rgba(0,0,0,.22) 16%, rgba(0,0,0,0) 41%);
  pointer-events: none;
}
#portfolio .project-carousel[data-project="educacao"]::after {
  background: linear-gradient(to top, rgba(0,0,0,.54) 0%, rgba(0,0,0,.32) 18%, rgba(0,0,0,0) 44%);
}


/* V38 — community invitation, scoped to the Câmaras de Luz section */
#camaras .circle-invite {
  border-top: 1px solid #aaa;
  margin-top: 52px;
  padding-top: 24px;
}
#camaras .circle-invite p {
  color: #ddd;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
#camaras .circle-invite .outline-cta {
  cursor: default;
  user-select: text;
}
@media (max-width: 900px) {
  #camaras .circle-invite {
    margin-top: 34px;
  }
}


/* V39 — Câmaras section alignment, invitation buttons and discreet symbol */
#camaras .camaras-grid {
  grid-template-columns: minmax(0,42fr) minmax(0,58fr);
  align-items: stretch;
}
#camaras .camaras-copy {
  display: flex;
  flex-direction: column;
}
#camaras .circle-invite {
  margin-top: auto;
}
#camaras .camaras-grid > div:first-child .outline-cta,
#camaras .circle-invite .outline-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 300px);
  min-height: 54px;
  padding: 16px 14px;
  line-height: 1.4;
  text-align: center;
}
#camaras .camaras-symbol {
  position: absolute;
  right: 4.4vw;
  bottom: 38px;
  width: 54px;
  height: auto;
  opacity: .46;
  pointer-events: none;
}
@media (max-width: 900px) {
  #camaras .camaras-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    align-items: start;
  }
  #camaras .camaras-symbol {
    right: 22px;
    bottom: 30px;
    width: 42px;
  }
}


/* V40 — preserve bottom alignment of the Câmaras calls to action with expanded copy */
#camaras .camaras-grid > div:first-child {
  display: flex;
  flex-direction: column;
}
#camaras .camaras-grid > div:first-child > .outline-cta {
  margin-top: auto;
}
@media (max-width: 900px) {
  #camaras .camaras-grid > div:first-child > .outline-cta {
    margin-top: 28px;
  }
}

/* V45 — subtle zoom and vertical framing for the Câmaras de Luz cover only */
#portfolio .project-carousel[data-project="camaras"] .project-slide[data-slide="1"] .project-slide-image {
  transform: translateY(-5%) scale(1.10);
  transform-origin: center center;
}


/* V46 — editorial hierarchy and spacing for the Câmaras de Luz closing phrase */
#camaras .camaras-copy > p.camaras-closing {
  font-style: italic;
  font-size: 18px;
  opacity: .9;
  margin-top: 18px;
}
#camaras .circle-invite .outline-cta {
  margin-top: 0;
}

/* V47 — subtle 6% zoom on the Sobre Christian portrait only */
#sobre .portrait img {
  transform: scale(1.06);
  transform-origin: center center;
}
#sobre .portrait:hover img {
  transform: scale(1.0865);
}

/* V52 — align Modeling and UGC actions with the other service CTA */
.service-actions {
  align-items: stretch;
}
.service-actions .text-cta {
  width: 100%;
}
@media (max-width: 900px) {
  .service-row > .service-actions {
    grid-column: 2;
    width: 100%;
  }
}