/* =========================================================
   KRZ M.E. — static site
   Type scale and spacing taken from the live Elementor CSS
   (post-171.css / post-163.css) and the supplied screenshots.
   ========================================================= */

:root{
  --blue:#0000ff;
  --ink:#101010;
  --body:#1a1a1a;
  --muted:#8d8d8d;
  --bg:#ffffff;

  /* layout */
  --pad-l:100px;
  --pad-r:200px;
  --pad-b:150px;
  --indent:100px;     /* home: intro + grid offset inside a section */
  --colw:89%;         /* home: content column width */
  --gap:20px;

  /* type */
  --fs-display:44px;  --lh-display:58px;   /* hero, section labels, project titles */
  --fs-nav:36px;
  --fs-body:23px;     --lh-body:32px;
  --fs-sub:16px;      --lh-sub:24px;       /* project subtitle */
  --fs-head:33px;     --lh-head:44px;      /* in-project subheads */
  --fs-foot:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--body);
  font-family:"Syne",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ---------------- header ---------------- */
/* baseline alignment: the logo <img> is display:block, so the logo link has no line
   box and its synthesised baseline is its bottom edge — which lands exactly on the
   nav text's baseline, so the logo and "work. contact." sit on the same line. */
.site-header{
  display:flex;align-items:baseline;gap:70px;
  padding:94px var(--pad-r) 38px var(--pad-l);
}
.site-logo img{width:228px;height:auto}
.nav{display:flex;align-items:baseline;gap:44px;list-style:none}
.nav a{
  display:block;
  color:var(--blue);
  font-size:var(--fs-nav);font-weight:700;letter-spacing:-.015em;
  line-height:1;
}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{
  display:block;width:30px;height:3px;background:var(--blue);
  transition:transform .25s ease,opacity .2s ease;
}
.burger span + span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-9px) rotate(-45deg)}

/* ---------------- home: hero ---------------- */
.hero{
  min-height:570px;display:flex;align-items:center;
  padding:0 var(--pad-r) 0 var(--pad-l);
}
.hero h1{
  color:var(--ink);
  font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:700;letter-spacing:-.015em;
}

/* ---------------- home: sections ---------------- */
.section{padding:0 var(--pad-r) var(--pad-b) var(--pad-l)}
.section-label{
  color:var(--blue);
  font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:700;letter-spacing:-.015em;
  padding:20px 0;
}
.section-intro{
  width:var(--colw);
  margin-left:var(--indent);
  font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:600;color:var(--body);
}
.section-body{margin:20px 0 0 var(--indent);width:var(--colw)}
/* per-section top margins, read off post-171.css widget containers */
#creative    .section-body{margin-top:20px}
#translation .section-body{margin-top:32px}
#studio      .section-body{margin-top:20px}

