:root{--paper:#faf9f6;--ink:#20211f;--muted:#646660;--line:#d8d8d0;--accent:#d9e5a6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #4a611b;outline-offset:6px}header,main,footer{max-width:1600px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:30px 5%;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:30px;letter-spacing:-1.5px;white-space:nowrap}.brand span{font-size:31px;margin-right:8px}nav{display:flex;gap:32px;font-size:14px}nav sup{font-size:10px}nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:6px}.hero{padding:90px 5% 80px;position:relative;overflow:hidden}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:600}.hero h1{font:clamp(52px,6.8vw,108px)/1.07 Georgia,serif;letter-spacing:-.045em;font-weight:400;margin:27px 0 36px;position:relative;z-index:1}em{font-weight:400}.intro{display:flex;align-items:end;gap:60px}.intro p{max-width:415px;color:var(--muted);margin:0}.text-link{font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:5px;white-space:nowrap}.hero-star{position:absolute;right:6%;bottom:50px;font-size:160px;line-height:1;color:#ff2020;transform:rotate(12deg)}.work{padding:30px 5% 100px}.section-top{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px;margin-bottom:24px}.section-top h2{font-size:21px;font-weight:400;margin:0}.section-top h2 span{font-size:13px;margin-left:6px;color:var(--muted)}.section-top p{font-size:14px;color:var(--muted)}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:35px}.filters button{background:none;border:1px solid var(--line);border-radius:30px;font-size:14px;padding:9px 19px}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 30px}.card{display:block;width:100%;text-align:left;color:inherit;border:0;background:none;padding:0}.visual{aspect-ratio:1.3;background:#e7e7e0;overflow:hidden;display:flex;align-items:center;justify-content:center}.visual img{width:100%;height:100%;object-fit:cover;transition:transform .55s}.card:hover .visual img{transform:scale(1.035)}.visual.contain{padding:8%;background:#e8e8e4}.visual.contain img{object-fit:contain}.visual.logo{background:#fff;padding:7%}.visual.logo img{object-fit:contain}.card-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px}.card h3{font-size:20px;font-weight:400;margin:0}.card .num{font:12px/1.4 Arial;color:var(--muted)}.card p{font-size:13px;color:var(--muted);margin:3px 0}.coming{background:#e4e9d5;flex-direction:column;gap:12px}.coming b{font:italic 58px Georgia;font-weight:400}.coming span{font-size:12px;text-transform:uppercase;letter-spacing:.15em}.card:nth-child(8) .coming{background:#ece8e2}.about{border-top:1px solid var(--line);padding:80px 5% 95px;display:grid;grid-template-columns:1fr 2fr;gap:40px}.about h2,.contact h2{font:clamp(40px,4.5vw,70px)/1.1 Georgia,serif;letter-spacing:-.035em;margin:0 0 30px}.about p{max-width:610px;color:var(--muted)}.services{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;margin-top:35px;max-width:600px}.services span{border-top:1px solid var(--line);padding:12px 0;font-size:14px}.contact{background:var(--accent);padding:70px 5%;text-align:center}.contact .eyebrow{margin-bottom:30px}.contact p{margin:10px 0}.contact-note{font-size:14px;color:#485139}footer{padding:30px 5%;display:flex;justify-content:space-between;align-items:center;gap:24px}footer p,footer>a:last-child{font-size:12px}footer .brand{font-size:24px}dialog{border:0;padding:0;max-width:1000px;width:calc(100% - 32px);max-height:90vh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#000b}.close{position:sticky;top:12px;float:right;margin:12px 12px 0 0;border:1px solid #ccc;border-radius:24px;background:white;padding:8px 20px;z-index:2}#dialog-content{padding:55px 6% 50px}#dialog-content h2{font:42px/1.1 Georgia;margin:10px 0 20px}#dialog-content p{max-width:680px;color:var(--muted)}#dialog-content img{display:block;width:100%;max-height:65vh;object-fit:contain;background:#eee;margin:30px 0}#dialog-content .detail-label{font-size:12px;text-transform:uppercase;letter-spacing:.12em}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;top:0;left:0;background:white;padding:15px;z-index:5}[hidden]{display:none!important}@media(min-width:1000px){.card:nth-child(even){transform:translateY(65px)}.project-grid{padding-bottom:65px}}@media(max-width:900px){.hero-star{display:none}.intro{gap:25px}.hero{padding-top:65px}.about{grid-template-columns:1fr 2fr}.section-top p{display:none}}@media(max-width:600px){header{padding:20px 6%;align-items:start;gap:20px;flex-wrap:wrap}.brand{font-size:27px}nav{gap:25px}.hero{padding:55px 6%}.hero h1{font-size:clamp(42px,10vw,60px)}.intro{display:block}.intro .text-link{display:inline-block;margin-top:25px}.work{padding:20px 6% 55px}.project-grid{grid-template-columns:1fr;gap:32px}.filters{gap:8px}.filters button{padding:8px 13px}.visual{aspect-ratio:1.2}.about{grid-template-columns:1fr;padding:50px 6%;gap:25px}.contact{padding:55px 6%}footer{flex-direction:column;align-items:start;padding:30px 6%;gap:10px}footer p{margin:0}#dialog-content h2{font-size:34px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.brand{display:block;width:250px;height:46px;overflow:hidden;position:relative}.brand-logo{position:absolute;width:275px;max-width:none;left:-12px;top:-25px;mix-blend-mode:normal}footer .brand{width:230px;height:44px}footer .brand-logo{width:250px;top:-23px;left:-11px}.phone{display:inline-block;font:30px Georgia;margin:12px 0 30px}#enquiry-form{max-width:680px;margin:25px auto 0;text-align:left}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-size:14px;margin-bottom:20px}input,textarea{display:block;width:100%;font:16px/1.5 Arial;background:#ffffff80;border:1px solid #9aa978;border-radius:0;color:var(--ink);padding:13px;margin-top:7px}textarea{resize:vertical}input:focus,textarea:focus{outline:2px solid #485c27;outline-offset:2px}#send-enquiry{background:var(--ink);color:white;border:0;padding:14px 25px}#send-enquiry:disabled{opacity:.5;cursor:not-allowed}#send-enquiry:not(:disabled){cursor:pointer}#enquiry-form .contact-note{margin-top:16px}@media(max-width:600px){.form-row{grid-template-columns:1fr;gap:0}.brand{width:235px}}

.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}.project-gallery img{margin:0!important;width:100%;height:auto;max-height:none!important;object-fit:contain;background:#eee}.project-gallery img:nth-child(3){grid-column:1/-1}@media(max-width:700px){.project-gallery{grid-template-columns:1fr}.project-gallery img:nth-child(3){grid-column:auto}}

.project-live-link{display:inline-flex;align-items:center;gap:10px;margin:8px 0 6px;padding:12px 18px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-size:14px;line-height:1.2;transition:background .2s,color .2s}.project-live-link:hover{background:transparent;color:var(--ink)}.project-live-link span{font-size:17px}


/* Click/tap-to-enlarge project images */
.image-zoom-hint{margin:18px 0 4px!important;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}.image-zoom-hint:before{content:"＋";display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;color:var(--ink);font-size:15px}.zoomable-image{cursor:zoom-in;transition:opacity .18s ease,transform .18s ease}.zoomable-image:hover{opacity:.92}.zoomable-image:focus-visible{outline:3px solid #4a611b;outline-offset:4px}.image-lightbox{position:fixed;inset:0;z-index:9999;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;background:rgba(0,0,0,.94);padding:18px;color:#fff;grid-template-rows:auto 1fr auto}.image-lightbox[open]{display:grid}.image-lightbox::backdrop{background:rgba(0,0,0,.72)}.lightbox-close{justify-self:end;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(20,20,20,.78);color:#fff;padding:9px 17px;z-index:2}.lightbox-close:hover{background:#fff;color:#111}.lightbox-stage{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:10px 2vw 6px;cursor:zoom-out}.lightbox-stage img{display:block;max-width:96vw;max-height:84vh;width:auto;height:auto;object-fit:contain;background:transparent;box-shadow:0 12px 50px rgba(0,0,0,.45);touch-action:pinch-zoom}.lightbox-caption{margin:8px auto 0;max-width:900px;text-align:center;color:#d7d7d7;font-size:13px;line-height:1.4}.lightbox-open{overflow:hidden}@media(max-width:600px){.image-lightbox{padding:10px}.lightbox-stage{padding:6px 0}.lightbox-stage img{max-width:98vw;max-height:82vh}.lightbox-caption{font-size:12px}.image-zoom-hint{font-size:12px}}

/* PATH50 cover crop: preserve the logo, sky and architecture in the portfolio card */
.visual.path50-cover img{object-fit:cover;object-position:center center}

/* Tomasz Studio logo motion — subtle entrance + hover/touch response */
.brand-logo{
  transform-origin:left center;
  animation:tomaszLogoReveal .9s cubic-bezier(.22,.8,.25,1) both;
  transition:transform .32s cubic-bezier(.2,.75,.25,1),filter .32s ease,opacity .32s ease;
  will-change:transform;
}
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo{
  transform:translateX(4px) scale(1.025);
  filter:contrast(1.08);
}
.brand:active .brand-logo{
  transform:translateX(2px) scale(.985);
}
@keyframes tomaszLogoReveal{
  0%{opacity:0;transform:translateX(-18px) scale(.965);filter:blur(4px)}
  60%{opacity:1;transform:translateX(3px) scale(1.015);filter:blur(0)}
  100%{opacity:1;transform:translateX(0) scale(1);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .brand-logo{animation:none!important;transition:none!important}
}


/* Mobile logo clarity + balanced headlines */
.brand{
  display:flex;
  align-items:center;
  width:clamp(220px,24vw,300px);
  height:auto;
  min-height:48px;
  overflow:visible;
}
.brand-logo{
  position:static;
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  left:auto;
  top:auto;
  mix-blend-mode:normal;
}
footer .brand{width:clamp(205px,20vw,250px);height:auto;min-height:40px}
footer .brand-logo{position:static;width:100%;height:auto;left:auto;top:auto}

/* Keep display headlines visually balanced and avoid one-word final lines. */
.hero h1,
.about h2,
.contact h2,
.section-top h2,
.card h3,
#dialog-content h2,
#dialog-content h3,
.coming b{
  text-wrap:balance;
}

@media(max-width:600px){
  header{
    padding:18px 6% 20px;
    align-items:center;
    row-gap:16px;
  }
  header .brand{
    width:min(250px,78vw);
    min-height:42px;
    flex:0 0 100%;
  }
  header nav{
    width:100%;
    justify-content:flex-start;
    gap:22px;
  }
  footer .brand{width:min(230px,76vw)}
  .hero h1{font-size:clamp(42px,11vw,58px);line-height:1.02}
  .card h3{max-width:calc(100% - 42px)}
}

@media(max-width:380px){
  header .brand{width:min(225px,82vw)}
  header nav{gap:18px;font-size:13px}
}


/* Londynek cover: preserve all 'ADVERT AUTOMATION' text and lower icons. */
.visual.londynek-cover{
  background:#071423;
  padding:0;
}
.visual.londynek-cover img{
  object-fit:contain;
  object-position:center center;
  width:100%;
  height:100%;
}
@media(max-width:600px){
  .visual.londynek-cover{
    aspect-ratio:16/9;
  }
  .visual.londynek-cover img{
    object-fit:contain;
    object-position:center center;
  }
}




/* Modern sans-serif project titles */
.card h3,
#dialog-content h2{
  font-family:"Manrope", "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  letter-spacing:-0.035em;
  text-wrap:balance;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.card h3{
  font-size:21px;
  line-height:1.12;
}
#dialog-content h2{
  font-size:44px;
  line-height:1.02;
  font-weight:700;
}
@media(max-width:600px){
  .card h3{
    font-size:20px;
    line-height:1.12;
  }
  #dialog-content h2{
    font-size:34px;
    line-height:1.04;
  }
}


/* Ted Bundy Tapes cover: preserve the full title on desktop and mobile */
.visual.ted-cover{
  background:#111;
  padding:0;
}
.visual.ted-cover img{
  object-fit:contain;
  object-position:center center;
  transform:none;
}
.card:hover .visual.ted-cover img,
.card:focus-visible .visual.ted-cover img{
  transform:translateY(-3px) scale(.985);
  filter:contrast(1.03) brightness(1.015);
}
@media(max-width:600px){
  .visual.ted-cover img{
    object-fit:contain;
    object-position:center center;
  }
}


/* Phone call action: clear, accessible tap/click target */
.phone{
  min-height:44px;
  padding:6px 2px;
  cursor:pointer;
  touch-action:manipulation;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.phone:hover,
.phone:focus-visible{
  text-decoration:underline;
}


/* Launch QA fixes */
img{max-width:100%;height:auto}
.image-lightbox{width:100%;height:100vh;height:100dvh}
#send-enquiry{min-height:48px}
.card{touch-action:manipulation}
.card:focus-visible{outline:3px solid #20211f;outline-offset:6px}
@media(max-width:480px){
  nav{width:100%;justify-content:space-between;gap:12px}
  nav a{min-height:44px;display:inline-flex;align-items:center}
  .filters button{min-height:44px}
  .project-live-link{min-height:44px}
  .close,.lightbox-close{min-height:44px}
}


/* Tomasz Studio logo — desktop + mobile motion */
.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.brand-logo{
  transform-origin:left center;
  will-change:transform,opacity,filter;
  animation:tsLogoReveal 900ms cubic-bezier(.16,.84,.28,1) both;
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1),
    filter 360ms ease,
    opacity 260ms ease;
}
.brand::after{
  content:"";
  position:absolute;
  inset:-7px -10px;
  border-radius:12px;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-28%);
}
@media (hover:hover) and (pointer:fine){
  .brand:hover .brand-logo,
  .brand:focus-visible .brand-logo{
    transform:translateY(-2px) scale(1.025);
    filter:drop-shadow(0 7px 14px rgba(0,0,0,.10));
  }
  .brand:hover::after,
  .brand:focus-visible::after{
    animation:tsLogoSheen 620ms ease both;
  }
}
.brand:active .brand-logo,
.brand.logo-tap .brand-logo{
  transform:scale(.97) rotate(-.6deg);
}
.brand.logo-tap::after{
  animation:tsLogoSheen 520ms ease both;
}

@keyframes tsLogoReveal{
  0%{opacity:0;transform:translateY(10px) scale(.955);filter:blur(4px)}
  58%{opacity:1;transform:translateY(-1px) scale(1.012);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes tsLogoSheen{
  0%{opacity:0;transform:translateX(-28%)}
  35%{opacity:.7}
  100%{opacity:0;transform:translateX(28%)}
}
@keyframes tsLogoDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1.5px)}
}
@media (prefers-reduced-motion:no-preference){
  .brand-logo{
    animation:
      tsLogoReveal 900ms cubic-bezier(.16,.84,.28,1) both,
      tsLogoDrift 6s ease-in-out 1.4s infinite;
  }
}

