@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  --paper: #fff9f8;
  --ink: #29161a;
  --muted: #6d5159;
  --line: #e5cdd1;
  --red: #65313e;
  --yellow: #f9d5d7;
  --blush: #f9d5d7;
  --burgundy: #65313e;
  --aubergine: #361d23;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
}

body { background: var(--paper); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.draft-note { background: #f1dfe0; color: var(--burgundy); }
.header { border-color: var(--line); }
.wordmark { font-size: 23px; letter-spacing: -.065em; }
.wordmark em { color: var(--burgundy); font-size: 21px; font-style: normal; margin-left: 4px; }
.nav-contact { border-color: var(--burgundy); color: var(--burgundy); }
.nav-contact:hover { background: var(--blush); text-decoration: none; }
.header nav { gap: clamp(13px, 2.1vw, 34px); }
.lang-switch { display: inline-flex; align-items: center; gap: 5px; padding: 7px 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.lang-switch span:first-child { font-size: 19px; line-height: 1; }
.lang-switch:hover { color: var(--burgundy); }
.dot { background: var(--blush); }

.hero {
  width: 100%; max-width: none; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 0; min-height: 760px; padding: 0 0 0 max(56px, calc((100vw - 1328px) / 2));
  background: var(--burgundy); color: #fff6f6;
}
.hero-copy { padding: 90px clamp(28px, 4vw, 80px) 95px 0; align-self: center; }
.hero .eyebrow { color: #f5dfe2; margin-bottom: 30px; }
.hero h1 {
  font-family: var(--serif); font-size: clamp(76px, 6.8vw, 112px);
  line-height: .87; letter-spacing: -.065em; font-weight: 400;
  margin: 0 0 34px;
}
.hero h1 i { color: var(--blush); font-weight: 400; }
.vocation-mark { position: relative; display: inline-block; white-space: nowrap; }
.vocation-mark::after {
  content: ''; position: absolute; inset: -.06em -.08em -.04em -.10em;
  border: 1px solid #f9d5d7b8; border-radius: 50%;
  transform: rotate(-6deg); pointer-events: none;
}
.hero .intro { color: #f2dfe1; max-width: 475px; font-size: 19px; line-height: 1.5; margin-bottom: 34px; }
.hero .intro p { margin: 0 0 1em; }
.hero .intro p:last-child { margin-bottom: 0; }
.hero .button.dark { background: var(--blush); color: var(--aubergine); }
.hero .text-link { color: #fff6f6; }
.hero-art {
  min-height: 760px; max-width: none; width: 100%; margin: 0;
  background: radial-gradient(ellipse at 54% 55%, #824d60 0%, #6c3949 32%, var(--burgundy) 69%); color: #fff6f6;
  display: block; padding: 0; position: relative; overflow: hidden;
}
.portrait-stage {
  position: absolute; inset: 0; margin: 0; overflow: hidden;
  background: radial-gradient(ellipse 48% 38% at 55% 48%, #f9d5d726 0%, transparent 100%);
}
.portrait-stage::after {
  content: ''; position: absolute; z-index: 2; inset: auto 0 0; height: 27%;
  background: linear-gradient(to bottom, transparent, #65313ebb 71%, var(--burgundy));
  pointer-events: none;
}
.hero-portrait {
  position: absolute; z-index: 1; width: min(145%, 760px); height: auto;
  max-width: none; left: 50%; bottom: -2%; transform: translateX(-50%);
  filter: drop-shadow(0 14px 34px #29161a55);
}
.portrait-orbit {
  position: absolute; z-index: 0; display: block; border: 1px solid #f9d5d76b;
  border-radius: 50%; pointer-events: none;
}
.portrait-orbit-one {
  width: 84%; aspect-ratio: 1; top: 13%; left: 13%; transform: rotate(-22deg) scaleX(.77);
}
.portrait-orbit-two {
  width: 64%; aspect-ratio: 1; bottom: 0; left: -20%; transform: rotate(22deg) scaleX(.7); opacity: .55;
}
.portrait-stage figcaption {
  position: absolute; z-index: 3; left: auto; right: 7%; bottom: 5%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  max-width: 70%; text-align: right; line-height: 1.45;
  color: #fff8f8; font-size: 9px; font-weight: 600; letter-spacing: .18em;
  text-shadow: 0 1px 8px #361d23;
}
.portrait-stage figcaption span:last-child { font-weight: 400; letter-spacing: .13em; }

.scroll-invitation {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; min-height: 86px; padding: 15px max(56px, calc((100vw - 1328px) / 2));
  background: var(--blush); color: var(--aubergine); border-bottom: 1px solid #dcaeb8;
}
.scroll-invitation:hover { text-decoration: none; background: #f5cbd0; }
.scroll-chapter { font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.scroll-message { font-family: var(--serif); font-size: 31px; font-style: italic; line-height: 1; letter-spacing: -.04em; }
.scroll-arrow {
  justify-self: end; width: 46px; height: 46px; border: 1px solid currentColor;
  border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 300;
  transition: transform .2s ease;
}
.scroll-invitation:hover .scroll-arrow { transform: translateY(4px); }

.category-ribbon {
  background: var(--aubergine); color: #fff6f6;
  border-color: var(--aubergine); min-height: 96px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px; padding: 18px max(28px, calc((100vw - 1330px) / 2));
  letter-spacing: .08em; position: relative; isolation: isolate;
}
.category-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; min-width: 0; min-height: 62px;
  border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: inherit; padding: 5px 2px; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; cursor: pointer;
}
.category-item:hover, .category-item[aria-expanded="true"] { border-color: #f9d5d766; background: #ffffff0d; }
.category-item:focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; }
.category-item svg { width: 27px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.category-item[aria-label="Vida com as samoiedas"] svg { width: 36px; }
.category-item > span:not(.category-tooltip) { line-height: 1.35; }
.category-tooltip {
  position: absolute; z-index: 5; left: 50%; top: calc(100% - 4px);
  transform: translate(-50%, -5px); width: min(330px, calc(100vw - 32px));
  padding: 16px 20px; border: 1px solid #d9adb5; border-radius: 3px;
  background: var(--blush); color: var(--aubergine);
  box-shadow: 0 12px 26px #29161a30; font-size: 12px; font-weight: 400;
  line-height: 1.5; letter-spacing: 0; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.category-item[aria-expanded="true"] .category-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .category-item:hover .category-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}
.section { padding-top: 105px; padding-bottom: 105px; }
.eyebrow { color: var(--burgundy); }
h2 {
  font-family: var(--serif); font-size: clamp(48px, 4.1vw, 67px);
  line-height: .98; letter-spacing: -.045em; font-weight: 500;
}
h2 i { color: var(--burgundy); font-weight: 400; }
.section-description { max-width: 345px; font-size: 14px; line-height: 1.7; }
.section-heading { align-items: end; }
.filter { border-color: var(--line); }
.filter { display: inline-flex; align-items: center; gap: 6px; }
.filter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.filter[data-filter="casa"] svg { width: 22px; height: 22px; }
.filter.active { background: var(--burgundy); border-color: var(--burgundy); color: #fff6f6; }
.filter:hover:not(.active) { background: #f7e5e8; }
.concept-poster { border-radius: 2px; }
.concept-poster::before {
  content: ''; position: absolute; width: 80%; aspect-ratio: 1; top: 16%; left: 38%;
  border: 1px solid currentColor; opacity: .18; border-radius: 50%;
  transform: rotate(-27deg) scaleX(.75);
}
.concept-poster::after {
  content: ''; position: absolute; inset: 13px; border: 1px solid currentColor;
  opacity: .28; pointer-events: none;
}
.poster-art {
  position: absolute; z-index: 0; right: -8%; top: 25%; width: 56%; aspect-ratio: 1;
  display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%;
  background: #fff9f81b; transform: rotate(12deg); opacity: .78;
  transition: transform .35s ease;
}
.poster-art svg { display: block; width: 65%; height: 65%; }
.concept-card:hover .poster-art { transform: rotate(2deg) scale(1.04); }
.concept-card:hover .concept-poster { box-shadow: 0 16px 35px #361d231f; }
.concept-poster { transition: box-shadow .25s ease; }
.poster-header, .poster-bottom, .poster-copy { position: relative; z-index: 1; }
.poster-1 { background: #f4dfe1; color: #65313e; }
.poster-2 { background: #65313e; color: #fff0f1; }
.poster-3 { background: #e9c4c8; color: #542d34; }
.poster-4 { background: #361d23; color: #f9d5d7; }
.poster-5 { background: #d6abb2; color: #361d23; }
.poster-6 { background: #f9d5d7; color: #65313e; }
.poster-7 { background: #542d34; color: #fff0f1; }
.poster-8 { background: #43242c; color: #f9d5d7; }
.poster-9 { background: #713c4b; color: #fff2f3; }
.poster-number { font-family: var(--serif); font-weight: 400; }
.poster-copy { font-size: clamp(37px, 3vw, 50px); line-height: .98; letter-spacing: -.055em; }
.poster-header, .poster-bottom { font-weight: 600; }
.concept-card h3 { font-size: 15px; }
.portfolio-note strong { color: var(--ink); }

.perspective { background: var(--blush); border-color: #d9adb5; }
.about-grid h2 { font-size: clamp(52px, 4.6vw, 75px); line-height: 1; }
.about-copy .lead { font-size: 20px; color: var(--aubergine); }
.about-copy p { color: #584147; }
.about-facts span { border-color: #c4959f; }
.signature { font-size: 32px; color: var(--burgundy); }
.about-grid > div:first-child { position: relative; min-height: 300px; }
.experience-seal {
  position: absolute; right: 8%; bottom: 0; width: 130px; height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--burgundy); border-radius: 50%; color: var(--burgundy);
  background: #fff9f866; transform: rotate(-10deg); text-align: center;
}
.experience-seal::after { content: ''; position: absolute; inset: 6px; border: 1px solid #b37e8a; border-radius: 50%; }
.experience-seal > span { font-size: 8px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; }
.experience-seal strong { font-family: var(--serif); font-size: 56px; font-weight: 500; letter-spacing: -.08em; line-height: .93; }
.experience-seal strong span { font-size: .5em; vertical-align: top; letter-spacing: 0; }
.offer-grid h3 { font-size: 33px; }
.scope-note { border-color: var(--line); }
.method-grid h2 { font-size: clamp(52px, 4.6vw, 75px); }
.method-grid li > span { color: var(--burgundy); }

.contact { background: var(--aubergine); color: #fff6f6; }
.contact .eyebrow, .contact h2 i { color: var(--blush); }
.contact-grid > div > p:not(.eyebrow) { color: #e9cfd3; }
.contact-handle, form > p { color: #e3c2c7; }
.contact-email { display: block; width: fit-content; margin-top: 17px; color: #fff6f6; font-size: 17px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.contact-social { display: block; width: fit-content; margin-top: 15px; color: #e3c2c7; font-size: 12px; line-height: 1.6; }
.contact-social span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.button.cream { background: var(--blush); color: var(--aubergine); }
form { border-color: #9e7580; }
input, select, textarea { background: #542d34; border-color: #986976; color: #fff6f6; }
input::placeholder, textarea::placeholder { color: #eccfd3; }
footer { color: var(--burgundy); }
dialog { background: var(--paper); }
.dialog-hook { background: #f9e7e8; }
.dialog-label { color: var(--burgundy); }

/* Portfolio editorial flow */
.work { padding-top: 100px; }
.featured-grid, .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.featured-grid .concept-poster { aspect-ratio: 9 / 10.5; }
.more-grid { margin-top: 42px; }
.more-concepts {
  display: flex; align-items: center; justify-content: space-between; gap: 55px;
  margin-top: 38px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--burgundy);
  background: transparent; color: var(--burgundy); font-size: 13px; font-weight: 600;
}
.more-concepts:hover { color: var(--aubergine); }
.scroll-hint { display: none; }
.universe { position: relative; z-index: 2; background: var(--burgundy); color: #fff6f6; }
.universe-heading { padding-top: 90px; padding-bottom: 55px; }
.universe-heading .eyebrow { color: var(--blush); }
.universe-heading h2 { font-size: clamp(54px, 5vw, 82px); margin-bottom: 22px; }
.universe-heading h2 i { color: var(--blush); }
.universe-heading > p:last-child { font-size: 14px; line-height: 1.7; color: #f2dfe1; margin: 0; }
.category-ribbon { border: 0; }
.about-copy h3 { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; color: var(--burgundy); margin: 30px 0 17px; }
.about-copy .lead { max-width: 550px; }
.difference { background: #fff9f8; border-bottom: 1px solid var(--line); }
.difference-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(45px, 7vw, 125px); }
.difference-heading h2 { font-size: clamp(56px, 5vw, 79px); line-height: .97; }
.difference-copy { padding-top: 42px; max-width: 570px; }
.difference-copy p { color: #584147; font-size: 15px; line-height: 1.7; margin-bottom: 17px; }
.difference-copy .difference-question { font-family: var(--serif); font-style: italic; color: var(--burgundy); font-size: clamp(33px, 3.4vw, 53px); line-height: 1; letter-spacing: -.04em; margin-top: 27px; }
.difference-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 65px; }
.difference-reasons { counter-reset: reasons; }
.difference-reasons > div { border-top: 1px solid #cdaab1; padding-top: 25px; }
.difference-reasons > div::before {
  counter-increment: reasons; content: counter(reasons, decimal-leading-zero);
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 23px;
  border: 1px solid #bf929b; border-radius: 48% 52% 50% 50%;
  background: var(--blush); color: var(--burgundy); font-family: var(--serif);
  font-size: 22px; transform: rotate(-9deg);
}
.difference-reasons h3 { font-family: var(--serif); font-size: clamp(27px, 2.35vw, 36px); line-height: 1.05; color: var(--burgundy); font-weight: 500; letter-spacing: -.03em; margin-bottom: 15px; }
.difference-reasons p { color: #584147; font-size: 13px; line-height: 1.7; max-width: 340px; }
.method-grid ol { grid-template-columns: 1fr; gap: 0; }
.method-grid li { border-top: 1px solid var(--line); padding: 17px 0; }
.method-grid li:last-child { border-bottom: 1px solid var(--line); }
.method-grid h2 { font-size: clamp(42px, 3.9vw, 66px); }
.offer-grid article {
  border: 1px solid var(--line); padding: 25px 22px 28px;
  background: linear-gradient(145deg, #fff9f8 62%, #fae9eb);
  transition: transform .2s ease, border-color .2s ease;
}
.offer-grid article:hover { transform: translateY(-4px); border-color: #cdaab1; }
.offer-number { display: inline-grid; place-items: center; width: 33px; height: 33px; border: 1px solid #cdaab1; border-radius: 50%; color: var(--burgundy); }
.contact-card {
  min-height: 320px; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid #9e7580; padding: clamp(28px, 4vw, 55px); max-width: 470px;
  background: radial-gradient(circle at 85% 18%, #65313e55, transparent 55%);
}
.contact-card h3 { font-family: var(--serif); font-size: clamp(35px, 3.1vw, 49px); line-height: 1; font-weight: 400; letter-spacing: -.035em; margin-bottom: 24px; }
.contact-card p { font-size: 13px; line-height: 1.75; color: #e9cfd3; max-width: 360px; margin: 0; }
footer { align-items: center; }
.footer-phrase { font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.1; letter-spacing: -.03em; color: var(--burgundy); }

@media (max-width: 1100px) {
  .hero { min-height: 680px; padding-left: 35px; }
  .hero h1 { font-size: clamp(72px, 7.2vw, 88px); }
  .hero-art { min-height: 680px; }
  .poster-copy { font-size: 40px; }
}

@media (max-width: 780px) {
  .scroll-invitation { padding-inline: 30px; min-height: 73px; }
  .scroll-message { font-size: 27px; }
  .hero { display: block; min-height: 0; padding: 0; }
  .hero-copy { padding: 72px 30px 65px; max-width: 650px; }
  .hero h1 { font-size: clamp(64px, 11vw, 90px); }
  .hero-art { min-height: 470px; border: 0; }
  .hero-portrait { width: min(100%, 500px); bottom: -3%; }
  .portrait-stage figcaption { bottom: 6%; }
  .category-ribbon { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 14px 10px; font-size: 8px; }
  .category-item { min-height: 82px; gap: 6px; padding: 6px 2px; }
  .category-item:last-child { grid-column: auto; }
  .category-item svg { width: 25px; height: 36px; }
  .category-item[aria-label="Vida com as samoiedas"] svg { width: 36px; }
  .section { padding-top: 70px; padding-bottom: 70px; }
  h2 { font-size: clamp(45px, 7.2vw, 61px); }
  .poster-copy { font-size: clamp(37px, 5vw, 52px); }
  .about-grid h2, .method-grid h2 { font-size: clamp(50px, 8vw, 68px); }
  .about-grid > div:first-child { min-height: 220px; }
  .experience-seal { right: 3%; width: 104px; height: 104px; }
  .experience-seal strong { font-size: 46px; }
  .experience-seal > span { font-size: 6px; }
  .contact h2 { font-size: clamp(52px, 8vw, 70px); }
  .work { padding-top: 70px; }
  .featured-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 66vw); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding-bottom: 12px; }
  .featured-grid .concept-card { scroll-snap-align: start; }
  .scroll-hint { display: block; font-size: 10px; color: var(--muted); text-align: right; margin: 0 0 12px; }
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .universe-heading { padding-top: 65px; padding-bottom: 36px; }
  .universe-heading h2 { font-size: clamp(48px, 8vw, 68px); }
  .contact-card { max-width: none; min-height: 0; }
  .difference-grid { grid-template-columns: 1fr; gap: 20px; }
  .difference-copy { padding-top: 0; }
  .difference-reasons { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .difference-heading h2 { font-size: clamp(52px, 8vw, 70px); }
}

@media (max-width: 420px) {
  .header nav .nav-contact { display: none; }
  .lang-switch { gap: 3px; font-size: 10px; }
  .scroll-invitation { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 20px; min-height: 70px; }
  .scroll-chapter { font-size: 8px; }
  .scroll-message { font-size: 24px; }
  .scroll-arrow { width: 37px; height: 37px; font-size: 19px; }
  .hero-copy { padding: 58px 20px 55px; }
  .hero h1 { font-size: clamp(56px, 14vw, 67px); margin-bottom: 26px; }
  .hero .intro { font-size: 18px; line-height: 1.5; }
  .hero-art { min-height: 380px; }
  .portrait-stage figcaption { font-size: 7px; letter-spacing: .12em; }
  .section { padding-top: 62px; padding-bottom: 62px; }
  h2 { font-size: 45px; }
  .poster-copy { font-size: 34px; }
  .poster-art { width: 61%; right: -18%; }
  .about-grid h2 { font-size: 50px; }
  .about-grid > div:first-child { min-height: 200px; }
  .experience-seal { width: 86px; height: 86px; right: 0; }
  .experience-seal strong { font-size: 38px; }
  .experience-seal > span { font-size: 5px; }
  .method-grid h2 { font-size: 44px; }
  .contact h2 { font-size: 49px; }
  .category-ribbon { font-size: 7px; gap: 1px; padding-inline: 6px; }
  .category-item svg { width: 23px; height: 36px; }
  .category-item[aria-label="Vida com as samoiedas"] svg { width: 35px; }
  .featured-grid { grid-auto-columns: minmax(245px, 82vw); }
  .more-grid { grid-template-columns: 1fr; }
  .more-grid .concept-poster { aspect-ratio: 9 / 9; }
  .universe-heading h2 { font-size: 48px; }
  .difference-heading h2 { font-size: 49px; }
  .footer-phrase { font-size: 23px; }
}

/* All five category drawings share one canvas and visual weight. */
.category-item svg,
.category-item[aria-label="Vida com as samoiedas"] svg { width: 45px; height: 45px; }
@media (max-width: 780px) {
  .category-item svg,
  .category-item[aria-label="Vida com as samoiedas"] svg { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .category-item svg,
  .category-item[aria-label="Vida com as samoiedas"] svg { width: 32px; height: 32px; }
}