:root{--bg:#f8f5f0;--paper:#fffdf9;--text:#27221f;--muted:#756b64;--accent:#b88674;--line:#ded6cf;--max:1180px;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

h1,
h2,
h3,
blockquote {
  font-family: var(--serif);
  font-weight: 500;
}

h1 {
  font-size: clamp(42px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
}

h2 {
  font-size: clamp(30px, 5.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 34px;
}

h3 {
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--muted);
}

em {
  color: var(--accent);
  font-style: normal;
}


.site-header{width:min(var(--max),calc(100% - 48px));margin:auto;height:88px;display:flex;align-items:center;justify-content:space-between;
position: sticky; top: 0; background-color: var(--bg); border-bottom: 1px solid var(--line); z-index: 1;}
.logo{font-family:var(--serif);font-size:28px;letter-spacing:.06em}
.logo span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:34px;font-size:14px}
.nav a{transition:opacity .2s}
.nav a:hover{opacity:.6}
.nav-cta{border:1px solid var(--text);padding:10px 17px;border-radius:100px}
.menu-toggle{display:none;border:0;background:transparent;font-size:25px;cursor:pointer}

.hero {
  width: min(var(--max), calc(100% - 48px));
  margin: 28px auto 100px;

  /* min-height: 680px; */

  display: grid;

  /* więcej miejsca dla fotografii */
  grid-template-columns: 0.85fr 1.15fr;

  gap: 40px;
}

.hero-copy {
  padding-left: 4%;
  align-self: center;
}

.hero-copy h1 {
  max-width: 560px;
}

.hero-text {
  max-width: 440px;
  color: var(--muted);
  font-size: 20px;
  margin-bottom: 20px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.hero-features span {
  font-size: 16px;
  color: var(--text);
  background: rgba(184, 134, 116, 0.10);
  padding: 6px 13px;
  border-radius: 100px;
}

.hero-image {
  height: 550px;
  overflow: hidden;
  background: #e8ded6;
  position: relative;
}

.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition:
    opacity 1.2s ease-in-out,
    transform 0.5s ease;
}

.hero-image img.active {
  opacity: 1;
}

.hero-image:hover img.active {
  transform: scale(1.025);
}

.hero-text {
  margin-bottom: 16px;
  color: var(--muted);
}

.hero-text:last-of-type {
    margin-bottom: 20px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.hero-features span {
  font-size: 14px;
  color: var(--text);
  background: rgba(184, 134, 116, 0.12); /* subtelne tło w kolorze akcentu */
  padding: 6px 14px;
  border-radius: 100px;
}


.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border:0;background:var(--text);color:#fff;padding:15px 20px 15px 22px;border-radius:100px;cursor:pointer;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px);background:#000}
.button span[aria-hidden="true"]{font-size:20px}

.section{width:min(var(--max),calc(100% - 48px));margin:0 auto 100px}

section, :target {
  scroll-margin-top: 50px;
}

.intro{border-top:1px solid var(--line);padding-top:55px}


.intro-heading{margin-bottom:48px}
.intro-heading h2{margin-bottom:0}
.intro-content{display:grid;grid-template-columns:.5fr 1fr;gap:100px;align-items:start}
.intro-photo{height:470px;overflow:hidden;background:#e8ded6}
.intro-photo img{transition:transform .5s ease}
.intro-photo:hover img{transform:scale(1.025)}
.intro-text{max-width:570px;color:var(--muted);padding-top:20px}
.intro-text p{margin:0 0 22px}
.intro-text .intro-lead{font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--text);margin-bottom:30px}
.text-link{display:inline-block;margin-top:10px;color:var(--text);border-bottom:1px solid var(--text);padding-bottom:3px;transition:opacity .2s,transform .2s}
.text-link:hover{opacity:.6;transform:translateX(3px)}

.portfolio {border-top:1px solid var(--line); padding-top:55px}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 40px;
}

.section-heading h2 {
  margin-bottom: 25px;
}
.section-intro{
  /* max-width:55 0px; */
  color:var(--muted);margin:0}

/* .filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:end}
.filter{background:transparent;border:1px solid var(--line);color:var(--muted);padding:9px 15px;border-radius:100px;cursor:pointer}
.filter.active,.filter:hover{background:var(--text);color:#fff;border-color:var(--text)} */

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-item{position:relative;height:500px;overflow:hidden;background:#e8ded6}
/* .gallery-item.tall{height:620px;grid-row:span 2} */
/* .gallery-item:nth-child(2),.gallery-item:nth-child(3),.gallery-item:nth-child(4),.gallery-item:nth-child(5),.gallery-item:nth-child(6){height:400px} */
.gallery-item img{transition:transform .5s ease}
.gallery-item:hover img{transform:scale(1.04)}
/* .gallery-label{position:absolute;left:18px;bottom:16px;color:#fff;background:rgba(30,25,22,.65);backdrop-filter:blur(8px);padding:7px 12px;border-radius:100px;font-size:12px} */
.gallery-item.hidden{display:none}

.process{border-top:1px solid var(--line);padding-top:40px}
.process>h2{margin-bottom:35px}
.process-list{border-top:1px solid var(--line)}
.process-item{display:grid;grid-template-columns:70px 1fr;gap:25px;padding:28px 0;border-bottom:1px solid var(--line)}
.process-item>span{font-size:12px;color:var(--muted)}
.process-item h3{font-size:23px;margin:0 0 8px}
.process-item p{color:var(--muted);font-size:14px;margin:0;max-width:600px}

.services{border-top:1px solid var(--line);padding-top:40px}
.services>h2{margin-bottom:35px}
.service-list{border-top:1px solid var(--line)}
.service{display:grid;grid-template-columns:70px 1fr 1.2fr 110px;gap:25px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.service>span{color:var(--muted);font-size:12px}
.service h3{font-size:23px;margin:0}
.service p{color:var(--muted);margin:0;font-size:14px}
.service strong{text-align:right;font-weight:500}
.services-note{color: var(--muted); margin-top: 2em;}
.services-note p {margin-top: 0.5em; margin-bottom: 0;}

.quote{background:var(--paper);width:100%;max-width:none;padding:90px max(24px,calc((100vw - var(--max))/2));text-align:center}
.quote-mark{font-family:var(--serif);font-size:80px;line-height:.7;color:var(--accent)}
blockquote {
  max-width: 820px;
  margin: 20px auto 0;
  font-size: clamp(30px, 4vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.contact-copy h2{margin-bottom:24px}
.contact-copy>p:not(.eyebrow){max-width:460px;color:var(--muted)}
.contact-links{display:grid;gap:8px;margin-top:35px}
.contact-links a{width:fit-content;border-bottom:1px solid var(--line);transition:opacity .2s}
.contact-links a:hover{opacity:.6}
.contact-form{display:grid;gap:18px}
.contact-form label{display:grid;gap:7px;font-size:12px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;color:var(--text);outline:none;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--text)}
.contact-form .button{justify-self:start;margin-top:5px}
.contact-form .button:disabled{cursor:wait;opacity:.65;transform:none}
.contact-form .optional{font-weight:400;color:var(--muted)}
.form-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-privacy{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}
.form-status{min-height:20px;margin:0;font-size:13px;line-height:1.5}
.form-status.is-success{color:#356246}
.form-status.is-error{color:#8a3434}
.form-error-contact{width:fit-content;margin-top:-12px;border-bottom:1px solid var(--line);font-size:13px}
.form-error-contact[hidden]{display:none}

.thank-you{min-height:calc(100vh - 160px);display:grid;align-items:center}
.thank-you-content{width:min(720px,calc(100% - 48px));padding-top:100px;padding-bottom:100px;text-align:center}
.thank-you-content h1{font-family:"Playfair Display",serif;font-size:clamp(48px,7vw,84px);font-weight:500;line-height:1.05}
.thank-you-content h1 em{font-weight:500}
.thank-you-content>p:not(.eyebrow){max-width:540px;margin:24px auto 32px;color:var(--muted);font-size:16px;line-height:1.7}
.thank-you-content .button{margin-inline:auto}
.form-note{font-size:11px;color:var(--muted);margin:0}

.footer{border-top:1px solid var(--line);width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:30px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:12px}
.footer .logo{color:var(--text);font-size:20px}

@media(max-width:800px){
.site-header{height:72px}
.menu-toggle{display:block}
.nav{display:none;position:absolute;z-index:10;top:72px;left:24px;right:24px;background:var(--paper);padding:22px;flex-direction:column;align-items:stretch;gap:18px;border:1px solid var(--line)}
.nav.open{display:flex}
.nav-cta{text-align:center}
.hero{grid-template-columns:1fr;gap:40px;margin-top:25px;margin-bottom:100px;min-height:0}
.hero-copy{padding-left:0}
.hero-image{height:520px}
.intro-content{grid-template-columns:1fr;gap:50px}
.intro-photo{height:500px;max-width:350px}
.intro-text{padding-top:0}
.for-you{grid-template-columns:1fr;gap:45px}
.section{margin-bottom:100px}
.section-heading{align-items:start;flex-direction:column}
.filters{justify-content:start}
.gallery{grid-template-columns:1fr 1fr}
.gallery-item{height: 400px}
/* .gallery-item,.gallery-item.tall,.gallery-item:nth-child(2),.gallery-item:nth-child(3),.gallery-item:nth-child(4),.gallery-item:nth-child(5),.gallery-item:nth-child(6){height:360px} */
.gallery-item.tall{grid-row:auto}
.process-item{grid-template-columns:40px 1fr;gap:20px}
.service{grid-template-columns:40px 1fr;gap:12px 20px}
.service p{grid-column:2}
.service strong{grid-column:2;text-align:left}
.quote{padding-top:80px;padding-bottom:80px}
.contact{grid-template-columns:1fr;gap:55px}
.footer{flex-wrap:wrap}
}

@media(max-width:520px){
.site-header,.hero,.section,.footer{width:min(100% - 32px,var(--max))}
.hero{display: flex;flex-direction: column;}
.hero-image{height:430px;order:1;}
.hero-copy{order: 2;}
.hero-copy h1{font-size:clamp(52px,13vw,72px)}
.intro{padding-top:40px}
/* .intro-heading h2{font-size:42px} */
.intro-heading {margin-bottom: 40px;}
.intro-content {gap: 40px;}
.intro-photo{height:400px; max-width: 300px;}
.intro-text .intro-lead{font-size:22px}
.italian{padding:80px 20px}
.italian h2{font-size:52px}
.for-you-lead{font-size:24px}
.gallery { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 6px; 
  }
  .gallery-item { 
    height: 300px; 
  }
/* .gallery{grid-template-columns:1fr}
.gallery-item,.gallery-item.tall,.gallery-item:nth-child(2),.gallery-item:nth-child(3),.gallery-item:nth-child(4),.gallery-item:nth-child(5),.gallery-item:nth-child(6){height:430px} */
.filter{font-size:12px;padding:8px 12px}
.service h3,.process-item h3{font-size:23px}
.service p,.process-item p{font-size:13px}
.quote{padding-left:20px;padding-right:20px}
.quote-mark{font-size:65px}
blockquote{font-size:34px}
.footer{align-items:flex-start;flex-direction:column;gap:14px}
}