/* Project cards — tactile interaction and staggered reveal */
.card{
  transform:translateZ(0);
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    opacity 320ms ease;
  -webkit-tap-highlight-color:transparent;
}
.card .visual{
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1),
    box-shadow 360ms ease;
}
.card .visual img{
  transition:
    transform 650ms cubic-bezier(.2,.8,.2,1),
    filter 420ms ease;
}
.card .card-heading h3,
.card .num,
.card > p{
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    opacity 320ms ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-5px);
  }
  .card:hover .visual{
    box-shadow:0 16px 34px rgba(22,22,18,.09);
  }
  .card:hover .visual img{
    transform:scale(1.028);
  }
  .card:hover .card-heading h3{
    transform:translateX(3px);
  }
  .card:hover .num{
    transform:translateX(-2px);
  }
}
.card:active,
.card.is-pressed{
  transform:scale(.985);
}
.card.card-enter{
  animation:tsCardEnter 580ms cubic-bezier(.2,.75,.2,1) both;
  animation-delay:calc(var(--card-delay,0) * 65ms);
}
.card.filter-pop{
  animation:tsFilterPop 380ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tsCardEnter{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes tsFilterPop{
  from{opacity:0;transform:translateY(9px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Project dialog — smooth open/close and content reveal */
#project-dialog{
  opacity:0;
  transform:translateY(20px) scale(.982);
  transform-origin:center top;
  transition:
    opacity 230ms ease,
    transform 320ms cubic-bezier(.2,.8,.2,1);
}
#project-dialog::backdrop{
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0);
  transition:background 250ms ease,backdrop-filter 250ms ease;
}
#project-dialog.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}
#project-dialog.is-open::backdrop{
  background:rgba(0,0,0,.70);
  backdrop-filter:blur(3px);
}
#project-dialog.is-closing{
  opacity:0;
  transform:translateY(12px) scale(.988);
}
#dialog-content > *{
  opacity:0;
  transform:translateY(12px);
}
#project-dialog.is-open #dialog-content > *{
  animation:tsProjectContentIn 480ms cubic-bezier(.2,.8,.2,1) both;
}
#project-dialog.is-open #dialog-content > *:nth-child(1){animation-delay:45ms}
#project-dialog.is-open #dialog-content > *:nth-child(2){animation-delay:85ms}
#project-dialog.is-open #dialog-content > *:nth-child(3){animation-delay:125ms}
#project-dialog.is-open #dialog-content > *:nth-child(4){animation-delay:165ms}
#project-dialog.is-open #dialog-content > *:nth-child(5){animation-delay:205ms}
#project-dialog.is-open #dialog-content > *:nth-child(n+6){animation-delay:245ms}
@keyframes tsProjectContentIn{
  to{opacity:1;transform:translateY(0)}
}
.close{
  transition:transform 220ms ease,background 220ms ease,border-color 220ms ease;
}
.close:hover,.close:focus-visible{transform:rotate(1deg) scale(1.035)}
.close:active{transform:scale(.96)}