/* portfolio */
/* --grid-row-gap / --grid-column-gap: 20px */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.p-item{display:block;position:relative;overflow:hidden;background:#ededed}
.p-thumb{display:block;position:relative;padding-bottom:56.25%}
.p-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* video grid */
/* EAEL: 12px padding per item against a -12px wrapper = 24px gutters */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.v-item{
  position:relative;overflow:hidden;cursor:pointer;background:#ededed;
  border:0;padding:0;display:block;width:100%;
}
.v-thumb{display:block;position:relative;padding-bottom:56.25%}
.v-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;border:2px solid #fff;
  display:grid;place-items:center;pointer-events:none;
}
.v-play::after{
  content:"";display:block;margin-left:4px;
  border-left:15px solid #fff;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

/* studio grid — explicit columns so the order matches the original exactly */
/* Elementor Gallery default gap = 10px, tighter than the grids above */
.masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.masonry .col{display:flex;flex-direction:column;gap:10px}
.masonry a{display:block;background:#ededed;cursor:zoom-in}
.masonry img{width:100%}

/* ---------------- project pages ---------------- */
.project{padding:74px var(--pad-r) 120px var(--pad-l)}
.project h1{
  color:var(--ink);
  font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:700;letter-spacing:-.015em;
  margin-bottom:0;
}
.project .client{
  font-size:var(--fs-sub);line-height:var(--lh-sub);
  font-weight:600;color:var(--body);margin-bottom:0;
}
/* the first block after the client line sits 30px down, not the usual 50 */
.project .client + *{margin-top:30px}
.project h2{
  color:var(--ink);
  font-size:var(--fs-head);line-height:var(--lh-head);
  font-weight:700;letter-spacing:-.01em;
  margin:34px 0 16px;
}
.project p{
  font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:600;margin-bottom:20px;
}
.project figure{margin:50px 0}
.project figure img{width:100%}
.project figure.center{margin-left:auto;margin-right:auto}
.project figure.w35{max-width:35%}
.project figure.w40{max-width:40%}
.project figure.w45{max-width:45%}
.project figure.w55{max-width:55%}
.project figure.w70{max-width:70%}

/* embedded video */
.embed{position:relative;padding-bottom:56.25%;background:#000;margin:50px 0}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed .facade{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  cursor:pointer;background:#000;
}
.embed .facade img{width:100%;height:100%;object-fit:cover}
.embed .facade .v-play{width:74px;height:74px;border-width:3px}
.embed .facade .v-play::after{border-left-width:22px;border-top-width:13px;border-bottom-width:13px}

/* project galleries */
/* Elementor gallery: masonry, 2 columns, 22px gap */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:start;margin:50px 0}
.grid-2 .col{display:flex;flex-direction:column;gap:22px}
.grid-2 a{display:block;cursor:zoom-in}
.grid-2 img{width:100%}
/* double, double gallery: masonry, 3 cols, gap 18px (from its data-settings) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;margin:50px 0}
.grid-3 a{display:block;cursor:zoom-in}
/* inner section: elementor-col-50 + elementor-col-50, default 20px gutter */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;margin:50px 0}
.split img{width:100%}

