:root {
  --ink: #152235;
  --navy: #102036;
  --paper: #f5f4f0;
  --white: #fff;
  --mist: #e4e9ed;
  --line: #ccd0cf;
  --muted: #4c5966;
  --gold: #9d7e43;
  --font: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--font); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; }
figure { margin: 0; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 40; padding: 10px 16px; background: var(--ink); color: white; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

.site-header {
  height: 84px;
  padding: 0 clamp(24px, 5vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.wordmark { display: flex; align-items: center; height: 100%; }
.wordmark img { display: block; width: 195px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(26px, 3vw, 50px); }
.site-nav a { font-size: 14px; font-weight: 600; }
.site-nav a:hover, .mobile-nav a:hover { color: var(--gold); }
.menu-toggle { display: none; border: 0; padding: 12px; background: none; cursor: pointer; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 6px 0; background: var(--ink); }
.mobile-nav[hidden] { display: none; }
.mobile-nav { position: absolute; top: 72px; left: 0; right: 0; z-index: 20; display: grid; padding: 20px 28px 26px; background: white; box-shadow: 0 15px 28px #1020361a; }
.mobile-nav a { padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 600; }

.eyebrow, .section-label {
  margin: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.hero {
  height: calc(100dvh - 84px);
  min-height: calc(100dvh - 84px);
  display: flex;
  flex-direction: column;
  background: #f1f1ee;
}
.hero-content {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(310px, .82fr);
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 86px) clamp(32px, 6vw, 112px); }
.hero-copy > .eyebrow { margin-bottom: clamp(38px, 7vh, 88px); }
.hero-copy > .eyebrow span { display: block; margin-top: 3px; color: var(--muted); font-weight: 600; }
.hero h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(53px, 5.2vw, 91px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.065em;
}
.hero h1 em { color: #956e2d; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; letter-spacing: -.055em; }
.hero-lead { max-width: 590px; margin: clamp(28px, 4vh, 46px) 0 0; color: #405061; font-size: clamp(16px, 1.18vw, 18px); line-height: 1.65; }
.hero-links { display: flex; flex-wrap: wrap; gap: 32px; margin-top: clamp(28px, 4vh, 50px); }
.text-link {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 800;
  transition: color .2s ease;
}
.text-link:hover { color: var(--gold); }
.hero-portrait { position: relative; min-height: 0; overflow: hidden; background: #302d2a; }
.hero-portrait > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portrait-label { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(27px, 3vw, 50px); background: linear-gradient(transparent, #0f1721af); color: white; font-size: 12px; font-weight: 700; }
.hero-bottom { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 15px clamp(32px, 6vw, 112px); border-top: 1px solid #c9cbca; color: #56606a; font-size: 12px; font-weight: 600; }

.section-wrap { padding: clamp(68px, 7vw, 110px) clamp(28px, 5vw, 88px); }
.work { background: var(--navy); color: white; }
.work-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr); gap: clamp(50px, 8vw, 130px); align-items: end; margin-bottom: 42px; }
.work-intro .eyebrow { color: #cbb582; margin-bottom: 22px; }
h2 { margin: 0; font-size: clamp(42px, 4.8vw, 76px); font-weight: 600; line-height: 1.08; letter-spacing: -.065em; }
.work-intro h2 { max-width: 970px; }
.work-intro h2 span { color: #cbb582; }
.work-intro > p { max-width: 500px; margin: 0 0 6px; color: #d7dfe5; font-size: 17px; line-height: 1.65; }
.work-main-image { height: clamp(360px, 48vw, 700px); overflow: hidden; display: grid; place-items: start center; padding: clamp(22px, 3vw, 52px) clamp(22px, 5vw, 80px) 0; background: #dfe5e8; }
.work-main-image img { display: block; width: min(1220px, 100%); height: auto; box-shadow: 0 20px 46px #10203631; }
.work-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 35px); }
.work-gallery { margin-top: 28px; }
.gallery-card { min-width: 0; }
.gallery-image { display: grid; place-items: center; overflow: hidden; aspect-ratio: 1.58; padding: clamp(15px, 2.3vw, 38px); background: #e6ebee; }
.gallery-image img { display: block; width: 100%; height: 100%; object-fit: contain; box-shadow: 0 13px 34px #15223524; }
.gallery-card figcaption { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 20px; border-top: 1px solid #738091; margin-top: 17px; padding-top: 16px; }
.gallery-card strong { font-size: 18px; font-weight: 700; }
.gallery-card figcaption span { color: #cbd4dc; font-size: 14px; }
.work-link { margin-top: 45px; color: white; }

.projects { background: var(--paper); }
.projects-intro { display: grid; grid-template-columns: minmax(150px, .25fr) minmax(0, 1fr) minmax(240px, .4fr); gap: clamp(25px, 3.5vw, 60px); align-items: end; margin-bottom: 43px; }
.projects-intro .section-label { align-self: start; margin-top: 10px; }
.projects-intro h2 { font-size: clamp(40px, 4.2vw, 67px); }
.projects-intro h2 em { font-style: normal; font-weight: 400; }
.projects-intro > p:last-child { max-width: 370px; margin: 0 0 5px; color: var(--muted); font-size: 15px; }
.projects-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 24px; }
.project-card { min-width: 0; display: flex; flex-direction: column; background: white; }
.project-visual { position: relative; display: block; overflow: hidden; background: #dce2e8; }
.project-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-visual:hover img { transform: scale(1.025); }
.project-card--tattoo .project-visual, .project-card--marauto .project-visual { height: clamp(330px, 37vw, 610px); }
.project-card--tattoo .project-visual { background: #252126; padding: clamp(20px, 2.8vw, 48px); }
.project-card--tattoo .project-visual img { object-fit: contain; object-position: center top; }
.project-card--marauto .project-visual { background: #16202b; }
.project-card--marauto .project-visual > img:first-child { object-position: 49% center; filter: brightness(.75); }
.project-card--marauto .project-visual .marauto-logo { position: absolute; top: clamp(25px, 3vw, 45px); left: clamp(25px, 3vw, 45px); width: clamp(155px, 18vw, 250px); height: auto; object-fit: contain; filter: drop-shadow(0 3px 12px #0006); }
.project-caption { display: flex; flex: 1; justify-content: space-between; gap: 22px; padding: clamp(24px, 2.7vw, 39px); }
.project-type { margin: 0 0 11px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.project-caption h3 { margin: 0 0 12px; font-size: clamp(27px, 2.7vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -.055em; }
.project-caption p:last-child { max-width: 555px; margin: 0; color: var(--muted); font-size: 14px; }
.project-arrow { align-self: end; flex: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.project-arrow:hover { color: var(--gold); border-color: var(--gold); }
.project-card--shop { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(300px, .56fr) minmax(0, 1fr); background: #e2e9ee; }
.project-card--shop .project-caption { flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 60px); }
.project-card--shop .project-visual { height: clamp(330px, 33vw, 470px); padding: clamp(20px, 2.5vw, 40px) 0 0 clamp(20px, 2.5vw, 40px); }
.project-card--shop .project-visual img { object-fit: contain; object-position: top left; }

.services { background: white; }
.section-heading { display: grid; grid-template-columns: minmax(170px, .3fr) minmax(0, 1fr); gap: clamp(35px, 6vw, 100px); align-items: start; margin-bottom: 48px; }
.section-heading .section-label { margin-top: 11px; }
.section-heading h2 { max-width: 930px; }
.section-heading h2 em, .about h2 em, .contact h2 em { font-style: normal; font-weight: 400; }
.service-list { border-top: 1px solid var(--ink); }
.service-list article { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 5vw; padding: 30px 0; border-bottom: 1px solid var(--line); }
.service-list h3 { margin: 0; font-size: clamp(25px, 2.5vw, 39px); font-weight: 600; letter-spacing: -.05em; line-height: 1.16; }
.service-list p { max-width: 700px; margin: 0; color: var(--muted); }

.about { background: #e8e9e7; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .75fr); gap: clamp(45px, 8vw, 130px); align-items: end; max-width: 1600px; margin: auto; }
.about-copy .section-label { margin-bottom: 25px; }
.about-body { border-top: 1px solid #b3babb; padding-top: 29px; }
.about-body p { max-width: 630px; margin: 0 0 19px; color: var(--muted); font-size: 17px; }
.about-body span { display: block; margin-top: 42px; font-family: Georgia, 'Times New Roman', serif; font-size: 27px; font-style: italic; }

.contact { background: #e6e9e8; border-top: 1px solid var(--line); padding-bottom: 24px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .68fr); align-items: center; gap: clamp(50px, 7vw, 130px); max-width: 1500px; margin: auto; }
.contact .section-label { margin-bottom: 29px; }
.contact h2 { max-width: 800px; }
.contact h2 em { color: #946d37; }
.contact-copy > p:not(.section-label) { max-width: 540px; margin: 34px 0 0; color: var(--muted); font-size: 18px; }
.contact .contact-email { display: inline-block; margin-top: 46px; border-bottom: 2px solid var(--ink); padding-bottom: 5px; font-size: clamp(29px, 3.6vw, 58px); font-weight: 600; line-height: 1.15; letter-spacing: -.06em; }
.contact .contact-email:hover { color: var(--gold); }
.contact-copy .contact-note { max-width: 480px; margin-top: 22px !important; font-size: 13px !important; }
.contact-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid #bdc4c4; padding-top: 20px; color: var(--muted); font-size: 13px; }
.phone-stage { display: flex; flex-direction: column; align-items: center; }
.phone { width: min(100%, 348px); aspect-ratio: 71.5 / 149.6; border: 8px solid #15171a; border-radius: 58px; padding: 3px; background: #17191b; box-shadow: 0 39px 80px #18232f38, inset 0 0 0 1px #687079; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 47px; background: #f6f7fb; color: #182334; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.phone-wallpaper { position: absolute; inset: 0; background: radial-gradient(ellipse at 72% 37%, #a6abbc 0, transparent 40%), radial-gradient(ellipse at 13% 11%, #31445d 0, transparent 47%), linear-gradient(140deg, #1b293c, #6b7180 53%, #c4bbb3); }
.phone-status { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 24px 0; color: white; font-size: 14px; font-weight: 700; line-height: 18px; }
.phone-island { position: absolute; top: 10px; left: 50%; width: 91px; height: 29px; transform: translateX(-50%); border-radius: 24px; background: #060809; box-shadow: 0 1px 2px #fff3; }
.phone-status-right { display: flex; align-items: center; gap: 6px; height: 18px; }
.signal { display: flex; align-items: end; gap: 2px; height: 13px; }
.signal i { width: 3px; background: white; border-radius: 1px; transition: opacity .35s ease; }
.signal i:nth-child(1) { height: 4px; }.signal i:nth-child(2) { height: 7px; }.signal i:nth-child(3) { height: 10px; }.signal i:nth-child(4) { height: 13px; }
.signal[data-bars="3"] i:nth-child(4), .signal[data-bars="2"] i:nth-child(n+3) { opacity: .28; }
.network-type { font-size: 10px; line-height: 1; }
.battery { position: relative; width: 20px; height: 10px; border: 1.6px solid white; border-radius: 3px; }
.battery::before { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 4px; border-radius: 1px; background: white; }
.battery::after { content: ''; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: white; }
.phone-view { position: absolute; inset: 0; }
.phone-view[hidden] { display: none; }
.phone-home { display: flex; flex-direction: column; justify-content: space-between; padding: 73px 22px 31px; color: white; }
.phone-date { margin: 0 0 95px; font-size: 15px; font-weight: 600; text-transform: capitalize; }
.phone-home-title { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.08; letter-spacing: -.05em; }
.phone-home-subtitle { max-width: 220px; margin: 11px 0 0; color: #f2f3f7; font-size: 13px; }
.phone-app-grid { display: flex; gap: 24px; margin-top: 37px; }
.phone-app, .phone-dock button, .phone-dock a { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; padding: 0; background: none; color: white; font-size: 11px; font-weight: 600; cursor: pointer; }
.phone-app { max-width: 95px; text-align: center; }
.app-icon { width: 57px; height: 57px; display: grid; place-items: center; border-radius: 14px; box-shadow: 0 6px 18px #0003, inset 0 1px 1px #fff7; font-size: 31px; font-weight: 500; line-height: 1; }
.app-icon--message { background: linear-gradient(145deg, #54e07b, #19af43); }
.bubble-mark { position: relative; width: 32px; height: 25px; border-radius: 50%; background: white; }
.bubble-mark::after { content: ''; position: absolute; bottom: -3px; left: 4px; width: 9px; height: 9px; transform: rotate(40deg); background: white; }
.app-icon--whatsapp { background: linear-gradient(145deg, #57db7e, #0aa34d); font-weight: 800; font-size: 25px; }
.app-icon--mail { background: linear-gradient(145deg, #60b9fa, #1e75dc); font-size: 32px; }
.phone-dock { display: flex; justify-content: space-around; align-items: center; margin-top: auto; padding: 14px 10px; border: 1px solid #fff4; border-radius: 26px; background: #ffffff30; backdrop-filter: blur(18px); }
.phone-dock .app-icon { width: 52px; height: 52px; }
.phone-dock a, .phone-dock button { font-size: 10px; }
.home-indicator { position: absolute; z-index: 5; bottom: 10px; left: 50%; width: 111px; height: 4px; transform: translateX(-50%); border-radius: 5px; background: #172131; }
.phone-home ~ .home-indicator { background: white; }
.phone-message, .phone-whatsapp { padding-top: 54px; background: #f5f6fa; }
.phone-app-top { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #dce0e6; background: #f7f8fbc9; font-size: 13px; font-weight: 700; }
.phone-back { border: 0; padding: 0; background: transparent; color: #2f73c8; font-size: 26px; line-height: 1; cursor: pointer; }
.phone-back span { position: relative; top: -3px; font-size: 14px; font-weight: 500; }
.phone-app-body { height: calc(100% - 105px); overflow-y: auto; padding: 25px 23px 30px; }
.phone-app-body h3 { margin: 0 0 7px; font-size: 26px; line-height: 1.12; letter-spacing: -.045em; }
.phone-app-body > p { margin: 0 0 20px; color: #5a6878; font-size: 13px; line-height: 1.45; }
.phone-app-body form { display: grid; gap: 12px; }
.phone-app-body label { display: grid; gap: 5px; color: #405064; font-size: 12px; font-weight: 700; }
.phone-app-body input, .phone-app-body textarea { width: 100%; border: 1px solid #d7dce4; border-radius: 11px; padding: 10px 11px; outline: none; background: white; color: #172235; font-family: inherit; font-size: 14px; line-height: 1.3; resize: vertical; }
.phone-app-body input:focus, .phone-app-body textarea:focus { border-color: #2f73c8; box-shadow: 0 0 0 2px #2f73c824; }
.phone-send { display: block; width: 100%; margin-top: 9px; border: 0; border-radius: 12px; padding: 12px 16px; background: #276ec4; color: white; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; }
.phone-send:hover { background: #1858a8; }
.form-notice { min-height: 15px; margin: 0; color: #4b5e72; font-size: 11px; }
.whatsapp-badge { width: 73px; height: 73px; display: grid; place-items: center; margin: 15px 0 26px; border-radius: 19px; background: #26c560; color: white; font-size: 35px; font-weight: 800; }
.phone-screen.is-app .phone-status { color: #1d2735; }
.phone-screen.is-app .signal i, .phone-screen.is-app .battery::before, .phone-screen.is-app .battery::after { background: #1d2735; }
.phone-screen.is-app .battery { border-color: #1d2735; }
.phone-screen:not(.is-app) .home-indicator { background: white; }

@media (max-width: 1100px) {
  .hero-content { grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr); }
  .hero-copy { padding: 35px 40px; }
  .hero h1 { font-size: clamp(48px, 5.5vw, 68px); }
  .hero-copy > .eyebrow { margin-bottom: 32px; }
  .work-intro { grid-template-columns: 1fr .75fr; }
  .projects-intro { grid-template-columns: minmax(120px, .2fr) minmax(0, 1fr); }
  .projects-intro > p:last-child { grid-column: 2; }
  .project-caption { flex-direction: column; }
  .contact-layout { gap: 40px; }
}

@media (max-width: 760px) {
  .site-header { height: 72px; padding: 0 24px; }
  .wordmark img { width: 166px; }
  .site-nav { display: none; }
  .menu-toggle { display: block; }
  .hero { height: calc(100dvh - 72px); min-height: calc(100dvh - 72px); }
  .hero-content { grid-template-columns: 1fr; grid-template-rows: auto minmax(220px, 1fr); }
  .hero-copy { padding: 30px 28px 33px; }
  .hero-copy > .eyebrow { margin-bottom: 30px; }
  .hero h1 { max-width: 620px; font-size: clamp(43px, 8.2vw, 64px); line-height: 1.08; }
  .hero-lead { max-width: 600px; margin-top: 22px; font-size: 15px; line-height: 1.5; }
  .hero-links { gap: 23px; margin-top: 25px; }
  .hero-portrait { min-height: 210px; }
  .hero-portrait > img { object-position: center 8%; }
  .portrait-label { padding: 16px 28px; }
  .hero-bottom { min-height: 52px; padding: 12px 28px; }
  .hero-bottom span:last-child { display: none; }
  .section-wrap { padding: 60px 28px; }
  .work-intro { display: block; margin-bottom: 30px; }
  .work-intro h2 { font-size: clamp(40px, 8vw, 58px); }
  .work-intro > p { margin-top: 23px; font-size: 16px; }
  .work-main-image { height: clamp(250px, 65vw, 450px); padding: 20px 18px 0; }
  .work-gallery { grid-template-columns: 1fr; gap: 34px; }
  .gallery-card figcaption { grid-template-columns: 1fr; gap: 4px; }
  .projects-intro { display: block; }
  .projects-intro .section-label { margin: 0 0 18px; }
  .projects-intro > p:last-child { margin-top: 22px; }
  .projects-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-card--tattoo .project-visual, .project-card--marauto .project-visual { height: clamp(280px, 65vw, 490px); }
  .project-card--shop { grid-column: auto; grid-template-columns: 1fr; }
  .project-card--shop .project-caption { min-height: 230px; }
  .project-card--shop .project-visual { height: clamp(280px, 65vw, 420px); }
  .section-heading { display: block; margin-bottom: 30px; }
  .section-heading .section-label { margin: 0 0 19px; }
  .service-list article { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .about-layout { grid-template-columns: 1fr; gap: 34px; }
  .contact-layout { grid-template-columns: 1fr; gap: 54px; }
  .contact-copy > p:not(.section-label) { font-size: 16px; }
  .contact-foot { flex-direction: column; margin-top: 70px; }
}

@media (max-width: 450px) {
  .hero-copy { padding: 22px 27px 24px; }
  .hero-copy > .eyebrow { font-size: 11px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(39px, 10vw, 47px); }
  .hero-lead { margin-top: 18px; font-size: 14px; }
  .hero-links { margin-top: 18px; }
  .hero-links .text-link { font-size: 12px; }
  .hero-portrait { min-height: 190px; }
  .contact .contact-email { font-size: clamp(27px, 8vw, 36px); }
}

@media (max-width: 360px) and (max-height: 760px) {
  .hero-copy { padding: 15px 22px 13px; }
  .hero-copy > .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: 36px; line-height: 1.025; }
  .hero-lead { margin-top: 12px; font-size: 13px; line-height: 1.38; }
  .hero-links { gap: 14px; margin-top: 13px; }
  .hero-portrait { min-height: 135px; }
  .hero-bottom { min-height: 42px; padding: 7px 22px; font-size: 10px; }
}

@media (max-width: 360px) {
  .phone { border-width: 6px; border-radius: 45px; }
  .phone-screen { border-radius: 37px; }
  .phone-status { padding: 13px 16px 0; }
  .phone-home { padding: 62px 15px 24px; }
  .phone-date { margin-bottom: 40px; font-size: 12px; }
  .phone-home-title { font-size: 23px; }
  .phone-home-subtitle { font-size: 11px; }
  .phone-app-grid { gap: 16px; margin-top: 20px; }
  .app-icon { width: 46px; height: 46px; border-radius: 11px; font-size: 24px; }
  .bubble-mark { width: 27px; height: 21px; }
  .phone-app { font-size: 9px; }
  .phone-dock { padding: 8px; border-radius: 20px; }
  .phone-dock .app-icon { width: 42px; height: 42px; }
  .phone-app-body { padding: 20px 15px; }
  .phone-app-body h3 { font-size: 22px; }
}

@media (max-height: 730px) and (min-width: 761px) {
  .hero-copy { padding-top: 20px; padding-bottom: 20px; }
  .hero-copy > .eyebrow { margin-bottom: 15px; }
  .hero h1 { font-size: clamp(47px, 4.8vw, 72px); }
  .hero-lead { margin-top: 22px; }
  .hero-links { margin-top: 22px; }
}

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

/* Autorski układ strony. Sekcja kontaktu i jej telefon pozostają bez zmian. */
.hero-rebuilt { position: relative; height: calc(100dvh - 84px); min-height: 560px; display: flex; flex-direction: column; overflow: hidden; background: #f1efe9; }
.hero-kicker { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 clamp(28px, 5vw, 88px); border-bottom: 1px solid #bfc2c0; color: #273347; font-size: 13px; font-weight: 700; }
.hero-kicker span:last-child { color: #6d747a; font-weight: 500; }
.hero-core { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(275px, .6fr); align-items: center; padding: 10px clamp(28px, 5vw, 88px) 22px; }
.hero-message { position: relative; z-index: 1; max-width: 790px; }
.hero-rebuilt h1 { max-width: 790px; margin: 0; font-size: clamp(54px, 5.75vw, 91px); font-weight: 500; line-height: 1.035; letter-spacing: -.067em; }
.hero-rebuilt h1 em { display: inline; color: #9b7739; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -.065em; }
.hero-message p { max-width: 630px; margin: 25px 0 21px; color: #47535f; font-size: clamp(16px, 1.22vw, 18px); line-height: 1.58; }
.hero-message a { display: inline-block; border-bottom: 1px solid #172537; padding-bottom: 3px; font-size: 14px; font-weight: 800; }
.hero-message a:hover { color: #9b7739; border-color: #9b7739; }
.hero-monogram { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; color: #d4c7ad; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(180px, 24vw, 390px); line-height: .8; letter-spacing: -.15em; white-space: nowrap; transform: translateX(-4%); }
.hero-monogram::after { content: ''; position: absolute; top: 13%; bottom: 13%; left: 50%; width: 1px; background: #b59861; transform: rotate(22deg); }
.hero-monogram span { position: absolute; bottom: 7%; right: 4%; color: #5e6262; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-capabilities { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 72px; padding: 0 clamp(28px, 5vw, 88px); border-top: 1px solid #bfc2c0; background: #eae6dc; }
.hero-capabilities span { display: flex; align-items: center; padding: 15px 25px; border-left: 1px solid #bfc2c0; color: #273347; font-size: 14px; font-weight: 700; }
.hero-capabilities span:first-child { border-left: 0; padding-left: 0; }

.expertise { background: #172437; color: #f7f7f4; }
.expertise-intro { display: grid; grid-template-columns: minmax(125px, .2fr) minmax(0, 1.05fr) minmax(240px, .48fr); gap: clamp(24px, 4vw, 70px); align-items: end; padding-bottom: clamp(35px, 4vw, 60px); }
.expertise-intro .section-label { align-self: start; margin-top: 10px; color: #c4a06b; }
.expertise-intro h2 { font-size: clamp(42px, 4.6vw, 76px); }
.expertise-intro h2 em { color: #d5b88e; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.expertise-intro > p { max-width: 380px; margin: 0 0 5px; color: #c7d0d8; font-size: 16px; line-height: 1.65; }
.expertise-list { border-top: 1px solid #7a8490; }
.expertise-list article { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .8fr); align-items: center; gap: 50px; min-height: 112px; padding: 19px 0; border-bottom: 1px solid #586575; }
.expertise-list h3 { margin: 0; font-size: clamp(27px, 2.5vw, 39px); font-weight: 500; line-height: 1.15; letter-spacing: -.055em; }
.expertise-list p { max-width: 560px; margin: 0; color: #c7d0d8; font-size: 15px; line-height: 1.55; }

.portfolio { background: #fafaf8; }
.portfolio-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .45fr); gap: clamp(36px, 7vw, 110px); align-items: end; margin-bottom: 40px; }
.portfolio-heading .section-label { margin-bottom: 22px; }
.portfolio-heading h2 { font-size: clamp(48px, 5.5vw, 82px); }
.portfolio-heading h2 em { color: #9a773f; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.portfolio-heading > p { max-width: 350px; margin: 0 0 5px; color: #52606e; font-size: 16px; line-height: 1.65; }
.portfolio-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #aeb7bf; }
.portfolio-tab { min-width: 0; min-height: 84px; display: flex; flex-direction: column; justify-content: center; gap: 2px; position: relative; padding: 16px 18px; border: 0; border-right: 1px solid #d4d9dc; background: transparent; color: #65717d; text-align: left; cursor: pointer; }
.portfolio-tab:first-child { padding-left: 0; }
.portfolio-tab:last-child { border-right: 0; }
.portfolio-tab strong { color: inherit; font-size: clamp(15px, 1.35vw, 20px); font-weight: 700; letter-spacing: -.035em; }
.portfolio-tab span { font-size: 12px; }
.portfolio-tab[aria-selected="true"] { color: var(--ink); }
.portfolio-tab[aria-selected="true"]::after { content: ''; position: absolute; bottom: 0; left: 18px; right: 18px; height: 3px; background: #aa8444; }
.portfolio-tab:first-child[aria-selected="true"]::after { left: 0; }
.portfolio-tab:hover { color: var(--ink); }
.portfolio-panel { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); height: clamp(470px, 42vw, 615px); color: white; background: #223c62; }
.portfolio-panel[hidden] { display: none; }
.portfolio-visual { position: relative; min-width: 0; overflow: hidden; }
.portfolio-visual img { display: block; }
.portfolio-visual--ddcentrum { background: #dbe5ee; }
.portfolio-visual--ddcentrum .portfolio-primary { position: absolute; top: 9%; left: 5%; width: 86%; height: auto; box-shadow: 0 20px 50px #152b4d32; }
.portfolio-detail { position: absolute; right: 4%; bottom: 5%; width: 36%; height: auto; border: 8px solid white; box-shadow: 0 17px 35px #152b4d4d; }
.portfolio-visual--emmilkamm { display: grid; place-items: center; padding: clamp(30px, 4vw, 60px); background: #2e202c; }
.portfolio-visual--emmilkamm .portfolio-primary { width: 100%; height: 100%; object-fit: contain; }
.portfolio-visual--marauto { background: #201d21; }
.portfolio-visual--marauto .portfolio-primary { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.78); }
.portfolio-brand { position: absolute; top: 7%; right: 6%; width: min(32%, 270px); height: auto; filter: drop-shadow(0 5px 10px #0005); }
.portfolio-visual--akumulatory { display: flex; align-items: flex-start; padding: 8% 0 0 7%; background: #dae8f4; }
.portfolio-visual--akumulatory .portfolio-primary { width: 100%; height: auto; box-shadow: 0 20px 45px #1235663b; }
.portfolio-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px, 4.5vw, 70px); }
.portfolio-copy .portfolio-type { margin: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.portfolio-copy h3 { margin: auto 0 19px; font-size: clamp(43px, 4.7vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.07em; }
.portfolio-copy > p:not(.portfolio-type) { max-width: 430px; margin: 0; font-size: 16px; line-height: 1.62; }
.portfolio-copy a { margin-top: 34px; border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: 14px; font-weight: 800; }
.portfolio-copy a:hover { opacity: .75; }
.portfolio-panel--emmilkamm { background: #302132; }
.portfolio-panel--emmilkamm .portfolio-type { color: #ff99c4; }
.portfolio-panel--marauto { background: #a7242b; }
.portfolio-panel--akumulatory { background: #204781; }
.portfolio-panel--akumulatory .portfolio-type { color: #f2d069; }
.portfolio-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; border-bottom: 1px solid #bdc5c9; padding: 25px 0 0; }
.portfolio-footer p { margin: 0; color: #5c6975; font-size: 14px; }
.portfolio-footer a { border-bottom: 1px solid var(--ink); padding-bottom: 4px; font-size: 14px; font-weight: 800; white-space: nowrap; }

.archive-intro { padding-bottom: 70px; background: #f1efe9; }
.archive-intro h1 { max-width: 1180px; margin: 22px 0 26px; font-size: clamp(48px, 5.8vw, 88px); font-weight: 500; line-height: 1.07; letter-spacing: -.065em; }
.archive-intro h1 em, .archive-contact h2 em { color: #9a773f; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.archive-intro > p:last-child { max-width: 620px; margin: 0; color: #4b5967; font-size: 17px; line-height: 1.7; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; background: #fafaf8; }
.archive-card { min-width: 0; overflow: hidden; background: white; }
.archive-image { position: relative; height: clamp(280px, 33vw, 500px); overflow: hidden; background: #dbe5ee; }
.archive-image > img:first-child { display: block; width: 100%; height: 100%; object-fit: contain; }
.archive-card--ddcentrum .archive-image { padding: 8% 0 0 7%; }
.archive-card--ddcentrum .archive-image > img:first-child { height: auto; box-shadow: 0 20px 42px #1c355037; }
.archive-card--emmilkamm .archive-image { display: grid; place-items: center; padding: 7%; background: #2e202c; }
.archive-card--marauto .archive-image { background: #302528; }
.archive-card--marauto .archive-image > img:first-child { object-fit: cover; filter: saturate(.85) brightness(.8); }
.archive-image .archive-brand { position: absolute; top: 8%; right: 7%; width: min(37%, 240px); filter: drop-shadow(0 5px 10px #0005); }
.archive-card--akumulatory .archive-image { padding: 8% 0 0 7%; background: #dae8f4; }
.archive-card--akumulatory .archive-image > img:first-child { height: auto; box-shadow: 0 20px 42px #1c355037; }
.archive-copy { display: flex; flex-direction: column; align-items: flex-start; min-height: 295px; padding: clamp(27px, 3.5vw, 52px); }
.archive-copy > p { margin: 0 0 19px; color: #617181; font-size: 12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.archive-copy h2 { margin: 0 0 15px; font-size: clamp(33px, 3.4vw, 52px); }
.archive-copy > span { max-width: 500px; color: #485765; font-size: 15px; line-height: 1.6; }
.archive-copy a { margin-top: auto; border-bottom: 1px solid var(--ink); padding-top: 22px; padding-bottom: 4px; font-size: 14px; font-weight: 800; }
.archive-contact { background: #eae6dc; }
.archive-contact h2 { margin: 20px 0 27px; font-size: clamp(42px, 5vw, 75px); }
.archive-contact a { border-bottom: 1px solid var(--ink); padding-bottom: 4px; font-size: 14px; font-weight: 800; }

.about-rebuilt { display: grid; grid-template-columns: minmax(150px, .25fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); background: #f0eee8; }
.about-rebuilt .section-label { margin-top: 12px; }
.about-rebuilt h2 { max-width: 1050px; font-size: clamp(46px, 5.2vw, 82px); }
.about-rebuilt h2 em { color: #9a773f; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.about-rebuilt-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 55px; max-width: 1100px; margin-top: 44px; border-top: 1px solid #bac0be; padding-top: 26px; }
.about-rebuilt-copy p { max-width: 520px; margin: 0; color: #465361; font-size: 17px; line-height: 1.65; }
.about-rebuilt-copy strong { grid-column: 1 / -1; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; font-style: italic; font-weight: 400; }

@media (max-width: 1080px) {
  .hero-core { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); }
  .hero-rebuilt h1 { font-size: clamp(51px, 6vw, 70px); }
  .hero-monogram { font-size: 21vw; }
  .expertise-intro { grid-template-columns: minmax(120px, .2fr) minmax(0, 1fr); }
  .expertise-intro > p { grid-column: 2; }
  .portfolio-panel { grid-template-columns: minmax(0, 1.1fr) minmax(290px, .9fr); }
}

@media (max-width: 760px) {
  .hero-rebuilt { height: calc(100dvh - 72px); min-height: 0; }
  .hero-kicker { min-height: 55px; margin: 0 24px; font-size: 11px; }
  .hero-core { display: block; padding: 28px 26px 20px; }
  .hero-message { position: relative; z-index: 2; }
  .hero-rebuilt h1 { font-size: clamp(44px, 10vw, 67px); }
  .hero-message p { margin: 20px 0 17px; font-size: 15px; }
  .hero-monogram { position: absolute; right: -12px; bottom: -9px; height: 180px; color: #d5cab7; font-size: 160px; opacity: .62; transform: none; }
  .hero-monogram::after, .hero-monogram span { display: none; }
  .hero-capabilities { grid-template-columns: 1fr 1fr; min-height: 86px; padding: 0 24px; }
  .hero-capabilities span { min-height: 43px; border-left: 0; border-bottom: 1px solid #bfc2c0; padding: 9px 8px; font-size: 11px; }
  .hero-capabilities span:nth-child(even) { border-left: 1px solid #bfc2c0; padding-left: 15px; }
  .hero-capabilities span:nth-last-child(-n+2) { border-bottom: 0; }
  .expertise-intro, .portfolio-heading, .about-rebuilt { display: block; }
  .expertise-intro .section-label, .portfolio-heading .section-label, .about-rebuilt .section-label { margin: 0 0 20px; }
  .expertise-intro > p, .portfolio-heading > p { margin-top: 23px; }
  .expertise-list article { display: block; min-height: 0; padding: 24px 0; }
  .expertise-list p { margin-top: 9px; font-size: 15px; }
  .portfolio-tabs { display: grid; grid-auto-columns: minmax(170px, 43vw); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scrollbar-width: thin; }
  .portfolio-tab { min-height: 72px; }
  .portfolio-panel { grid-template-columns: minmax(0, 1fr); height: auto; }
  .portfolio-visual { height: clamp(285px, 60vw, 440px); }
  .portfolio-copy { min-height: 290px; padding: 31px 30px 36px; }
  .portfolio-copy h3 { margin-top: 30px; }
  .portfolio-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
  .archive-grid { grid-template-columns: 1fr; gap: 20px; }
  .archive-image { height: clamp(250px, 65vw, 420px); }
  .archive-copy { min-height: 260px; }
  .about-rebuilt-copy { grid-template-columns: 1fr; gap: 19px; margin-top: 30px; }
}

@media (max-width: 450px) {
  .hero-kicker span:last-child { display: none; }
  .hero-rebuilt h1 { font-size: clamp(40px, 10.7vw, 49px); }
  .hero-message p { font-size: 14px; line-height: 1.47; }
  .hero-monogram { right: -22px; bottom: 1px; font-size: 135px; }
  .portfolio-visual { height: 260px; }
  .portfolio-copy h3 { font-size: 51px; }
  .portfolio-detail { border-width: 4px; }
  .archive-intro h1 { font-size: clamp(43px, 10vw, 54px); }
  .archive-image { height: 250px; }
}

@media (max-width: 360px) and (max-height: 760px) {
  .hero-rebuilt { min-height: calc(100dvh - 72px); }
  .hero-core { padding: 20px 22px 15px; }
  .hero-rebuilt h1 { font-size: 39px; line-height: 1.04; }
  .hero-message p { margin: 14px 0 12px; font-size: 13px; line-height: 1.42; }
  .hero-monogram { display: none; }
  .portfolio-copy h3 { font-size: 43px; }
}

@media (max-width: 760px) and (max-height: 650px) {
  .hero-kicker { min-height: 44px; }
  .hero-core { padding-top: 16px; }
  .hero-message p { margin-top: 13px; margin-bottom: 11px; }
  .hero-monogram { height: 90px; font-size: 100px; }
}