:root{--paper:#f4eeec;--ink:#292828;--accent:#735a56;--line:#d6c6c3;--light:#faf1ef}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'DM Sans',sans-serif}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid #b47a50;outline-offset:4px}
.wrap{width:min(100% - 48px,1150px);margin-inline:auto}
h1,h2,h3,.brand{font-family:'Instrument Serif',Georgia,serif;font-weight:400;margin:0;line-height:.94}
h1{font-size:clamp(4.8rem,10vw,9rem);letter-spacing:-.035em}
h2{font-size:clamp(3.35rem,6.9vw,6.2rem);letter-spacing:-.025em}
h3{font-size:clamp(1.95rem,3vw,2.85rem)}
em{font-weight:400;color:var(--accent)}
figure,p{margin:0}
img{display:block;width:100%;height:auto}
.header,.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0}
.header,.section-divider{border-bottom:1px solid var(--line)}
.brand{font-size:2rem;white-space:nowrap}
.brand small,.label,.case-meta{display:block;font:700 .65rem/1.4 'DM Sans',sans-serif;letter-spacing:.17em;text-transform:uppercase}
.brand small{margin-top:5px}
.header nav{
  display:flex;
  gap:8px;
  font-size:.83rem;
  font-weight:600;
}
.header nav a{
  display:grid;
  place-items:center;
  min-height:44px;
  padding-inline:clamp(4px,1vw,12px);
  white-space:nowrap;
}
.header nav a:is(:hover,:focus-visible){
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:5px;
}