/* ---------------- contact ---------------- */
/* post-163.css: margin-top 70px; padding 0 500px 0 100px — a much narrower column */
.contact{margin-top:70px;padding:0 500px 50px var(--pad-l)}
.contact h1{
  color:var(--ink);
  font-size:31px;line-height:36px;font-weight:700;letter-spacing:-.01em;
  margin-bottom:12px;
}
.contact .lede{font-size:var(--fs-body);line-height:32px;font-weight:600;margin-bottom:12px}
.contact address{
  font-size:var(--fs-body);line-height:29px;
  font-weight:600;font-style:normal;margin-bottom:88px;
}
.form{max-width:100%}
.field{margin-bottom:46px}
.field input,.field textarea{
  width:100%;border:0;border-bottom:3px solid var(--ink);
  background:transparent;padding:10px 16px 12px;
  font-family:inherit;font-size:var(--fs-body);font-weight:600;color:var(--ink);
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);font-weight:600}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--blue)}
.field.invalid input,.field.invalid textarea{border-bottom-color:#b00020}
.field.invalid input::placeholder,.field.invalid textarea::placeholder{color:#b00020}
/* hCaptcha renders a fixed 303x78 iframe; give it the field rhythm */
.h-captcha{margin:0 0 40px}
.submit{
  background:none;border:0;border-bottom:5px solid var(--blue);
  color:var(--blue);font-size:30px;font-weight:700;letter-spacing:-.01em;
  padding:0 0 4px;cursor:pointer;
}
.form-note{margin-top:26px;font-size:17px;font-weight:600;line-height:26px}
.form-note.err{color:#b00020}
.form-note.ok{color:var(--blue)}

/* ---------------- 404 ---------------- */
.simple{padding:60px var(--pad-r) 160px var(--pad-l)}
.simple h1{
  color:var(--ink);font-size:var(--fs-display);line-height:var(--lh-display);
  font-weight:700;letter-spacing:-.015em;margin-bottom:24px;
}
.simple p{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600}
.simple a{color:var(--blue);border-bottom:3px solid var(--blue)}

/* ---------------- footer ---------------- */
.site-footer{
  display:flex;align-items:center;gap:36px;
  padding:60px var(--pad-r) 50px var(--pad-l);
  color:var(--blue);font-size:var(--fs-foot);font-weight:600;
}
.socials{display:flex;gap:18px}
.socials a{display:grid;place-items:center;color:var(--blue)}
.socials svg{width:17px;height:17px;fill:currentColor}

/* ---------------- lightbox ---------------- */
.lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(0,0,0,.95);
  display:none;align-items:center;justify-content:center;
  padding:70px 90px;
}
.lb.open{display:flex}
.lb-slot{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lb-slot img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto}
.lb-slot iframe{width:min(1120px,86vw);aspect-ratio:16/9;border:0}
.lb button{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  line-height:1;padding:12px;
}
.lb .lb-close{top:18px;right:24px;font-size:40px}
.lb .lb-prev,.lb .lb-next{top:50%;transform:translateY(-50%);font-size:52px}
.lb .lb-prev{left:16px}
.lb .lb-next{right:16px}
.lb .lb-count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:15px;font-weight:600;letter-spacing:.06em;
}
.lb[data-single="1"] .lb-prev,
.lb[data-single="1"] .lb-next,
.lb[data-single="1"] .lb-count{display:none}

/* ---------------- responsive ---------------- */
@media(max-width:1024px){
  :root{
    --pad-l:50px;--pad-r:50px;--pad-b:100px;--indent:50px;--colw:100%;
    --fs-display:34px;--lh-display:1.2em;
    --fs-nav:28px;
    --fs-body:19px;--lh-body:28px;
    --fs-head:23px;--lh-head:31px;
  }
  .site-header{padding:36px 50px 28px;gap:40px}
  .site-logo img{width:180px}
  .hero{min-height:549px;padding:50px}
  .section-label{font-size:40px}
  .portfolio,.videos{grid-template-columns:repeat(2,1fr)}
  .masonry{grid-template-columns:repeat(2,1fr)}
  .contact{margin-top:0;padding:50px}
  .contact h1{font-size:26px;line-height:36px}
  .split{gap:36px}
  .lb{padding:56px 60px}
}
@media(max-width:767px){
  :root{
    --pad-l:6%;--pad-r:6%;--pad-b:20%;--indent:0px;
    --fs-display:24px;--lh-display:1.3em;
    --fs-nav:24px;
    --fs-body:17px;--lh-body:26px;
    --fs-head:20px;--lh-head:28px;
  }
  .site-header{position:relative;align-items:center;padding:22px 6%;gap:0}
  .site-logo img{width:130px}
  .burger{display:block}
  /* full-bleed blue bands, white text */
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:10;
    flex-direction:column;align-items:stretch;gap:3px;
    background:transparent;padding:0;
  }
  .nav.open{display:flex}
  .nav li{background:var(--blue)}
  .nav a{display:block;color:#fff;padding:9px 6%;font-size:22px;line-height:1.3}
  .hero{min-height:470px;align-items:flex-start;padding:56px 6% 0}
  .section{padding:0 6% 20% 6%}
  .section-label{font-size:38px;line-height:1em}
  .section-intro,.section-body{margin-left:0;width:100%}
  .portfolio,.videos{grid-template-columns:1fr}
  .masonry,.grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:24px}
  .project figure.w35,.project figure.w40,.project figure.w45,
  .project figure.w55,.project figure.w70{max-width:100%}
  .contact{margin-top:0;padding:12% 6% 24% 6%}
  .contact h1{font-size:23px;line-height:32px}
  .submit{font-size:26px}
  .site-footer{padding:40px 6% 34px;flex-wrap:wrap;gap:22px}
  .lb{padding:60px 16px}
  .lb .lb-prev,.lb .lb-next{font-size:38px}
}