:root {
  --white:#fff;
  --black:#0a0a0a;
  --surface:#141414;
  --pink:#ff146b;
  --gray:#626262;
  --muted:#b8b8b8;
  --line:#dedede;
  --radius:20px;
  --gutter:clamp(40px,4.5vw,64px);
  --section-space:clamp(96px,8.3vw,120px);
  --font:Poppins,Arial,sans-serif
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:128px;
  scrollbar-width:thin;
  scrollbar-color:var(--pink) #111
}
body {
  margin:0;
  color:var(--black);
  background:var(--white);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}
body,button,a {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  font:inherit;
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
img,video {
  display:block;
  max-width:100%
}
img {
  height:auto
}
picture {
  display:block
}
svg {
  display:block
}
button {
  border:0
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.13;
  overflow-wrap:anywhere
}
p,dt,dd {
  overflow-wrap:anywhere
}
h1,h2 {
  font-weight:500;
  letter-spacing:-.045em
}
h2 {
  font-size:clamp(2.25rem,3.35vw,3rem)
}
h3 {
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:-.035em
}
::-webkit-scrollbar {
  width:12px;
  height:12px
}
::-webkit-scrollbar-track {
  background:linear-gradient(180deg,#09090b,#1c1c21);
  border-left:1px solid #ffffff14
}
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#ff9abd 0%,var(--pink) 48%,#bd0045 100%);
  border:3px solid #121216;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px #ffffff4d,0 0 10px #ff146b8c
}
::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,#ffc0d6,var(--pink) 58%,#d90050)
}
::-webkit-scrollbar-button {
  display:none
}
::-webkit-scrollbar-corner {
  background:#09090b
}
.rocket-cursor {
  display:none
}
@media(pointer:fine) {
  html.custom-cursor-ready,html.custom-cursor-ready body,html.custom-cursor-ready body * {
    cursor:none!important
  }
  .rocket-cursor {
    --cursor-x:-100px;
    --cursor-y:-100px;
    display:block;
    position:fixed;
    z-index:1000;
    left:0;
    top:0;
    width:38px;
    height:38px;
    pointer-events:none;
    opacity:0;
    transform:translate3d(calc(var(--cursor-x) - 33px),calc(var(--cursor-y) - 5px),0);
    transition:opacity .18s ease;
    will-change:transform
  }
  .rocket-cursor.is-visible {
    opacity:1
  }
  .rocket-cursor svg {
    width:100%;
    height:100%;
    overflow:visible;
    filter:drop-shadow(0 2px 3px #0005) drop-shadow(0 0 5px #ff146b33);
    transition:transform .25s cubic-bezier(.22,1,.36,1),filter .25s
  }
  .rocket-cursor.is-hovering svg {
    transform:scale(1.1) rotate(-3deg);
    filter:drop-shadow(0 3px 4px #0006) drop-shadow(0 0 8px #ff146b80)
  }
  .rocket-flame {
    opacity:.4;
    transform-origin:16px 36px;
    transform:scale(.72)
  }
  .rocket-cursor.is-moving .rocket-flame {
    opacity:1;
    animation:rocket-flame .18s ease-in-out infinite alternate
  }
  .rocket-cursor::after {
    content:"";
    position:absolute;
    left:3px;
    bottom:1px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--pink);
    opacity:0;
    box-shadow:0 0 7px #ff146b
  }
  .rocket-cursor.is-moving::after {
    animation:rocket-exhaust .42s ease-out infinite
  }
}
@keyframes rocket-flame {
  from {
    transform:scale(.76) translate(1px,-1px)
  }
  to {
    transform:scale(1.12) translate(-1px,1px)
  }
}
@keyframes rocket-exhaust {
  0% {
    opacity:.85;
    transform:translate(3px,-3px) scale(.9)
  }
  100% {
    opacity:0;
    transform:translate(-12px,12px) scale(.2)
  }
}
p {
  white-space:pre-wrap
}
p+p {
  margin-top:20px
}
::selection {
  background:var(--pink);
  color:var(--black)
}
:focus-visible {
  outline:3px solid var(--pink);
  outline-offset:6px
}
.button:focus-visible,.mobile-toggle:focus-visible {
  outline-color:currentColor;
  box-shadow:0 0 0 5px var(--pink)
}
[hidden] {
  display:none!important
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.container {
  max-width:calc(1200px + var(--gutter)*2);
  padding-inline:var(--gutter);
  margin-inline:auto
}
.dark-section {
  background:var(--black);
  color:var(--white)
}
.pink {
  color:var(--pink)
}
.accent-line {
  display:block;
  width:48px;
  height:4px;
  background:var(--pink);
  margin-bottom:28px
}
.button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:var(--pink);
  color:var(--black);
  padding:17px 23px;
  min-height:56px;
  border-radius:14px;
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  max-width:100%;
  box-shadow:0 6px 22px #ff146b0d;
  transition:box-shadow .35s,filter .35s,transform .35s cubic-bezier(.22,1,.36,1)
}
.button .icon {
  width:22px;
  height:22px;
  transition:transform .35s cubic-bezier(.22,1,.36,1)
}
.button::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:-45% auto -45% -38%;
  width:28%;
  background:linear-gradient(90deg,transparent,#ffffff7a,transparent);
  transform:skewX(-18deg) translateX(0);
  pointer-events:none
}
.mobile-break {
  display:none
}
.skip-link {
  position:fixed;
  left:20px;
  top:12px;
  transform:translateY(-180%);
  z-index:200;
  background:var(--pink);
  padding:12px 18px;
  color:var(--black);
  border-radius:12px
}
.skip-link:focus {
  transform:none
}
.top-line {
  position:fixed;
  inset:0 0 auto;
  height:3px;
  background:var(--pink);
  z-index:102
}
.site-header {
  position:fixed;
  top:15px;
  left:0;
  width:100%;
  z-index:100;
  pointer-events:none
}
.header-container {
  max-width:calc(1200px + var(--gutter)*2);
  padding-inline:var(--gutter);
  margin:auto;
  position:relative
}
.menu-shell {
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:24px;
  width:100%;
  height:88px;
  padding:5px 14px 5px 12px;
  border-radius:22px;
  background:rgba(255,255,255,.91);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid #ffffffb3;
  box-shadow:0 8px 32px #00000014;
  transition:width .76s cubic-bezier(.22,1,.36,1),height .76s cubic-bezier(.22,1,.36,1),padding .76s cubic-bezier(.22,1,.36,1),border-radius .76s cubic-bezier(.22,1,.36,1),box-shadow .3s;
  overflow:hidden
}
.brand {
  flex:0 0 88px;
  width:88px;
  display:block;
  background:transparent;
  border-radius:14px
}
.brand img {
  width:78px;
  height:78px;
  object-fit:contain;
  margin:auto
}
.main-nav {
  display:flex;
  justify-content:center;
  gap:clamp(14px,2vw,28px);
  align-items:center;
  flex:1;
  white-space:nowrap
}
.main-nav a {
  position:relative;
  font-size:0.875rem;
  font-weight:500;
  padding-block:16px
}
.main-nav a::after,.mobile-menu>a:not(.button)::after {
  position:absolute;
  content:"";
  height:2px;
  width:18px;
  background:var(--pink);
  bottom:9px;
  left:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s
}
.main-nav a[aria-current]::after,.main-nav a:hover::after,.mobile-menu>a[aria-current]::after {
  transform:scaleX(1)
}
.header-cta {
  font-size:0.875rem;
  gap:12px;
  min-height:48px;
  padding:13px 16px;
  flex-shrink:0
}
.main-nav,.header-cta {
  transition:opacity .3s,visibility .3s,transform .5s cubic-bezier(.22,1,.36,1)
}
.site-header.is-collapsed .menu-shell {
  width:96px;
  height:76px;
  padding:4px 10px;
  border-radius:20px
}
.site-header.is-collapsed .main-nav,.site-header.is-collapsed .header-cta {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateX(-18px)
}
.site-header.is-collapsed .brand {
  flex-basis:74px;
  width:74px
}
.site-header.is-collapsed .brand img {
  width:68px;
  height:68px
}
.mobile-toggle,.mobile-menu {
  display:none
}
.marquee-divider {
  position:relative;
  z-index:4;
  width:100%;
  overflow:hidden;
  background:var(--pink);
  color:var(--white);
  padding-block:13px;
  box-shadow:0 6px 18px #ff146b24
}
.marquee-track {
  display:flex;
  align-items:center;
  width:max-content;
  animation:marquee-loop 24s linear infinite;
  will-change:transform
}
.marquee-group {
  display:flex;
  flex:none;
  align-items:center;
  gap:30px;
  padding-right:30px
}
.marquee-group span {
  font-size:clamp(.9rem,1.25vw,1.075rem);
  font-weight:300;
  line-height:1.5;
  white-space:nowrap;
  letter-spacing:.01em
}
.marquee-group b {
  color:var(--white);
  font-size:1.15rem;
  font-weight:300;
  line-height:1
}
@keyframes marquee-loop {
  to {
    transform:translateX(-50%)
  }
}
.soft-divider {
  --wave-from:var(--white);
  --wave-to:var(--black);
  position:relative;
  z-index:3;
  height:16px;
  margin-block:-8px;
  overflow:hidden;
  background:var(--wave-from);
  color:var(--wave-to);
  line-height:0
}
.soft-divider svg {
  display:block;
  width:100%;
  height:100%
}
.soft-divider path {
  fill:currentColor
}
.about-services-divider {
  --wave-from:#262621;
  --wave-to:var(--white)
}
.services-strong-divider {
  --wave-from:var(--white);
  --wave-to:#d4d4d4
}
.strong-portfolio-divider {
  --wave-from:#d4d4d4;
  --wave-to:var(--black)
}
.portfolio-differences-divider {
  --wave-from:var(--black);
  --wave-to:var(--white)
}
.differences-instagram-divider {
  --wave-from:var(--white);
  --wave-to:var(--black)
}
.hero {
  position:relative;
  isolation:isolate;
  min-height:750px;
  min-height:clamp(750px,58vw,900px);
  overflow:hidden
}
.hero-media {
  position:absolute;
  inset:0;
  z-index:-1
}
.hero-poster,.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center
}
.hero-poster img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right center
}
.hero-video {
  opacity:0;
  transition:opacity .9s ease;
  will-change:opacity
}
.hero-video.is-active {
  opacity:1
}
.hero-video.is-active.is-fading {
  opacity:0
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0a0a0a 5%,#0a0a0aeb 30%,#0a0a0a85 50%,#0a0a0a00 75%)
}
.hero-layout {
  display:flex;
  align-items:center;
  min-height:inherit;
  padding-top:160px;
  padding-bottom:85px
}
.hero-copy {
  width:56%;
  max-width:630px
}
.hero h1 {
  font-size:clamp(3.25rem,4.65vw,4.25rem);
  line-height:1.075;
  text-wrap:balance
}
.hero-subtitle {
  font-size:1.125rem;
  color:#dedede;
  max-width:510px;
  margin-top:28px;
  line-height:1.65
}
.hero-support {
  font-size:1rem;
  color:var(--muted);
  margin-top:18px
}
.hero .button {
  margin-top:30px
}