@media(max-width:650px){
  .header{flex-wrap:wrap}
  .header nav{order:1;flex:0 0 100%}
  .header nav a{flex:1}
}
.pill{display:inline-flex;justify-content:center;gap:12px;align-items:center;border:1px solid transparent;border-radius:99px;padding:12px 21px;font-size:.83rem;font-weight:700;min-height:45px}
.header-booking{
  gap:10px;
  padding:7px 8px 7px 19px;
  border-color:#454343;
  background:linear-gradient(145deg,#454343,#292828);
  color:var(--light);
  box-shadow:0 3px 8px #29282826;
  letter-spacing:.025em;
}
.header-booking span{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid #f1e2df4d;
  border-radius:50%;
  background:#f1e2df1a;
  color:#f1e2df;
}
.header-booking:is(:hover,:focus-visible){
  border-color:#735a56;
  background:linear-gradient(145deg,#575050,#353030);
}
.header-booking:is(:hover,:focus-visible) span{
  background:#f1e2df;
  color:var(--ink);
}
.primary{background:var(--ink);color:var(--light)}
.primary:hover{background:var(--accent)}
.text-link{font-size:.88rem;text-decoration:underline;text-underline-offset:5px;font-weight:600}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,6vw,90px);align-items:center;padding-block:clamp(36px,5vw,78px)}
.label{color:var(--accent);margin-bottom:17px}
.intro{max-width:43ch;margin:24px 0}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px}
.hero-photo{position:relative;justify-self:center;width:min(100%,380px);padding:8px;border:1px solid var(--line);border-radius:210px 210px 12px 12px}
.hero-photo img{aspect-ratio:4/4.65;object-fit:cover;object-position:center 29%;border-radius:205px 205px 8px 8px}
.hero-photo figcaption{position:absolute;bottom:17px;left:17px;background:var(--paper);border-radius:50px;padding:5px 12px;font-size:.71rem}
.cases{background:#353434;color:var(--light);padding:clamp(45px,7vw,95px) 0}
.cases em,.cases .label,.case-meta{color:#ebd0cd}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:14px}
.arrows{display:flex;gap:8px}
.arrows button{background:transparent;color:var(--light);border:1px solid #aa9290;border-radius:50%;width:42px;height:42px}
.arrows button:hover{background:#655451}
.case-intro{margin:16px 0 23px;color:#e1d0c3}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:#ad9490 transparent}
.case{scroll-snap-align:start;background:#444141;border:1px solid #8d7d7c;border-radius:14px;overflow:hidden}
.case a{display:block;height:100%}
.case img{aspect-ratio:497/785;object-fit:contain;background:#252323}
.case-meta{display:flex;justify-content:space-between;padding:15px 15px 7px}
.case h3{padding:0 15px 18px}
.case-note{font-size:.83rem;color:#e1d0c3;margin-top:15px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,110px);align-items:center;padding-block:clamp(55px,8vw,105px)}
.about figure{max-width:345px;justify-self:center}
.about img{border-radius:8px 100px 8px 8px}
.about p:not(.label){max-width:45ch;margin:20px 0}

.contact{background:#e6d8d6;text-align:center;padding:60px 0}
.contact p:not(.label){margin:15px 0 24px}
.footer{justify-content:center}
@media(max-width:1000px){.gallery{grid-auto-columns:43%}}
@media(max-width:650px){.wrap{width:calc(100% - 36px)}.header{gap:10px}.brand{font-size:1.75rem}.hero,.about{grid-template-columns:1fr}.hero{gap:28px}.hero-photo{width:min(76%,280px)}.hero-photo img{aspect-ratio:4/4.2}.hero h1{font-size:clamp(4rem,15vw,6rem)}.gallery{grid-auto-columns:78%;gap:12px}.arrows button{width:36px;height:36px}.about figure{width:min(76%,280px);order:2}.case h3{font-size:2rem}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


.hero {
  width: 100%;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(500px, 53vw, 720px);
  margin-top: 25px;
  padding: clamp(28px, 6vw, 82px);
  overflow: hidden;
  background: #302e2e;
  color: #fff5e9;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  z-index: -2;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 31%;
  border-radius: 0;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #222020f5 0%, #222020d9 28%, #22202064 60%, #22202015 100%);
}
.hero-photo figcaption { display: none; }
.hero .label, .hero em { color: #e8cfcb; }
.hero h1 { font-size: clamp(4.8rem, 8vw, 7.6rem); }
.hero .primary { background: #f1e2df; color: var(--ink); }
.hero .primary:hover { background: #e8cfcb; }
.hero .intro { max-width: 36ch; }

@media (max-width: 650px) {
  .hero {
    align-items: flex-end;
    min-height: 620px;
    margin-top: 14px;
    padding: 25px 22px;
  }
  .hero-photo img {
    object-position: left 16%;
    scale: 1.13;
    transform-origin: left 20%;
  }
  .hero::before {
    background: linear-gradient(0deg, #222020fa 0%, #222020e8 28%, #22202069 54%, transparent 76%);
  }
  .hero h1 { font-size: clamp(3.6rem, 13vw, 5.2rem); }
  .hero .intro { margin-block: 13px 18px; font-size: .92rem; }
}

@media (min-width: 651px) {
  .hero-photo {
    inset-inline-start: 32%;
    width: 68%;
  }
  .hero-photo img {
    object-position: center 23%;
    scale: 1.12;
    transform-origin: left 28%;
  }
  .hero-copy { max-width: 54%; }
  .hero::before {
    background: linear-gradient(90deg, #302e2e 0%, #302e2e 32%, #302e2eea 36%, #302e2e66 49%, transparent 64%);
  }
}

@media (prefers-reduced-motion: no-preference) {

  .case img {
    transition: transform 320ms ease;
  }
  .case a:focus-visible img {
    transform: scale(1.025);
  }
  .pill, .arrows button {
    transition: background-color 220ms ease, border-color 220ms ease;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case a:hover img {
    transform: scale(1.025);
  }
}

@keyframes enter-copy {
  from { opacity: .65; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero .hero-name { font-size: clamp(4rem, 7.6vw, 7rem); }
.name-word { display: inline-block; white-space: nowrap; }
.name-word:last-child { color: #e8cfcb; font-style: italic; }
.name-word > span { display: inline-block; }
@media (max-width: 650px) {
  .hero .hero-name { font-size: clamp(3.25rem, 11vw, 5rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: portrait-settle 1450ms cubic-bezier(.18,.72,.24,1) both; }
  .name-word > span { animation: name-reveal 530ms cubic-bezier(.18,.72,.24,1) both; animation-delay: calc(85ms + var(--letter) * 52ms); }
  .hero-copy > .label { animation: enter-copy 480ms ease both; }
  .hero-copy > .intro { animation: enter-copy 620ms 490ms both; }
  .hero-copy > .actions { animation: enter-copy 620ms 650ms both; }
}
@keyframes name-reveal {
  from { opacity: 0; transform: translateY(.26em); clip-path: inset(100% 0 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 -20% -20%); }
}
@keyframes portrait-settle {
  from { transform: scale(1.085); }
  to { transform: scale(1); }
}

.consult{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,8vw,100px);margin-block:0 clamp(55px,8vw,105px);padding-block:clamp(28px,5vw,65px);border-block:1px solid var(--line)}
.consult h2{font-size:clamp(3rem,5.5vw,5.2rem)}
.consult-intro>p:not(.label){max-width:44ch;margin:22px 0}
.consult-questions details{padding:16px 0;border-bottom:1px solid var(--line)}
.consult-questions summary{cursor:pointer;font-weight:700;padding-block:6px}
.consult-questions details p{margin:8px 0}
.case-dialog{position:fixed;width:min(92vw,730px);max-height:90dvh;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink)}
.case-dialog[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}
.case-dialog::backdrop{background:#252323d9}
.case-dialog img{height:min(64vh,580px);object-fit:contain;background:#353434}
.case-dialog-copy{align-self:center;padding:26px}
.case-dialog-copy p:not(.label){margin:12px 0}
.case-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:24px}
@media(max-width:650px){.consult,.case-dialog[open]{grid-template-columns:1fr}.case-dialog img{height:48dvh}.case-dialog-copy{padding:18px 22px}}
@media(prefers-reduced-motion:no-preference){.case-dialog[open]{animation:enter-copy 240ms ease both}}


.brand-mark{display:block;width:clamp(200px,26vw,300px);max-width:100%;padding-block:8px}
.brand-mark img{width:100%;height:auto;filter:brightness(0) saturate(100%) invert(16%)}
.case-upload img{object-fit:contain;background:#302d2d}

.header-mark{display:block;flex:none;width:clamp(34px,4.5vw,48px);margin-right:auto}
.header-mark img{display:block;width:100%;height:auto}
.signature{margin-bottom:clamp(38px,6vw,80px);background:radial-gradient(ellipse at center,#45454a,#303033 80%)}
.signature-panel{display:grid;place-items:center;min-height:clamp(230px,34vw,370px);padding:clamp(22px,4vw,52px)}
.signature-logo{display:grid;width:min(100%,647px)}
.signature-logo img{grid-area:1 / 1;filter:drop-shadow(0 1px 2px #18181b99)}
.signature-symbol{clip-path:inset(0 0 38% 0)}
.signature-name{clip-path:inset(62% 0 10% 0)}
.signature-title{clip-path:inset(90% 0 0 0)}

@media (prefers-reduced-motion: no-preference) {
  .signature[data-reveal] .signature-track{padding-bottom:clamp(160px,34svh,300px)}
  .signature[data-reveal] .signature-panel{position:sticky;top:max(0px, calc((100svh - clamp(230px,34vw,370px)) / 2))}
  .signature[data-reveal] img{transition:opacity 820ms ease,transform 820ms ease}
  .signature[data-reveal="0"] img,
  .signature[data-reveal="1"] :is(.signature-name,.signature-title),
  .signature[data-reveal="2"] .signature-title{opacity:0;transform:translateY(12px)}
}


.gallery.is-looping{scroll-snap-type:none;scrollbar-width:none;cursor:grab}
.gallery.is-looping img{user-select:none}
.gallery.is-dragging,.gallery.is-dragging a{cursor:grabbing;user-select:none}
@media(prefers-reduced-motion:reduce){.gallery-playback{display:none}}

.whatsapp-icon{display:block;width:19px;height:19px;flex:none;fill:currentColor}

.signature-social{display:grid;justify-items:center;gap:4px;text-align:center;padding-block:clamp(22px,4vw,48px) 28px;color:var(--light)}
.instagram-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-size:1.05rem;font-weight:700}
.instagram-link:is(:hover,:focus-visible){color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.instagram-link svg{flex:none}
.signature-social p{max-width:35ch;font-size:.9rem}



.section-divider {
  margin-block: 22px 23px;
}

@media (max-width: 650px) {
  .section-divider {
    margin-block: 14px 15px;
  }
}

.arrow-icon {
  vertical-align: -.15em;
}

.signature-social .instagram-link{color:inherit}
.signature-social .instagram-link:is(:hover,:focus-visible){color:#ebd0cd}

@media (min-width: 651px) {
  .signature-social {
    gap: 8px;
  }

  .signature-social .instagram-link {
    gap: 10px;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  }

  .signature-social .instagram-link > svg {
    width: 26px;
    height: 26px;
  }

  .signature-social p {
    max-width: 48ch;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  }
}

.signature-faces {
  width: min(88%, 440px);
  margin: 0 auto;
  opacity: .78;
}

.signature-logo .signature-symbol {
  filter: brightness(0) saturate(100%) invert(76%) sepia(8%) saturate(400%) hue-rotate(327deg) brightness(92%) contrast(88%);
}

@media (prefers-reduced-motion: no-preference) {
  .signature[data-reveal] .signature-faces {
    position: relative;
    top: calc(clamp(160px, 34svh, 300px) * -.5);
  }
}

.signature-faces {
  display: grid;
}

.signature-faces img {
  grid-area: 1 / 1;
}

.signature-woman {
  clip-path: inset(0 50% 0 0);
}

.signature-man {
  clip-path: inset(0 0 0 50%);
}

@media (prefers-reduced-motion: no-preference) {
  .signature[data-faces="0"] .signature-faces img,
  .signature[data-faces="1"] .signature-man {
    opacity: 0;
    transform: translateY(12px);
  }

  .signature[data-faces="2"] .signature-man {
    transition-delay: 160ms;
  }
}