/* Native, copyable project cards; no image text or carousel dependency. */
.projects-section {
  --projects-gap: clamp(16px, 1.35vw, 28px);
  --projects-visible: 3;
  padding: clamp(52px, 6vw, 116px) clamp(20px, 2.15vw, 44px) clamp(40px, 4vw, 76px);
  background: #fff;
  color: var(--navy);
}
.projects-container { max-width: 1920px; margin: 0 auto; }
.projects-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: clamp(24px, 2.6vw, 50px); }
.projects-heading {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 4.05vw, 78px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--navy);
  background: none;
  -webkit-text-fill-color: currentColor;
  white-space: normal;
  animation: none;
}
.projects-all { display: inline-flex; align-items: center; gap: clamp(16px, 2vw, 36px); flex-shrink: 0; padding: 6px 6px 6px clamp(18px, 1.6vw, 30px); border: 1px solid var(--navy); border-radius: 60px; font-family: var(--display); font-size: clamp(10px, 1.02vw, 17px); font-weight: 600; transition: background .25s, box-shadow .25s, transform .25s; }
.projects-all > span { display: grid; place-items: center; width: clamp(38px, 3.6vw, 62px); height: clamp(38px, 3.6vw, 62px); border-radius: 50%; background: var(--navy); color: #fff; }
.projects-all svg { width: 24px; height: 24px; transition: transform .25s; }
.projects-all:hover, .projects-all:focus-visible { background: #eef7fb; box-shadow: 0 0 24px #7aa7ba55; transform: translateY(-2px); }
.projects-all:hover svg, .projects-all:focus-visible svg { transform: translateX(3px); }
.projects-track { position: relative; display: flex; gap: var(--projects-gap); margin: 0; padding: 8px 0 20px; list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.projects-track::-webkit-scrollbar { display: none; }
.projects-track:focus-visible {   border-radius: 12px; }
.projects-slide { flex: 0 0 calc((100% - (var(--projects-visible) - 1) * var(--projects-gap)) / var(--projects-visible)); min-width: 0; scroll-snap-align: start; }
.projects-card {
  --project-surface: #eaf3f6;
  --project-number-surface: #527b8d;
  --project-number-color: #fff;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 490px;
  aspect-ratio: 520 / 562;
  padding: clamp(16px, 1.55vw, 28px);
  color: var(--navy);
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.projects-card--blue { --project-surface: #527b8d; --project-number-surface: #fff; --project-number-color: #527b8d; color: #fff; }
.projects-card--green { --project-surface: #bce3b0; --project-number-surface: var(--navy); }
.projects-card--sage { --project-surface: #deeedb; --project-number-surface: #3b795c; }
.projects-card--sky { --project-surface: #d4e9f0; }
.projects-card::before { content: ''; position: absolute; z-index: -1; inset: 76px 14px 16px; border-radius: 32px; box-shadow: 0 10px 26px #5f98b650, 0 0 26px #91c9df55; opacity: 0; transition: opacity .32s; pointer-events: none; }
.projects-card-surface { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.projects-card-surface path { fill: var(--project-surface); }
.projects-category-header { display: grid; grid-template-columns: clamp(38px, 14cqw, 72px) minmax(0,1fr); gap: clamp(10px, 3cqw, 18px); align-items: start; min-height: 3.35em; font-size: clamp(17px, 7.1cqw, 40px); }
.projects-number { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--project-number-surface); color: var(--project-number-color); font-family: var(--display); font-size: clamp(13px, 4.6cqw, 27px); font-weight: 600; }
.projects-category-title { margin: 3px 0 0; font-family: var(--display); font-size: inherit; font-weight: 600; line-height: 1.13; letter-spacing: -.035em; }
.projects-category-link { display: block; width: 100%; min-height: 44px; text-align: left; background: none; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; border-radius: 4px; user-select: text; }
.projects-category-link > span { display: block; overflow-wrap: anywhere; }
.projects-category-description { margin: clamp(12px, 3.6cqw, 22px) 0 clamp(18px, 4cqw, 24px); min-height: 3em; font-size: clamp(14px, 4.8cqw, 25px); line-height: 1.38; text-wrap: pretty; }
.projects-category-arrow { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: clamp(44px, 12cqw, 64px); height: clamp(44px, 12cqw, 64px); padding: 0; color: var(--navy); background: #fff; border-radius: 50%; transition: background .25s, box-shadow .25s; }
.projects-category-arrow > svg { width: 25px; height: 25px; transition: transform .25s; }
.projects-category-arrow:hover, .projects-category-arrow:focus-visible { background: #edf8fc; box-shadow: 0 0 20px #7aa7ba70; }
.projects-category-arrow:hover > svg, .projects-category-arrow:focus-visible > svg { transform: translate(2px,-2px); }
.projects-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(10px, 2.1cqw, 14px); height: clamp(222px, 54cqw, 300px); margin-top: auto; }
.projects-project { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-width: 0; padding: clamp(14px, 3.7cqw, 24px); border-radius: clamp(16px, 4.5cqw, 26px); color: var(--navy); background: #fff; text-align: left; user-select: text; box-shadow: 0 2px 7px #002b3c04; transition: background .25s, box-shadow .25s, transform .25s; }
.projects-project-icon { display: grid; place-items: center; width: clamp(42px, 15cqw, 78px); height: clamp(42px, 15cqw, 78px); margin-bottom: clamp(12px, 3cqw, 18px); border-radius: clamp(12px, 3.6cqw, 20px); background: #e4eff4; color: #5e879b; flex-shrink: 0; transition: background .25s, transform .25s; }
.projects-project-icon svg { width: 56%; height: 56%; }
.projects-project-copy { display: flex; flex-direction: column; gap: clamp(7px, 1.7cqw, 10px); width: 100%; min-width: 0; }
.projects-project-title { position: relative; display: block; padding-right: 18px; font-family: var(--display); font-size: clamp(11px, 3.05cqw, 18px); font-weight: 600; line-height: 1.32; letter-spacing: -.035em; overflow-wrap: anywhere; }
.projects-project-title > svg { position: absolute; top: 2px; right: 0; width: 14px; height: 14px; transition: transform .25s; }
.projects-project-description { display: block; font-size: clamp(14px, 3.45cqw, 20px); line-height: 1.38; text-wrap: pretty; }
.projects-archive { align-self: flex-start; padding: 3px 8px; border-radius: 30px; color: #365c6d; background: #e4eff4; font-size: 12px; line-height: 1.25; }
.projects-tiles--three { grid-template-rows: 3fr 2fr; }
.projects-tiles--three .projects-project { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; padding: clamp(12px, 3cqw, 18px); }
.projects-tiles--three .projects-project-icon { width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.projects-tiles--three .projects-project-title { font-size: clamp(11px, 2.7cqw, 17px); padding-right: 14px; }
.projects-tiles--three .projects-project-title > svg { width: 12px; height: 12px; }
.projects-tiles--three .projects-project:last-child { grid-column: 1 / -1; }
.projects-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; width: min(100%,380px); margin: clamp(8px, 1.2vw, 24px) auto 0; }
.projects-page { display: grid; place-items: center; flex: 1; min-width: 28px; min-height: 44px; padding: 12px 4px; background: transparent; border-radius: 10px; }
.projects-page > span { display: block; width: 100%; max-width: 58px; height: 7px; border-radius: 12px; background: #e1edf2; transition: background .25s, box-shadow .25s, transform .25s; }
.projects-page[aria-current="true"] > span { background: var(--navy); }
.projects-page:hover > span, .projects-page:focus-visible > span { background: var(--blue); box-shadow: 0 0 14px #7aa7ba66; transform: scaleY(1.15); }
.projects-status { width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 10px 16px; border-radius: 14px; background: #eaf3f6; color: var(--navy); font-size: 14px; line-height: 1.5; }
.projects-status:empty { display: none; }
.projects-project.is-pending { background: #edf8fc; box-shadow: 0 0 22px #7aa7ba55; }
.projects-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.projects-track.is-dragging * { user-select: none; }
.projects-section--archive { padding: 0 0 30px; }
.projects-section--archive .projects-track { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; }
.projects-section--archive .projects-slide { min-width: 0; }
@media (hover:hover) {
  .projects-card:hover, .projects-card:focus-within { transform: translateY(-3px); }
  .projects-card:hover::before, .projects-card:focus-within::before { opacity: 1; }
  .projects-project:hover, .projects-project:focus-visible { background: #f1faff; box-shadow: 0 8px 20px #4d8da033, 0 0 22px #b3dce955; transform: translateY(-3px); }
  .projects-project:hover .projects-project-icon, .projects-project:focus-visible .projects-project-icon { background: #d2e8f2; transform: translateY(-2px) rotate(-3deg); }
  .projects-project:hover .projects-project-title > svg, .projects-project:focus-visible .projects-project-title > svg { transform: translate(2px,-2px); }
}
@media (max-width:1179px) {
  .projects-section { --projects-visible: 2; }
  .projects-section--archive .projects-track { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .projects-section { --projects-visible: 1; padding: 48px 20px 38px; }
  .projects-header { display: grid; gap: 18px; margin-bottom: 18px; }
  .projects-heading { font-size: clamp(28px, 6.4vw, 42px); line-height: 1.18; }
  .projects-all { justify-self: start; font-size: 11px; gap: 18px; }
  .projects-slide { flex-basis: 88%; }
  .projects-card { min-height: 468px; aspect-ratio: auto; padding: 20px 16px 16px; }
  .projects-category-header { grid-template-columns: clamp(38px, 13cqw, 58px) minmax(0,1fr); font-size: clamp(17px, 7.1cqw, 30px); min-height: 3.35em; }
  .projects-category-title { margin-top: 5px; }
  .projects-category-description { font-size: clamp(15px, 4.8cqw, 20px); margin: 14px 0 20px; min-height: 3em; }
  .projects-category-arrow { width: 44px; height: 44px; }
  .projects-category-arrow > svg { width: 21px; height: 21px; }
  .projects-tiles, .projects-tiles--three { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(2,minmax(0,1fr)); height: 244px; gap: 10px; }
  .projects-tiles--three { grid-template-rows: repeat(3,minmax(0,1fr)); height: 260px; }
  .projects-project, .projects-tiles--three .projects-project { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 16px; }
  .projects-project-icon, .projects-tiles--three .projects-project-icon { width: 42px; height: 42px; margin: 0; border-radius: 12px; }
  .projects-project-title, .projects-tiles--three .projects-project-title { font-size: clamp(12px, 3.9cqw, 15px); padding-right: 15px; }
  .projects-project-copy { gap: 5px; }
  .projects-project-description { font-size: 14px; line-height: 1.3; }
  .projects-project-title > svg { width: 12px; height: 12px; }
  .projects-archive { font-size: 11px; padding: 2px 7px; }
  .projects-section--archive { padding: 0 0 30px; }
  .projects-section--archive .projects-track { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .projects-section--archive .projects-card { min-height: 468px; }
}
/* Homepage editorial carousel. The project archive retains its existing layout. */
.projects-section--featured { background: #f8fbfc; padding-inline: clamp(20px,5.15vw,100px); }
.projects-section--featured .projects-header { align-items: flex-start; gap: 28px; }
.projects-header-copy { min-width: 0; }
.projects-section--featured .projects-heading { font-size: clamp(32px,3.85vw,72px); line-height: 1.1; }
.projects-subtitle { max-width: 790px; margin: 12px 0 0; color: #4d6c7c; font-size: clamp(16px,1.45vw,24px); line-height: 1.5; text-wrap: pretty; }
.projects-section--featured .projects-all { flex-shrink: 0; margin-top: 2px; }
.projects-carousel { position: relative; }
.projects-section--featured .projects-track { padding: 12px 0 26px; }
.projects-section--featured .projects-slide { display: flex; }
.projects-section--featured .projects-card { flex: 1; min-width: 0; }
.projects-section--featured .projects-card { min-height: clamp(510px,34vw,610px); aspect-ratio: auto; padding: clamp(18px,1.7vw,30px); }
.projects-section--featured .projects-category-arrow { display: none; }
.projects-section--featured .projects-category-header { grid-template-columns: clamp(44px,15cqw,76px) minmax(0,1fr); gap: 14px; min-height: 2.75em; font-size: clamp(19px,6.6cqw,36px); padding-right: 12px; }
.projects-section--featured .projects-category-title { margin-top: 5px; }
.projects-section--featured .projects-number { font-size: clamp(14px,4.5cqw,25px); }
.projects-section--featured .projects-category-description { font-size: clamp(16px,4.8cqw,23px); min-height: 3.7em; margin: 16px 0 20px; line-height: 1.4; }
.projects-section--featured .projects-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; height: auto; min-height: 266px; gap: 10px; }
.projects-section--featured .projects-project { display: flex; gap: 0; align-items: stretch; padding: 2px; overflow: hidden; border-radius: 20px; background: #ffffffed; }
.projects-project-photo { display: block; flex-shrink: 0; width: 100%; overflow: hidden; border-radius: 17px 17px 12px 12px; aspect-ratio: 1.4; background: #d2e3eb; }
.projects-project-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.projects-section--featured .projects-project-copy { padding: 13px 12px 16px; gap: 9px; }
.projects-section--featured .projects-project-title { font-size: clamp(12px,3.4cqw,19px); line-height: 1.3; padding-right: 16px; overflow-wrap: normal; }
.projects-section--featured .projects-project-description { font-size: clamp(14px,4cqw,20px); line-height: 1.4; }
.projects-direction { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; color: var(--navy); background: #fff; box-shadow: 0 6px 28px #3c6b8026; transition: box-shadow .25s,opacity .25s,transform .25s; }
.projects-direction--previous { left: -30px; }
.projects-direction--next { right: -30px; }
.projects-direction svg { width: 24px; height: 24px; }
.projects-direction:disabled { opacity: .45; cursor: default; }
.projects-section--featured .projects-page > span { height: 6px; }
@media(hover:hover) {
 .projects-section--featured .projects-project:hover .projects-project-photo img { transform: scale(1.035); }
 .projects-direction:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 26px #6babc46b; }
}
@media(max-width:760px) {
 .projects-section--featured { padding: 44px 20px 32px; }
 .projects-section--featured .projects-header { gap: 18px; }
 .projects-section--featured .projects-heading { font-size: clamp(27px,6.5vw,43px); text-align: center; }
 .projects-subtitle { font-size: 15px; margin-top: 12px; }
 .projects-section--featured .projects-all { min-height: 44px; padding: 4px 5px 4px 16px; font-size: 10px; }
 .projects-section--featured .projects-all > span { width: 34px; height: 34px; }
 .projects-section--featured .projects-slide { flex-basis: 94%; }
 .projects-section--featured .projects-card { min-height: 478px; padding: 20px 16px 16px; }
 .projects-section--featured .projects-category-header { font-size: clamp(19px,6.5cqw,30px); gap: 11px; }
 .projects-section--featured .projects-category-description { font-size: clamp(15px,4.8cqw,20px); margin: 14px 0 18px; min-height: 3.4em; }
 .projects-section--featured .projects-tiles { min-height: 252px; gap: 8px; }
 .projects-section--featured .projects-project { border-radius: 16px; }
 .projects-project-photo { border-radius: 13px 13px 9px 9px; }
 .projects-section--featured .projects-project-copy { padding: 11px 9px 13px; gap: 8px; }
 .projects-section--featured .projects-project-title { font-size: clamp(11px,3.6cqw,15px); padding-right: 13px; }
 .projects-section--featured .projects-project-description { font-size: 13px; }
 .projects-direction { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .projects-card, .projects-project, .projects-project-icon, .projects-all, .projects-page > span,
  .projects-all svg, .projects-category-arrow > svg, .projects-project-title > svg,
  .projects-project-photo img, .projects-direction { transform: none !important; transition: none; }
}
/* Compact homepage directions: photographic centre and two title links. */
.projects-section--featured .projects-card--compact {
 --compact-surface:#e8f3f6;
 min-height:0; height:clamp(380px,28vw,490px); padding:clamp(18px,1.5vw,28px);
 border:1px solid #d7e6ec; border-radius:26px; overflow:hidden; background:var(--compact-surface);
 box-shadow:0 10px 28px #153e4d12;
}
.projects-section--featured .projects-card--blue { --compact-surface:#527f92; }
.projects-section--featured .projects-card--green { --compact-surface:#c6e9bd; }
.projects-section--featured .projects-card--sage { --compact-surface:#deeedb; }
.projects-section--featured .projects-card--sky { --compact-surface:#d4e9f0; }
.projects-section--featured .projects-card--compact::before {
 inset:0; z-index:-1; border-radius:inherit; opacity:1; box-shadow:none;
 background:linear-gradient(180deg,var(--compact-surface) 0%,var(--compact-surface) 18%,transparent 43%,transparent 57%,var(--compact-surface) 82%,var(--compact-surface) 100%);
}
.projects-category-photo { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.projects-section--featured .projects-card--compact .projects-category-arrow { display:grid; top:24px; right:20px; width:38px; height:38px; min-height:38px; background:transparent; color:inherit; border:1.5px solid currentColor; }
.projects-section--featured .projects-card--compact .projects-category-arrow svg { width:21px; height:21px; }
.projects-section--featured .projects-card--compact .projects-category-header { grid-template-columns:clamp(40px,13cqw,62px) minmax(0,1fr); min-height:0; padding-right:40px; gap:12px; align-items:start; font-size:clamp(20px,6.5cqw,34px); }
.projects-section--featured .projects-card--compact .projects-category-title { margin-top:3px; line-height:1.13; }
.projects-section--featured .projects-card--compact .projects-number { font-size:clamp(15px,4.5cqw,23px); }
.projects-section--featured .projects-card--compact .projects-tiles { grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); min-height:0; height:auto; margin-top:auto; gap:9px; }
.projects-section--featured .projects-card--compact .projects-project { display:flex; align-items:stretch; justify-content:center; min-height:46px; padding:12px 15px; border-radius:13px; color:inherit; background:#ffffffdc; box-shadow:none; }
.projects-section--featured .projects-card--blue .projects-project { background:#ffffff29; }
.projects-section--featured .projects-card--compact .projects-project-title { font-size:clamp(12px,3.7cqw,19px); line-height:1.35; padding-right:20px; }
.projects-section--featured .projects-card--compact .projects-project-title > svg { width:16px; height:16px; top:1px; }
.projects-section--featured .projects-card--compact a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
@media(max-width:760px) {
 .projects-section--featured .projects-card--compact { height:390px; padding:18px; border-radius:22px; }
 .projects-section--featured .projects-card--compact .projects-category-header { font-size:clamp(20px,6.7cqw,27px); gap:10px; padding-right:35px; }
 .projects-section--featured .projects-card--compact .projects-category-arrow { top:20px; right:16px; width:34px; height:34px; min-height:34px; }
 .projects-section--featured .projects-card--compact .projects-project { min-height:46px; padding:12px; }
 .projects-section--featured .projects-card--compact .projects-project-title { font-size:clamp(12px,4.2cqw,16px); }
}
/* Small visual bars retain comfortable click targets. */
.projects-pagination { width:max-content; max-width:100%; gap:0; margin-top:0; }
.projects-page { flex:0 0 28px; min-width:28px; min-height:32px; padding:8px 5px; }
.projects-page > span,.projects-section--featured .projects-page > span { width:18px; height:3px; max-width:18px; }