.kat-wrap{max-width:960px;margin:0 auto;padding:50px 20px}
.kat-intro{text-align:center;margin-bottom:60px}
.kat-intro h2{font-size:40px;margin:0 0 14px;font-family:Prata,serif;color:#111}
.kat-intro p{color:#777;font-size:16px;max-width:580px;margin:0 auto}
.kat-tl{position:relative;padding-left:50px}
.kat-tl::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:3px;background:#e5e5e5;border-radius:3px}
.kat-prog{position:absolute;left:9px;top:8px;width:3px;height:0;background:#E8461A;border-radius:3px;transition:height .12s linear;z-index:1}
.kat-item{position:relative;margin-bottom:55px;opacity:.35;transition:opacity .5s}
.kat-item.on{opacity:1}
.kat-item:last-child{margin-bottom:10px}
.kat-dot{position:absolute;left:-49px;top:4px;width:19px;height:19px;border-radius:50%;background:#ddd;border:3px solid #fff;box-shadow:0 0 0 2px #ddd;transition:background .4s,box-shadow .4s;z-index:2}
.kat-item.on .kat-dot{background:#E8461A;box-shadow:0 0 0 2px #E8461A}
@keyframes katPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(232,70,26,.8)}50%{transform:scale(1.15);box-shadow:0 0 0 12px rgba(232,70,26,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(232,70,26,0)}}
.kat-dot.pulse{animation:katPulse .9s ease-out forwards}
.kat-item h4{font-size:20px;font-weight:700;margin:0 0 4px;color:#111}
.kat-item .kat-sub{color:#aaa;font-size:14px;font-style:italic;margin:0 0 12px}
.kat-item ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 20px}
.kat-item ul li{font-size:14px;color:#555;display:flex;align-items:flex-start;gap:7px;line-height:1.4}
.kat-item ul li::before{content:'';min-width:7px;width:7px;height:7px;border-radius:50%;background:#E8461A;margin-top:4px;display:inline-block}
@media(max-width:767px){.kat-tl{padding-left:35px}.kat-dot{left:-32px}.kat-item ul{grid-template-columns:1fr}.kat-intro h2{font-size:28px}}

/* Portfolio grid */
.et_pb_portfolio_items{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important}
.et_pb_portfolio_items .et_pb_portfolio_item{margin:0!important;padding:0!important;position:relative}
.et_portfolio_image{position:relative;overflow:hidden;aspect-ratio:4/3;display:block!important}
.et_portfolio_image a{display:block;width:100%;height:100%;position:relative;overflow:hidden}
.et_portfolio_image img{filter:saturate(0);transition:filter .5s ease,transform .6s ease;width:100%;height:100%;object-fit:cover;display:block}
.et_pb_portfolio_item:hover .et_portfolio_image img{filter:saturate(1);transform:scale(1.04)}
.et_portfolio_image .et_overlay{display:none!important}
.et_portfolio_image::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 55%,transparent 100%);opacity:0;transition:opacity .4s ease;z-index:2;pointer-events:none}
.et_pb_portfolio_item:hover .et_portfolio_image::after{opacity:1}
.et_pb_portfolio_item .et_pb_module_header,
.et_pb_portfolio_item .post-meta{position:absolute;left:0;right:0;z-index:3;margin:0;padding:0 22px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.et_pb_portfolio_item .et_pb_module_header{bottom:42px}
.et_pb_portfolio_item .post-meta{bottom:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.et_pb_portfolio_item .post-meta a{white-space:nowrap}
.et_pb_portfolio_item:hover .et_pb_module_header,
.et_pb_portfolio_item:hover .post-meta{opacity:1;transform:translateY(0)}
.et_pb_portfolio_item .et_pb_module_header,
.et_pb_portfolio_item .et_pb_module_header a{color:#fff!important;font-size:15px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:1.5px!important;line-height:1.3!important;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.et_pb_portfolio_item .post-meta,
.et_pb_portfolio_item .post-meta a{color:rgba(255,255,255,.8)!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:2px!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.et_pb_portfolio_filters{text-align:center!important;margin-bottom:40px;padding:15px 0;display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:8px}
.et_pb_portfolio_filter{display:inline-block}
.et_pb_portfolio_filter a{font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:9px 20px;border:1.5px solid #ddd;display:inline-block;transition:all .3s;color:#777;text-decoration:none;border-radius:2px;font-weight:500}
.et_pb_portfolio_filter a:hover{border-color:#FC8D25;color:#FC8D25;text-decoration:none}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active{background:#FC8D25!important;border-color:#FC8D25!important;color:#fff!important;font-weight:600}

/* Single project — full width, no sidebar */
.single-project #sidebar{display:none!important}
.single-project #left-area{width:100%!important;float:none!important;padding:0!important}
.single-project .et_post_meta_wrapper{display:none}
.single-project #main-content .container{max-width:100%!important}

/* Hero section */
.single-project .et_pb_section_0_tb_body{min-height:65vh;display:flex!important;align-items:flex-end;background-size:cover!important;background-position:center!important}
.single-project .et_pb_section_0_tb_body .et_pb_row{width:100%;max-width:1200px;margin:0 auto!important;padding-bottom:50px}
.single-project .et_pb_post_title_0_tb_body h1.entry-title{font-size:52px!important;color:#fff!important;margin-bottom:10px!important;line-height:1.1!important}
.single-project .et_pb_post_title_0_tb_body .et_pb_title_meta_container{display:none}
@media(max-width:980px){.single-project .et_pb_post_title_0_tb_body h1.entry-title{font-size:34px!important}}

/* ── Section 1 — 2-col layout ─────────────────────────────────────────────
   overflow-x:clip clips horizontal bleed without creating a new formatting
   context (unlike overflow:hidden which breaks position:sticky on the left
   column). overflow-y stays visible so sticky scrolls against the page.
   ───────────────────────────────────────────────────────────────────────── */
.single-project .et_pb_section_1_tb_body{
  padding:0!important;
  background-color:#fff!important;
  background-image:none!important;
  overflow-x:clip;
}
.single-project .et_pb_section_1_tb_body .et_pb_row_1_tb_body{
  max-width:100%!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-start!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  overflow-x:clip;
}

/* Left column — exactly 1/3.
   calc(100% / 3) is more precise than 33.333% and avoids sub-pixel rounding.
   box-sizing:border-box includes Divi's padding in the stated width so the
   two columns always add to exactly 100%. align-self:flex-start gives
   position:sticky room to scroll; it stops naturally at the row bottom. */
.single-project .et_pb_section_1_tb_body .et_pb_column_1_tb_body{
  flex:0 0 calc(100% / 3)!important;
  width:calc(100% / 3)!important;
  max-width:calc(100% / 3)!important;
  min-width:0;
  box-sizing:border-box!important;
  position:sticky!important;
  top:130px!important;
  align-self:flex-start!important;
  background-color:#fff!important;
  overflow:hidden;
}

/* Right column — exactly 2/3 */
.single-project .et_pb_section_1_tb_body .et_pb_column_2_tb_body{
  flex:0 0 calc(100% * 2 / 3)!important;
  width:calc(100% * 2 / 3)!important;
  max-width:calc(100% * 2 / 3)!important;
  min-width:0;
  box-sizing:border-box!important;
  padding:0!important;
  background-color:#fff!important;
  overflow:hidden!important;
}

/* ── Project details panel ─────────────────────────────────────────────── */

/* Sticky title — hidden until column enters sticky mode, then slides down */
.kat-sticky-title{
  display:block;
  font-size:25px;
  font-weight:700;
  color:#111;
  line-height:1.25;
  letter-spacing:-0.3px;
  margin-bottom:20px;
  border-left:3px solid #FC8D25;
  padding-left:12px;
  /* collapsed state */
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-10px);
  transition:max-height .45s ease, opacity .35s ease, transform .35s ease;
}
.et_pb_column_1_tb_body.is-sticky .kat-sticky-title{
  max-height:160px;
  opacity:1;
  transform:translateY(0);
}
.kat-sticky-cat{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#FC8D25;
  margin-top:6px;
}

.kat-info-title{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#aaa;margin:0 0 18px;font-weight:600;padding-bottom:12px;border-bottom:1px solid #e8e5e0;display:block}
.kat-proj-desc{font-size:14px;color:#555;line-height:1.7;margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid #e8e5e0}
.kat-proj-details dl{margin:0;padding:0}
.kat-proj-details dt{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#aaa;margin:0 0 3px;font-weight:600}
.kat-proj-details dd{font-size:15px;color:#222;font-weight:600;margin:0 0 18px;line-height:1.35}
.kat-proj-details dd:last-child{margin-bottom:0}

/* Category label below h1 in hero */
.kat-proj-cat{display:block;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#b8a98a;margin-top:8px;margin-bottom:4px}

/* ── Gallery — jQuery Masonry, natural image height ───────────────────── */
.single-project .et_pb_gallery_items{
  display:block!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
.single-project .et_pb_gallery_item{
  display:inline-block!important;
  width:calc(50% - 2px)!important;
  margin:0 0 4px!important;
  padding:0!important;
  float:none!important;
  box-sizing:border-box!important;
  vertical-align:top;
}
.single-project .et_pb_gallery .et_pb_gallery_image{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  overflow:hidden;
  position:relative;
  line-height:0;
}
.single-project .et_pb_gallery .et_pb_gallery_image a{
  display:block!important;
  width:100%!important;
}
.single-project .et_pb_gallery .et_pb_gallery_image img{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  display:block!important;
  object-fit:unset!important;
}

/* Gallery overlay — brand colour on hover */
.single-project .et_pb_gallery .et_pb_gallery_image .et_overlay{
  background-color:rgba(252,141,37,0.82)!important;
  border-color:transparent!important;
}
.single-project .et_pb_gallery .et_pb_gallery_image .et_overlay:before{
  color:#fff!important;
  border-color:#fff!important;
}

/* Pagination hidden */
.single-project .et_pb_gallery .et_pb_gallery_pagination{display:none!important}

/* Magnific Popup — hide image caption/title in lightbox */
.mfp-title{display:none!important}

/* Admin bar — offset fixed header so it clears the 32px bar */
.admin-bar .header-section,
.admin-bar .header-section-fixed{
  top:32px;
}

/* Mobile — single-project layout */
@media(max-width:900px){
  .single-project .et_pb_section_1_tb_body .et_pb_row_1_tb_body{flex-direction:column!important}
  .single-project .et_pb_section_1_tb_body .et_pb_column_1_tb_body{
    position:static!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    padding:36px 6%!important;
    border-bottom:1px solid #eee;
  }
  /* hide sticky title on mobile — column is not sticky, title already in hero */
  .single-project .kat-sticky-title{display:none!important}
  .single-project .et_pb_section_1_tb_body .et_pb_column_2_tb_body{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
  }
  /* 2-column gallery on tablet */
  .single-project .et_pb_gallery_item{width:calc(50% - 2px)!important}
}
@media(max-width:600px){
  /* single-column gallery on small phones */
  .single-project .et_pb_gallery_item{width:100%!important;margin-bottom:4px!important}
}

/* Mobile — portfolio grid */
@media(max-width:767px){
  .et_pb_portfolio_items{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:480px){
  .et_pb_portfolio_items{grid-template-columns:1fr!important}
}

/* Divi hero padding for fixed header on inner pages */
.et-tb-has-header:not(.home) .et-l--body>.et_builder_inner_content>.et_pb_section:first-child{padding-top:25vh!important;padding-bottom:8vh!important}
@media(max-width:980px){
  .et-tb-has-header:not(.home) #page-container{padding-top:0!important}
  .et-tb-has-header:not(.home) .et-l--body>.et_builder_inner_content>.et_pb_section:first-child{padding-top:20vh!important;padding-bottom:6vh!important}
}