.header-cta,.hero .button,.mobile-menu .button {
  color:var(--white);
  font-weight:300
}
.section {
  padding-block:var(--section-space)
}
.split-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);
  align-items:center
}
.eyebrow {
  font-size:0.875rem;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--pink);
  margin-bottom:20px
}
.about-copy .eyebrow {
  font-weight:300
}
.body-copy {
  margin-top:28px;
  color:var(--gray)
}
.section-heading {
  margin-bottom:42px
}
.section-heading .accent-line {
  margin-bottom:24px
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.service-card {
  position:relative;
  overflow:hidden;
  padding:30px 26px 32px;
  border:1px solid #e5e5e5;
  border-radius:var(--radius);
  background:#fff;
  color:var(--black);
  box-shadow:0 10px 32px #0000000a;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .45s
}
.service-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:var(--pink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1)
}
.service-icon {
  width:34px;
  height:34px;
  color:var(--pink);
  margin-bottom:30px;
  stroke-width:1.6
}
.service-card h3 {
  max-width:420px;
  margin-bottom:16px;
  font-size:clamp(1.125rem,1.45vw,1.35rem)
}
.service-card p {
  color:var(--gray);
  line-height:1.7;
  max-width:440px
}
.services-section {
  background:var(--white);
  color:var(--black)
}
.services-section .section-heading {
  text-align:center
}
.services-section .accent-line {
  margin-inline:auto
}
.portfolio-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--black);
  background-image:url("https://rafaelakarine.com.br/wp-content/uploads/2026/03/banner-novo-destop2.png");
  background-position:center;
  background-size:cover;
  background-attachment:fixed
}
.portfolio-background {
  display:none
}
.portfolio-section::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0a0a0a1a,#0a0a0a80);
  z-index:-1
}
.portfolio-art {
  width:100%;
  height:auto;
  object-fit:contain
}
.portfolio-copy h2 {
  max-width:490px
}
.portfolio-copy p {
  margin-top:24px;
  color:#d0d0d0
}
.portfolio-copy .button {
  margin-top:30px;
  color:var(--white);
  font-weight:300
}
.portfolio-button {
  gap:14px
}
.behance-icon {
  width:29px;
  height:20px;
  object-fit:contain;
  flex:0 0 auto
}
.differences-section h2 {
  max-width:1030px;
  font-size:clamp(2.25rem,3.2vw,2.875rem);
  margin-inline:auto;
  text-align:center;
  text-wrap:balance
}
.differences-list {
  margin:52px auto 0;
  max-width:1100px;
  padding:10px 28px;
  border:1px solid #ececec;
  border-radius:24px;
  background:linear-gradient(145deg,#fff,#fafafa);
  box-shadow:0 20px 55px #0000000a
}
.difference-row {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:48px;
  border-top:1px solid var(--line);
  padding:28px 18px;
  transition:background .35s,border-color .35s,transform .35s;
  border-radius:14px
}
.difference-row::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:24%;
  height:1px;
  opacity:0;
  background:linear-gradient(90deg,transparent,var(--pink),#fff,var(--pink),transparent);
  box-shadow:0 0 7px #ff146b;
  transform:translateX(-120%);
  pointer-events:none
}
.difference-row:last-child {
  border-bottom:1px solid var(--line)
}
.difference-row dt {
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:600;
  font-size:1.3125rem;
  line-height:1.35;
  letter-spacing:-.025em
}
.difference-row dt .icon {
  color:var(--pink);
  width:28px;
  height:28px;
  transition:transform .35s
}
.difference-row dd {
  margin:0;
  color:var(--gray);
  white-space:pre-wrap
}
.social-icon {
  width:22px;
  height:22px;
  flex-shrink:0
}
.site-footer {
  text-align:center;
  padding-top:40px;
  background:var(--black);
  color:var(--white);
  border-top:1px solid #ffffff1a
}
.footer-logo {
  width:220px;
  height:220px;
  object-fit:contain;
  margin:auto
}
.footer-description {
  max-width:700px;
  color:var(--white);
  margin:5px auto 0
}
.footer-invitation {
  margin-top:16px;
  font-size:1.125rem;
  font-weight:600
}
.social-links {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-block:30px 52px
}
.social-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:var(--pink);
  color:var(--black);
  border-radius:50%;
  flex-shrink:0
}
.social-button img {
  width:22px;
  height:22px;
  filter:brightness(0) invert(1);
  transition:transform .38s cubic-bezier(.22,1,.36,1)
}
.footer-bottom {
  border-top:1px solid #ffffff24;
  padding:30px 80px 36px
}
.footer-bottom p {
  font-size:0.875rem;
  color:var(--white)
}
.whatsapp-float {
  position:fixed;
  z-index:90;
  right:max(24px,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));
  width:76px;
  height:76px;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:0 8px 25px #0004
}
.contact-photo {
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:contain;
  transform-origin:center;
  animation:contact-photo-pulse 2.15s ease-in-out infinite
}
.reveal-pending {
  opacity:0;
  transform:translateY(18px)
}
.reveal {
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)
}
.reveal.is-visible {
  opacity:1;
  transform:none
}
.button:active,.social-button:active,.mobile-toggle:active,.whatsapp-float:active {
  filter:brightness(.94)
}

