/**
 * Portfolio v2 — 2026/10/18.
 * Scoped design, aligned with the approved editorial pages and price list.
 * Grid: 3/2/1 cards, 24px desktop gap, responsive at 1100/720/480.
 * Palette: ink #243239, blue #315ecb, green #2ebe63, surface #f3f6f9.
 */
.se-portfolio { color: #243239; }
.se-portfolio [hidden] { display: none !important; }
.se-portfolio a:focus-visible, .se-portfolio button:focus-visible { outline: 3px solid #315ecb !important; outline-offset: 3px; }
.se-portfolio-hero { padding: 36px 0 48px; border-bottom: 1px solid #dfe8f0; background: #f3f6f9; }
.se-portfolio-hero .container::before,.se-portfolio-hero .container::after { content: none; }
.se-portfolio-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; color: #84929e; font-size: 13px; line-height: 1.5; }
.se-portfolio-breadcrumbs a { color: #637584; text-decoration: none; }
.se-portfolio-breadcrumbs a:hover { color: #315ecb; }
.se-portfolio-eyebrow { display: block; color: #315ecb; font: 700 12px/1.5 Arial,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.se-portfolio-hero h1 { max-width: 1040px; margin: 12px 0 17px; color: #243239; font: 700 clamp(38px,4.5vw,56px)/1.12 'Roboto Condensed',Arial,sans-serif; overflow-wrap: anywhere; }
.se-portfolio-hero p { max-width: 760px; margin: 0; color: #576b78; font: 400 16px/1.8 Arial,sans-serif; }
.se-portfolio-hero__facts { display: flex; gap: 0; flex-wrap: wrap; width: fit-content; margin-top: 30px; }
.se-portfolio-hero__facts > div { display: flex; align-items: center; gap: 12px; padding: 0 26px; border-right: 1px solid #d2dfeb; }
.se-portfolio-hero__facts > div:first-child { padding-left: 0; }
.se-portfolio-hero__facts > div:last-child { border-right: 0; }
.se-portfolio-hero__facts strong { display: block; color: #315ecb; font: 700 34px/1 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-hero__facts span { display: block; max-width: 120px; color: #607584; font: 400 12px/1.35 Arial,sans-serif; }
.se-portfolio-section { padding-top: 54px; padding-bottom: 76px; }
.se-portfolio-section__heading,.se-portfolio-gallery__head,.se-portfolio-related__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.se-portfolio-section__heading h2,.se-portfolio-related h2,.se-portfolio-gallery h2 { margin: 9px 0 0; color: #243239; font: 700 32px/1.2 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-section__heading p { margin: 0 0 2px; color: #71828d; font-size: 14px; }
.se-portfolio-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.se-portfolio-filters button { display: inline-flex; gap: 12px; align-items: center; justify-content: center; min-height: 43px; padding: 10px 16px; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; color: #526877; font: 700 13px/1.2 Arial,sans-serif; cursor: pointer; transition: background .17s,border-color .17s,color .17s; }
.se-portfolio-filters button span { padding: 3px 7px; border-radius: 5px; background: #edf2f7; color: #698091; font-size: 11px; }
.se-portfolio-filters button:hover { border-color: #afc2e6; color: #315ecb; }
.se-portfolio-filters button.is-active { border-color: #315ecb; background: #315ecb; color: #fff; }
.se-portfolio-filters button.is-active span { color: #315ecb; background: #fff; }
.se-portfolio-filter-status { margin: -6px 0 24px; font: 400 13px/1.5 Arial,sans-serif; color: #6a7f8c; }
.se-portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: stretch; }
.se-portfolio-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #dfe7ed; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(29,52,73,.035); transition: box-shadow .2s ease,transform .2s ease,border-color .2s ease; }
.se-portfolio-card:hover { transform: translateY(-3px); border-color: #bbcee5; box-shadow: 0 12px 36px rgba(31,53,80,.10); }
.se-portfolio-card__visual { position: relative; display: flex; align-items: center; justify-content: center; height: 234px; flex: 0 0 234px; overflow: hidden; background: linear-gradient(125deg,#dce9f8,#eaf2fb); color: #7297c3; }
.se-portfolio-card__visual::after { content: ''; position: absolute; inset: 54% 0 0; background: linear-gradient(to top,rgba(11,32,56,.3),transparent); pointer-events: none; }
.se-portfolio-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.se-portfolio-card:hover .se-portfolio-card__image { transform: scale(1.05); }
.se-portfolio-card__placeholder { display: inline-flex; width: 110px; height: 110px; justify-content: center; align-items: center; color: #86a7d0; }
.se-portfolio-card__placeholder svg { display: block; width: 94px; height: 94px; }
.se-portfolio-card__category { position: absolute; z-index: 1; top: 17px; left: 17px; padding: 8px 11px; border-radius: 6px; background: rgba(255,255,255,.96); box-shadow: 0 2px 10px rgba(20,41,69,.07); color: #315ecb; font: 700 11px/1.3 Arial,sans-serif; }
.se-portfolio-card__zoom { position: absolute; right: 17px; bottom: 16px; z-index: 1; display: flex; width: 35px; height: 35px; align-items: center; justify-content: center; border: 1px solid #ffffff60; border-radius: 50%; background: rgba(25,46,67,.55); color: #fff; font-size: 18px; }
.se-portfolio-card__body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding: 25px 26px 22px; }
.se-portfolio-card__client { display: block; margin-bottom: 12px; color: #278d55; font: 700 11px/1.5 Arial,sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.se-portfolio-card h3 { margin: 0 0 15px; font: 700 23px/1.27 'Roboto Condensed',Arial,sans-serif; overflow-wrap: anywhere; }
.se-portfolio-card h3 a { color: #243239; text-decoration: none; }
.se-portfolio-card h3 a:hover { color: #315ecb; }
.se-portfolio-card p { margin: 0 0 20px; color: #60717c; font: 400 14px/1.65 Arial,sans-serif; overflow-wrap: anywhere; }
.se-portfolio-card__metrics { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: center; margin-top: auto; padding-bottom: 20px; color: #607584; font: 500 13px/1.4 Arial,sans-serif; }
.se-portfolio-card__metrics span { display: inline-flex; align-items: center; gap: 7px; }
.se-portfolio-card__metrics svg { display: block; width: 16px; height: 16px; color: #315ecb; }
.se-portfolio-card__metrics .se-portfolio-card__price { color: #243239; font-weight: 700; }
.se-portfolio-card__read { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 17px; border-top: 1px solid #eaf0f5; color: #315ecb; font: 700 13px/1.5 Arial,sans-serif; text-decoration: none; }
.se-portfolio-card__read:hover { color: #1f449e; }
.se-portfolio-card__read span { font-size: 23px; line-height: 1; }
.se-portfolio-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding-top: 34px; }
.se-portfolio-pagination .page-numbers { display: inline-flex; min-height: 42px; min-width: 42px; align-items: center; justify-content: center; padding: 8px 13px; border-radius: 7px; border: 1px solid #dce6ee; color: #315ecb; text-decoration: none; }
.se-portfolio-pagination .page-numbers.current { color: #fff; background: #315ecb; border-color: #315ecb; }
.se-portfolio-empty { padding: 28px; border-radius: 9px; border: 1px dashed #bfccdb; background: #f8fafc; color: #607584; }
.se-portfolio-documents { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-top: 50px; padding: 30px 34px; border-radius: 12px; background: #f1f6fa; border: 1px solid #dfebf4; }
.se-portfolio-documents__icon { display: flex; flex: 0 0 62px; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 13px; background: #fff; color: #315ecb; }
.se-portfolio-documents__icon svg { width: 35px; height: 35px; }
.se-portfolio-documents > div { flex: 1 1 320px; min-width: 0; }
.se-portfolio-documents h2 { margin: 7px 0 7px; color: #243239; font: 700 25px/1.25 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-documents p { margin: 0; max-width: 600px; color: #607584; font: 400 14px/1.65 Arial,sans-serif; }
.se-portfolio-documents > a { display: inline-flex; min-height: 46px; align-items: center; gap: 20px; justify-content: space-between; padding: 12px 18px; background: #315ecb; color: #fff; border-radius: 7px; text-decoration: none; font-weight: 700; font-size: 13px; }
.se-portfolio-documents > a:hover { background: #254caa; }
.se-portfolio-documents > a span { font-size: 18px; }
/* Individual project. */
.se-portfolio-hero--detail { padding-top: 30px; padding-bottom: 50px; }
.se-portfolio-detail-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 45px; align-items: center; }
.se-portfolio-detail-hero__body { min-width: 0; }
.se-portfolio-hero--detail h1 { font-size: clamp(32px,3.5vw,48px); }
.se-portfolio-detail-hero__image { display: flex; justify-content: center; align-items: center; overflow: hidden; min-height: 325px; height: 355px; border-radius: 12px; background: linear-gradient(135deg,#dceaf9,#eaf2fb); box-shadow: 0 12px 30px rgba(29,52,73,.09); }
.se-portfolio-detail-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.se-portfolio-hero__facts--detail { gap: 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #dae5ef; }
.se-portfolio-hero__facts--detail > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0 24px 0 0; }
.se-portfolio-hero__facts--detail span { max-width: none; color: #708494; font-size: 12px; }
.se-portfolio-hero__facts--detail strong { color: #243239; font: 700 19px/1.25 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-detail-content { padding-top: 56px; padding-bottom: 72px; }
.se-portfolio-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 315px; gap: 58px; align-items: start; }
.se-portfolio-story { min-width: 0; }
.se-portfolio-story h2 { margin: 10px 0 24px; color: #243239; font: 700 32px/1.2 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-story__text { color: #455965; font: 400 16px/1.85 Arial,sans-serif; overflow-wrap: anywhere; }
.se-portfolio-story__text p { margin: 0 0 22px; }
.se-portfolio-story__text h2 { margin: 34px 0 18px; font-size: 27px; }
.se-portfolio-story__text h3 { margin: 28px 0 16px; font: 700 23px/1.28 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-story__text h4 { font: 700 19px/1.3 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-story__text ul,.se-portfolio-story__text ol { margin: 0 0 22px; padding-left: 24px; }
.se-portfolio-story__text li { margin-bottom: 8px; }
.se-portfolio-story__text blockquote { margin: 22px 0; padding: 15px 21px; background: #f3f7fb; border-left: 3px solid #2ebe63; color: #415965; }
.se-portfolio-story__text img { max-width: 100%; height: auto; border-radius: 8px; }
.se-portfolio-story__text a { color: #315ecb; text-decoration: underline; }
.se-portfolio-info { position: sticky; top: 120px; padding: 26px; border: 1px solid #dfe8ef; border-radius: 12px; background: #f7fafc; }
.se-portfolio-info h2 { margin: 0 0 18px; color: #243239; font: 700 24px/1.25 'Roboto Condensed',Arial,sans-serif; }
.se-portfolio-info > div { display: flex; flex-direction: column; gap: 7px; padding: 15px 0; border-bottom: 1px solid #e1e9f0; }
.se-portfolio-info > div > span { color: #748492; font: 400 12px/1.4 Arial,sans-serif; }
.se-portfolio-info strong { color: #344c5c; font: 600 14px/1.6 Arial,sans-serif; overflow-wrap: anywhere; }
.se-portfolio-info > a { display: inline-block; margin-top: 21px; color: #315ecb; font: 700 14px/1.4 Arial,sans-serif; text-decoration: none; }
.se-portfolio-info > a:hover { text-decoration: underline; }
.se-portfolio-gallery { margin-top: 56px; padding-top: 45px; border-top: 1px solid #e1e9ef; }
.se-portfolio-gallery__head { margin-bottom: 24px; }
.se-portfolio-gallery__count { color: #70818e; font-size: 13px; }
.se-portfolio-gallery__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.se-portfolio-gallery__grid > a { display: block; position: relative; height: 225px; overflow: hidden; border-radius: 9px; background: #eaf1f8; }
.se-portfolio-gallery__grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.se-portfolio-gallery__grid > a:hover img { transform: scale(1.035); }
.se-portfolio-gallery__grid > a > span { position: absolute; z-index: 1; right: 12px; bottom: 12px; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(22,38,57,.78); color: #fff; font-size: 18px; }
.se-portfolio-related { margin-top: 56px; padding-top: 45px; border-top: 1px solid #e1e9ef; }
.se-portfolio-related__head > a { color: #315ecb; font-size: 14px; font-weight: 700; text-decoration: none; }
.se-portfolio-related__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.se-portfolio-related__card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e1e8ef; border-radius: 11px; color: #243239; text-decoration: none; background: #fff; transition: box-shadow .2s; }
.se-portfolio-related__card:hover { box-shadow: 0 9px 24px rgba(31,53,80,.09); }
.se-portfolio-related__card > img { display: block; width: 100%; height: 145px; object-fit: cover; }
.se-portfolio-related__card > div { position: relative; padding: 19px 42px 21px 20px; }
.se-portfolio-related__card > div > span:first-child { display: block; margin-bottom: 8px; color: #278d55; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.se-portfolio-related__card strong { display: block; color: #243239; font: 700 19px/1.3 'Roboto Condensed',Arial,sans-serif; overflow-wrap: anywhere; }
.se-portfolio-related__arrow { position: absolute; right: 20px; bottom: 20px; color: #315ecb; font-size: 24px; }
/* Gallery: native dialog isolates scroll, focus and keyboard navigation. */
html.se-portfolio-lightbox-open,html.se-portfolio-lightbox-open body { overflow: hidden !important; }
dialog.se-portfolio-lightbox { box-sizing: border-box; overflow: hidden; position: fixed; max-width: none; max-height: none; width: min(1100px,calc(100vw - 48px)); height: min(780px,calc(100dvh - 48px)); padding: 56px 60px; border: 1px solid #ffffff30; border-radius: 12px; background: #16222e; color: #fff; box-shadow: 0 24px 80px #0006; }
dialog.se-portfolio-lightbox::backdrop { background: rgba(9,18,29,.91); }
.se-portfolio-lightbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; object-fit: contain; }
.se-portfolio-lightbox__close,.se-portfolio-lightbox__prev,.se-portfolio-lightbox__next { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ffffff55; border-radius: 50%; background: #ffffff20; color: #fff; font: 30px/1 Arial,sans-serif; cursor: pointer; }
.se-portfolio-lightbox__close:hover,.se-portfolio-lightbox__prev:hover,.se-portfolio-lightbox__next:hover { background: #315ecb; }
.se-portfolio-lightbox__close { right: 12px; top: 12px; }
.se-portfolio-lightbox__prev,.se-portfolio-lightbox__next { top: 50%; transform: translateY(-50%); }
.se-portfolio-lightbox__prev { left: 8px; }
.se-portfolio-lightbox__next { right: 8px; }
.se-portfolio-lightbox__counter { position: absolute; left: 0; bottom: 13px; width: 100%; color: #c2ced9; font-size: 13px; text-align: center; }
@media (max-width: 1100px) {
  .se-portfolio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .se-portfolio-detail-hero { gap: 28px; }
  .se-portfolio-detail-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 30px; }
  .se-portfolio-gallery__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .se-portfolio-hero { padding: 22px 0 34px; }
  .se-portfolio-breadcrumbs { margin-bottom: 22px; }
  .se-portfolio-hero p { font-size: 15px; }
  .se-portfolio-hero__facts { margin-top: 24px; }
  .se-portfolio-hero__facts > div { padding: 0 17px; }
  .se-portfolio-hero__facts strong { font-size: 29px; }
  .se-portfolio-section { padding-top: 32px; padding-bottom: 44px; }
  .se-portfolio-section__heading h2,.se-portfolio-gallery h2,.se-portfolio-related h2 { font-size: 27px; }
  .se-portfolio-filters { flex-wrap: nowrap; margin-left: -15px; margin-right: -15px; padding: 0 15px 8px; overflow-x: auto; scrollbar-width: thin; }
  .se-portfolio-filters button { white-space: nowrap; flex: 0 0 auto; }
  .se-portfolio-grid { gap: 16px; }
  .se-portfolio-card__visual { height: 200px; flex-basis: 200px; }
  .se-portfolio-card__body { padding: 20px; }
  .se-portfolio-card h3 { font-size: 21px; }
  .se-portfolio-documents { margin-top: 32px; padding: 22px; gap: 16px; }
  .se-portfolio-documents__icon { width: 50px; height: 50px; flex-basis: 50px; }
  .se-portfolio-documents > a { width: 100%; justify-content: center; }
  .se-portfolio-detail-hero { grid-template-columns: 1fr; gap: 27px; }
  .se-portfolio-detail-hero__image { height: 280px; min-height: 0; }
  .se-portfolio-detail-content { padding-top: 34px; padding-bottom: 44px; }
  .se-portfolio-detail-layout { grid-template-columns: 1fr; gap: 30px; }
  .se-portfolio-info { position: static; }
  .se-portfolio-story h2 { font-size: 27px; }
  .se-portfolio-story__text { font-size: 15px; }
  .se-portfolio-gallery,.se-portfolio-related { margin-top: 36px; padding-top: 32px; }
  .se-portfolio-gallery__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .se-portfolio-gallery__grid > a { height: 180px; }
  .se-portfolio-related__grid { gap: 12px; }
  .se-portfolio-related__card > img { height: 125px; }
}
@media (max-width: 540px) {
  .se-portfolio-grid { grid-template-columns: 1fr; }
  .se-portfolio-card__visual { height: 235px; flex-basis: 235px; }
  .se-portfolio-card h3 { font-size: 23px; }
  .se-portfolio-hero__facts > div { gap: 8px; padding: 0 12px; }
  .se-portfolio-detail-hero__image { height: 240px; }
  .se-portfolio-gallery__grid > a { height: 135px; }
  .se-portfolio-related__grid { grid-template-columns: 1fr; }
  .se-portfolio-related__card { flex-direction: row; min-height: 115px; }
  .se-portfolio-related__card > img { flex: 0 0 116px; width: 116px; height: auto; object-fit: cover; }
  .se-portfolio-related__card > div { flex: 1; }
  dialog.se-portfolio-lightbox { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 56px 38px; }
  .se-portfolio-lightbox__prev,.se-portfolio-lightbox__next { width: 32px; height: 32px; }
  .se-portfolio-lightbox__prev { left: 2px; } .se-portfolio-lightbox__next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .se-portfolio-card,.se-portfolio-card__image,.se-portfolio-related__card,.se-portfolio-gallery__grid img,.se-portfolio-filters button { transition: none; }
}