/* Gallery images animate gently as they become interactive */
.zoomable-image{
  transition:transform 300ms cubic-bezier(.2,.8,.2,1),box-shadow 300ms ease,filter 300ms ease;
}
@media (hover:hover) and (pointer:fine){
  .zoomable-image:hover{
    transform:translateY(-3px) scale(1.008);
    box-shadow:0 14px 32px rgba(0,0,0,.10);
  }
}
.zoomable-image:active{transform:scale(.99)}

/* Full-screen image viewer motion */
.image-lightbox{
  opacity:0;
  transition:opacity 220ms ease;
}
.image-lightbox::backdrop{
  background:rgba(0,0,0,0);
  transition:background 220ms ease;
}
.image-lightbox #lightbox-image{
  opacity:0;
  transform:scale(.975);
  transition:opacity 240ms ease,transform 300ms cubic-bezier(.2,.8,.2,1);
}
.image-lightbox.is-open{opacity:1}
.image-lightbox.is-open::backdrop{background:rgba(0,0,0,.88)}
.image-lightbox.is-open #lightbox-image{
  opacity:1;
  transform:scale(1);
}

/* Motion accessibility */
@media (prefers-reduced-motion:reduce){
  .brand-logo,
  .brand::after,
  .card,
  .card .visual,
  .card .visual img,
  .card .card-heading h3,
  .card .num,
  .card > p,
  #project-dialog,
  #project-dialog::backdrop,
  #dialog-content > *,
  .zoomable-image,
  .image-lightbox,
  .image-lightbox::backdrop,
  .image-lightbox #lightbox-image{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  #project-dialog,
  #dialog-content > *,
  .image-lightbox,
  .image-lightbox #lightbox-image{
    opacity:1!important;
  }
}


.card:active .visual.ted-cover img,
.card.is-pressed .visual.ted-cover img{
  transform:scale(.975);
}


/* Contact section — red brand accent */
.contact{
  background:#ff2020;
  color:#000;
}
.contact .eyebrow,
.contact h2,
.contact p,
.contact label,
.contact .phone,
.contact .contact-note,
.contact a{
  color:#fff;
}
.contact input,
.contact textarea{
  background:rgba(255,255,255,.88);
  color:#000;
  border-color:rgba(0,0,0,.55);
}
.contact input:focus,
.contact textarea:focus{
  outline:2px solid #000;
  outline-offset:2px;
}
.contact #send-enquiry{
  background:#000;
  color:#fff;
}
.contact #send-enquiry:hover,
.contact #send-enquiry:focus-visible{
  background:#20211f;
}

.contact input::placeholder,
.contact textarea::placeholder{
  color:#4a4a4a;
  opacity:1;
}