@media(hover:hover) and (pointer:fine) {
  .button:hover,.mobile-toggle:hover,.social-button:hover {
    animation:button-hop .55s cubic-bezier(.22,1,.36,1) both
  }
  .button:hover {
    box-shadow:0 9px 30px #ff146b4d
  }
  .button:hover::before {
    animation:button-shine .9s ease forwards
  }
  .button:hover .icon {
    transform:translate(3px,-3px)
  }
  .service-card:hover {
    transform:translateY(-8px) scale(1.012);
    border-color:#ff146b70;
    box-shadow:0 22px 46px #0000001f
  }
  .service-card:hover::before {
    transform:scaleX(1)
  }
  .difference-row:hover {
    background:#fff;
    transform:translateX(4px)
  }
  .difference-row:hover::after {
    opacity:1;
    animation:led-travel 1.35s ease-in-out infinite
  }
  .difference-row:hover dt .icon {
    transform:scale(1.15) rotate(-5deg)
  }
  .social-button:hover img {
    transform:scale(1.22) rotate(8deg)
  }
}
@keyframes button-hop {
  0% {
    transform:translateY(0) scale(1)
  }
  55% {
    transform:translateY(-6px) scale(1.015)
  }
  100% {
    transform:translateY(-3px) scale(1.01)
  }
}
@keyframes button-shine {
  to {
    transform:skewX(-18deg) translateX(620%)
  }
}
@keyframes led-travel {
  to {
    transform:translateX(520%)
  }
}
@keyframes contact-photo-pulse {
  0%,100% {
    transform:scale(.94);
    opacity:.92;
    filter:drop-shadow(0 0 0 #ff146b00)
  }
  50% {
    transform:scale(1);
    opacity:1;
    filter:drop-shadow(0 0 7px #ff146b59)
  }
}

@media(min-width:851px) and (max-width:1050px) {
  .menu-shell {
    gap:14px
  }
  .main-nav {
    gap:12px
  }
  .brand {
    flex-basis:74px;
    width:74px
  }
  .brand img {
    width:70px;
    height:70px
  }
  .header-cta {
    font-size:0.875rem;
    padding-inline:12px;
    gap:6px
  }
  .header-cta .icon {
    display:none
  }
}

@media(min-width:851px) and (max-width:1200px) {
  .services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
}

@media(max-width:850px) {
  :root {
    --gutter:24px;
    --section-space:64px
  }
  html {
    scroll-padding-top:110px
  }
  .site-header {
    top:12px
  }
  .menu-shell {
    height:76px;
    justify-content:space-between;
    padding:5px 9px 5px 10px;
    gap:12px;
    border-radius:20px
  }
  .brand {
    flex-basis:72px;
    width:72px
  }
  .brand img {
    width:64px;
    height:64px
  }
  .main-nav,.header-cta {
    display:none
  }
  .mobile-toggle {
    position:relative;
    display:block;
    width:48px;
    height:48px;
    border-radius:13px;
    background:var(--pink);
    color:var(--white);
    flex-shrink:0
  }
  .mobile-toggle span {
    position:absolute;
    width:20px;
    height:2px;
    left:14px;
    top:19px;
    background:currentColor;
    border-radius:2px;
    transition:transform .25s,top .25s
  }
  .mobile-toggle span+span {
    top:27px
  }
  .mobile-toggle[aria-expanded=true] span {
    top:23px;
    transform:rotate(45deg)
  }
  .mobile-toggle[aria-expanded=true] span+span {
    transform:rotate(-45deg)
  }
  .mobile-menu {
    pointer-events:auto;
    display:block;
    position:absolute;
    top:86px;
    left:var(--gutter);
    right:var(--gutter);
    max-height:calc(100dvh - 118px);
    overflow-y:auto;
    padding:12px 16px 16px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(18px);
    border:1px solid #ddd;
    border-radius:20px;
    box-shadow:0 18px 40px #0003
  }
  .mobile-menu>a:not(.button) {
    display:block;
    position:relative;
    min-height:48px;
    padding:13px 8px;
    border-bottom:1px solid #e7e7e7;
    font-size:0.9375rem;
    font-weight:500
  }
  .mobile-menu>a:not(.button)::after {
    left:8px;
    bottom:7px
  }
  .mobile-menu .button {
    margin-top:14px;
    width:100%;
    font-size:0.875rem
  }
  .hero {
    min-height:0;
    padding-top:136px
  }
  .hero-layout {
    padding-top:0;
    padding-bottom:0;
    min-height:0
  }
  .hero-copy {
    width:100%;
    max-width:620px
  }
  .hero h1 {
    font-size:clamp(2.125rem,6.8vw,2.625rem);
    max-width:580px
  }
  .hero-subtitle {
    font-size:1rem;
    margin-top:24px;
    max-width:580px
  }
  .hero-support {
    font-size:0.9375rem;
    margin-top:16px
  }
  .hero .button {
    margin-top:26px
  }
  .hero-media {
    position:relative;
    inset:auto;
    z-index:0;
    width:100%;
    aspect-ratio:1;
    max-width:540px;
    margin:0 auto;
    grid-row:2
  }
  .hero {
    display:flex;
    flex-direction:column
  }
  .hero-layout {
    order:-1;
    width:100%
  }
  .hero-poster,.hero-video,.hero-poster img {
    object-position:center bottom;
    object-fit:cover
  }
  .hero-shade {
    background:linear-gradient(180deg,#0a0a0a 0%,#0a0a0a00 18%)
  }
  .accent-line {
    width:36px;
    margin-bottom:24px
  }
  h2 {
    font-size:clamp(1.75rem,5vw,2.125rem);
    line-height:1.15
  }
  h3 {
    font-size:1.375rem
  }
}

@media(max-width:520px) {
  .button {
    width:100%
  }
  .hero-media {
    margin-top:0
  }
  .hero-support {
    max-width:300px
  }
}

@media(max-width:850px) {
  .split-layout {
    grid-template-columns:minmax(0,1fr);
    gap:34px
  }
  .body-copy {
    margin-top:24px
  }
  .services-grid {
    grid-template-columns:minmax(0,1fr);
    gap:16px
  }
  .service-card {
    padding:28px
  }
  .service-card h3 {
    max-width:none
  }
  .service-icon {
    margin-bottom:24px
  }
  .section-heading {
    margin-bottom:32px
  }
  .portfolio-art {
    max-width:540px;
    margin:auto
  }
  .portfolio-copy .accent-line {
    margin-bottom:24px
  }
  .differences-section h2 {
    font-size:clamp(1.75rem,5vw,2.125rem);
    max-width:650px
  }
  .differences-list {
    margin-top:32px;
    display:grid;
    gap:16px
  }
  .difference-row {
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:16px
  }
  .difference-row dt {
    font-size:1.25rem;
    gap:16px
  }
  .difference-row dd {
    font-size:1rem
  }
  .site-footer {
    padding-top:24px
  }
  .footer-logo {
    width:185px;
    height:185px
  }
  .footer-description {
    margin-top:8px
  }
  .social-links {
    gap:10px;
    margin-block:28px 40px
  }
  .footer-bottom {
    padding:26px 0 calc(108px + env(safe-area-inset-bottom))
  }
  .footer-bottom p {
    font-size:0.8125rem
  }
  .whatsapp-float {
    width:66px;
    height:66px;
    right:calc(18px + env(safe-area-inset-right));
    bottom:calc(18px + env(safe-area-inset-bottom))
  }
}

@media(max-width:350px) {
  :root {
    --gutter:16px
  }
  .header-container {
    padding-inline:12px
  }
  .hero h1 {
    font-size:2.125rem
  }
  .button {
    font-size:0.875rem;
    gap:14px;
    padding-inline:16px
  }
}


/* Full-width photographic sections: the original desktop and mobile art remain intact. */
.about-section,.strong-section,.instagram-section {
  position:relative;
  isolation:isolate;
  overflow:hidden
}

.section-art {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  margin:0;
  pointer-events:none
}

.section-art img {
  width:100%;
  height:100%;
  object-fit:cover
}

.about-section {
  background:#262621;
  color:var(--white);
  padding-block:80px;
  min-height:660px
}

.about-section::before,.instagram-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,#161613ce 0%,#1616139c 44%,#16161300 70%)
}

.about-section .split-layout {
  display:block
}

.about-copy {
  width:54%;
  max-width:630px
}

.about-copy .body-copy {
  color:var(--white)
}

.about-art img {
  object-position:60% center
}

.strong-section {
  background:#d4d4d4;
  padding-block:100px;
  min-height:610px
}

.strong-layout {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:26px;
  min-height:410px
}

.strong-layout h2,.strong-copy {
  width:48%;
  max-width:540px;
  margin:0
}
.strong-layout h2 {
  font-weight:600
}

.strong-copy {
  color:#333
}

.strong-art img {
  object-position:40% center
}

.instagram-section {
  min-height:600px;
  padding-block:90px
}

.instagram-section::before {
  background:linear-gradient(90deg,#0a0a0ad9 0%,#0a0a0aa6 38%,#0a0a0a00 70%)
}

.instagram-layout {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:28px;
  min-height:420px
}

.instagram-copy {
  width:50%;
  max-width:580px
}

.instagram-copy p {
  margin-top:24px;
  color:var(--white);
  max-width:500px
}

.instagram-art img {
  object-position:65% top
}

.instagram-button {
  margin:0;
  color:var(--white);
  font-weight:300;
  gap:18px;
  position:relative;
  overflow:hidden
}

.instagram-button .social-icon {
  filter:brightness(0) invert(1)
}

.instagram-button::after {
  content:"";
  position:absolute;
  inset:-50% auto -50% -45%;
  width:30%;
  background:linear-gradient(90deg,transparent,#ffffff73,transparent);
  transform:skewX(-18deg) translateX(0);
  pointer-events:none
}

@media(hover:hover) and (pointer:fine) {
  .instagram-button:hover::after {
    animation:instagram-shine .9s ease forwards
  }
}

@keyframes instagram-shine {
  to {
    transform:skewX(-18deg) translateX(620%)
  }
}

.contact-tooltip {
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translate(6px,-50%);
  background:var(--black);
  border:1px solid var(--pink);
  box-shadow:0 0 9px #ff146b70,0 8px 24px #0005;
  color:var(--white);
  padding:10px 16px;
  border-radius:12px;
  font-size:.875rem;
  font-weight:500;
  line-height:1.5;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s,transform .2s,visibility .2s
}

.contact-tooltip::after {
  content:"";
  position:absolute;
  right:-5px;
  top:calc(50% - 5px);
  width:10px;
  height:10px;
  transform:rotate(45deg);
  background:var(--black);
  border-top:1px solid var(--pink);
  border-right:1px solid var(--pink)
}

.whatsapp-float:focus-visible .contact-tooltip {
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%)
}

@media(hover:hover) and (pointer:fine) {
  .whatsapp-float:hover .contact-tooltip {
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%)
  }
}

@media(min-width:851px) and (max-width:1100px) {
  .about-section {
    padding-block:64px
  }
  .about-copy {
    width:56%
  }
  .about-section::before {
    background:linear-gradient(90deg,#161613db 0%,#161613aa 46%,#16161300 83%)
  }
  .strong-layout h2,.strong-copy {
    width:49%
  }
  .instagram-copy {
    width:54%
  }
}

@media(max-width:850px) {
  
 .hero {
    padding-top:116px
  }
  .hero-copy {
    text-align:center;
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .hero .accent-line {
    margin:0 auto 20px
  }
  .hero-subtitle {
    margin-top:20px
  }
  .hero .button {
    margin-top:22px;
    margin-bottom:12px
  }
  
 .about-section {
    padding-top:56px;
    padding-bottom:clamp(500px,118vw,620px);
    min-height:0;
    background:#262621
  }
  
 .about-copy {
    width:100%;
    max-width:640px;
    text-align:center;
    margin-inline:auto
  }
  
 .about-art img {
    object-position:center bottom
  }
  
 .about-section::before {
    background:linear-gradient(180deg,#262621 0%,#262621e0 35%,#26262185 58%,#26262100 74%)
  }
  
 .about-copy .body-copy {
    margin-top:22px
  }
  .mobile-break {
    display:block
  }
  
 .strong-section {
    padding-top:56px;
    padding-bottom:clamp(320px,90vw,450px);
    min-height:0
  }
  
 .strong-layout {
    display:block;
    min-height:0;
    text-align:center
  }
  
 .strong-layout h2,.strong-copy {
    width:100%;
    max-width:640px
  }
  
 .strong-layout h2 {
    font-size:clamp(1.75rem,5vw,2.125rem)
  }
  
 .strong-copy {
    margin-top:24px
  }
  
 .strong-art img {
    object-position:center bottom
  }
  
 .strong-section::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,#e1e1e1f2 0%,#e1e1e1d9 37%,#e1e1e100 66%)
  }
  
 .instagram-section {
    padding-top:56px;
    padding-bottom:clamp(350px,95vw,500px);
    min-height:0
  }
  
 .instagram-layout {
    min-height:0;
    gap:24px;
    align-items:center;
    text-align:center
  }
  
 .instagram-copy {
    width:100%;
    max-width:640px
  }
  .instagram-copy .accent-line {
    margin-inline:auto
  }
  
 .instagram-art img {
    object-position:center bottom
  }
  
 .instagram-section::before {
    background:linear-gradient(180deg,#0a0a0ade 0%,#0a0a0ab3 36%,#0a0a0a00 64%)
  }
  
 .instagram-button {
    width:auto;
    max-width:100%;
    align-self:center
  }
  .portfolio-copy {
    text-align:center
  }
  .portfolio-copy .accent-line {
    margin-inline:auto
  }
  .differences-list {
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none
  }
  .services-section .section-heading {
    text-align:center
  }
}

@media(max-width:520px) {
  .instagram-button {
    width:100%;
    gap:14px
  }
}

@media(min-width:700px) and (max-width:850px) {
  :root {
    --gutter:36px;
    --section-space:78px
  }
  .hero h1 {
    font-size:clamp(2.65rem,5.4vw,3rem)
  }
  .hero-copy {
    max-width:690px
  }
  .hero-media {
    max-width:650px
  }
  .about-section {
    padding-top:72px;
    padding-bottom:clamp(450px,66vw,520px)
  }
  .services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
  .service-card {
    padding:27px 24px 30px
  }
  .strong-section {
    padding-top:72px;
    padding-bottom:440px
  }
  .strong-layout h2 {
    font-size:2.35rem
  }
  .portfolio-art {
    max-width:580px
  }
  .portfolio-copy {
    max-width:640px;
    margin-inline:auto
  }
  .differences-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
  }
  .difference-row {
    min-height:228px;
    padding:22px
  }
  .difference-row dt {
    font-size:1.125rem
  }
  .instagram-section {
    padding-top:72px;
    padding-bottom:460px
  }
}

@media(min-width:851px) and (max-width:1180px) {
  :root {
    --gutter:32px;
    --section-space:82px
  }
  .menu-shell {
    gap:14px
  }
  .main-nav {
    gap:12px
  }
  .hero {
    min-height:clamp(680px,68vw,780px)
  }
  .hero-layout {
    padding-top:140px;
    padding-bottom:70px
  }
  .hero-copy {
    width:58%;
    max-width:560px
  }
  .hero h1 {
    font-size:clamp(2.8rem,5vw,3.45rem)
  }
  .split-layout {
    gap:42px
  }
  .about-section {
    min-height:620px;
    padding-block:70px
  }
  .about-copy {
    width:59%;
    max-width:560px
  }
  .services-grid {
    gap:18px
  }
  .strong-section {
    min-height:570px;
    padding-block:70px
  }
  .strong-layout h2,.strong-copy {
    width:50%
  }
  .portfolio-art {
    max-width:520px;
    margin-inline:auto
  }
  .differences-list {
    padding-inline:20px
  }
  .difference-row {
    gap:30px
  }
  .instagram-section {
    min-height:560px;
    padding-block:70px
  }
  .instagram-copy {
    width:58%
  }
}


@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .reveal-pending {
    opacity:1;
    transform:none
  }
  .reveal {
    transition:none
  }
}