/* Clear glass: the photograph stays visible through a thin, neutral surface. */
.glass {
  background: linear-gradient(135deg,#ffffff0d,transparent 48%,#ffffff05);
  border: 1px solid #ffffff26;
  border-top-color: #ffffff42;
  border-bottom-color: #ffffff1a;
  backdrop-filter: blur(5px) saturate(.95);
  -webkit-backdrop-filter: blur(5px) saturate(.95);
  box-shadow: inset 0 1px 0 #ffffff0d,0 4px 16px #00000012;
}
.button,.mobile-contact button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #ad2025;
  border: 1px solid #c6282847;
  border-top-color: #c6282857;
  background: linear-gradient(135deg,#ffffff08,transparent 60%),#e539350d;
  box-shadow: inset 0 1px 0 #ffffff12,0 4px 14px #00000008;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .25s,box-shadow .25s,border-color .25s;
}
.button::before,.mobile-contact button::before {
  content: none;
}
.button::after {
  content: '';
  position: absolute;
  inset: -70% -40%;
  transform: translateX(-85%) rotate(-22deg);
  background: linear-gradient(90deg,transparent 40%,#ffffff12 50%,transparent 60%);
  transition: transform .65s;
  pointer-events: none;
}
.hero .button:not(.secondary),.nav-cta,.contact-section .button,.mobile-contact button {
  color:#ff817a;
  background:linear-gradient(135deg,#ffffff08,transparent 60%),#e5393512;
  border-color:#ef625a61;
  border-top-color:#ffaaa361;
}
.button.secondary {
  color:#fff;
  background: linear-gradient(135deg,#ffffff09,transparent 65%),#ffffff03;
  border-color: #ffffff29;
  border-top-color: #ffffff3d;
  box-shadow: inset 0 1px 0 #ffffff08,0 4px 16px #0000000d;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.button:active,.mobile-contact button:active {transform:translateY(1px)}
.filter-tabs button {
  background: linear-gradient(135deg,#ffffff12,#ffffff03 55%,#ffffff09);
  border-color: #ffffff28;
  border-top-color: #ffffff50;
  box-shadow: inset 0 1px 0 #ffffff0d,0 4px 10px #0002;
}
.filter-tabs button.active {
  color:#191919;
  background:linear-gradient(140deg,#fff,#ffffffd9 60%,#fff);
  border-color:#fff;
  box-shadow:inset 0 -2px 3px #00000012,0 5px 18px #0003;
}
.map-reset {
  background:linear-gradient(135deg,#ffffff30,#ffffff10);
  border-color:#ffffff66;
  box-shadow:inset 0 1px 0 #ffffff29,0 4px 14px #00000012;
  color:#161616;
}
.project-item {
  border:1px solid #00000009;
  border-top-color:#fff;
  border-radius:10px;
  background:linear-gradient(145deg,#fff,#ffffff70);
  box-shadow:inset 0 1px 0 #fff,0 3px 8px #00000004;
  margin-bottom:5px;
  transition:background .2s,border-color .2s;
}
.project-item:hover,.project-item.selected {
  background:linear-gradient(135deg,#fff,#ededed);
  border-color:#00000018;
}
.project-item.selected {box-shadow:inset 3px 0 0 var(--red),0 3px 10px #00000008}

/* A light tint and a text shadow keep captions legible without opaque panels. */
.featured-card {
  position:relative;
  height:410px;
  border-radius:22px;
  border:1px solid #ffffff33;
  background:#202020;
  box-shadow:0 8px 24px #00000012;
  transition:transform .3s,box-shadow .3s;
}
.featured-card .photo-frame {position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit}
.featured-card .photo-frame>img {object-position:50% 35%}
.featured-card .photo-frame::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,#ffffff04,transparent 35%);
  box-shadow:inset 0 0 0 1px #ffffff1a;
}
.featured-card .photo-tag {border-radius:9px;background-color:#00000026;z-index:1;text-shadow:0 1px 3px #000b}
.featured-card .circle-arrow {top:16px;bottom:auto;width:42px;height:42px;z-index:1;background-color:#00000014;transition:background-color .25s,box-shadow .25s}
.project-card-content {
  position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  padding:17px 18px 14px;border-radius:16px;color:#fff;
  background-color:#00000029;
  backdrop-filter:blur(4px) brightness(.82);
  -webkit-backdrop-filter:blur(4px) brightness(.82);
  text-shadow:0 1px 3px #000b,0 2px 10px #0006;
  text-align:left;
}
.project-card-content .project-meta {color:#fff;margin:0 0 11px;font-size:8px;letter-spacing:.45px;gap:8px}
.project-card-content h3 {font-size:21px;line-height:1.2;letter-spacing:-.6px;min-height:2.4em}
.project-card-content .view-project {color:#fff;border-bottom:0;border-top:1px solid #ffffff24;margin-top:12px;padding:9px 0 0}
.project-card-content .view-project>span {font-size:19px;line-height:1}

/* The portrait film is the hero's focal point. */
.hero {background:#0c0c0c;min-height:0}
.hero-atmosphere {position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 82% 42%,#ffffff14,transparent 48%),linear-gradient(130deg,#080808,#161616 75%,#0b0b0b)}
.hero-atmosphere::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 7%,#0b0b0bc9 35%,transparent 72%)}
.hero-atmosphere>svg {width:100%;height:100%;stroke:#ffffff17;stroke-width:1;fill:none}
.hero-inner {min-height:0;padding-top:133px;grid-template-columns:minmax(0,1fr) 300px;column-gap:80px;align-items:center;align-content:start}
.hero h1 {font-size:clamp(54px,5.5vw,84px)}
.hero-copy {padding:25px 0}
.hero-film {width:300px;justify-self:end;position:relative}
.video-shell {padding:6px;border-radius:27px;background-color:transparent;box-shadow:inset 0 1px 0 #ffffff0d,0 20px 50px #0004}
.video-stage {position:relative;aspect-ratio:9/16;border-radius:21px;overflow:hidden;background:#161616}
.video-poster {position:relative;display:block;width:100%;height:100%;padding:0;background:#161616;color:#fff;text-align:left;border-radius:inherit;overflow:hidden}
.video-poster>img {width:100%;height:100%;object-fit:cover;transition:transform .6s}
.video-poster::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0004,transparent 25%,transparent 45%,#000000c9)}
.video-label {position:absolute;top:17px;left:17px;z-index:1;padding:7px 11px;font-size:8px;font-weight:700;letter-spacing:1.2px;border-radius:9px;background-color:#0000001a;text-shadow:0 1px 3px #000a}
.video-play {position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:68px;height:68px;z-index:1;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#0000000d;transition:background-color .25s,box-shadow .25s}
.video-play svg {width:27px;height:27px;fill:#fff;stroke:none;transform:translateX(2px)}
.video-caption {position:absolute;left:22px;right:22px;bottom:26px;z-index:1;display:grid;gap:16px}
.video-caption strong {font-size:30px;font-weight:600;line-height:1.12;letter-spacing:-1px}
.video-caption>span {display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#eee}
.video-caption>span>span {font-size:21px;line-height:1}
.video-stage iframe {position:absolute;inset:0;border:0;width:100%;height:100%}
.video-source {display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;font-size:9px;color:#bdbdbd}
.video-source:hover {color:#fff}
.hero-bottom {margin-top:30px;padding:20px 0}

@media(hover:hover) and (pointer:fine) {
  .button:hover,.white-button:hover {background:linear-gradient(135deg,#ffffff0a,transparent 60%),#e5393524;box-shadow:inset 0 1px 0 #ffffff12,0 5px 18px #00000010;transform:translateY(-2px)}
  .button:hover::after {transform:translateX(85%) rotate(-22deg)}
  .button.secondary:hover {background:linear-gradient(135deg,#ffffff10,transparent 65%),#ffffff06;box-shadow:inset 0 1px 0 #ffffff0d,0 5px 18px #00000012}
  .featured-card:hover {transform:translateY(-5px);box-shadow:0 22px 40px #00000026,0 2px 5px #00000017}
  .featured-card:hover .circle-arrow,.video-poster:hover .video-play {background-color:#c6282838;border-color:#ffffff4d;box-shadow:inset 0 1px 0 #ffffff12,0 5px 18px #0002}
  .video-poster:hover>img {transform:scale(1.035)}
}
@media(min-width:1600px) {.hero-inner {padding-top:145px}.hero h1 {font-size:88px}.hero-film {width:320px}.hero-inner {grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:1100px) {.hero-inner {column-gap:35px;grid-template-columns:minmax(0,1fr) 270px}.hero-film {width:270px}.hero h1 {font-size:64px}.project-card-content {padding:15px 13px 12px}.project-card-content h3 {font-size:19px}.project-card-content .project-meta {font-size:7px;flex-direction:column;gap:5px}.featured-card {height:400px}}
@media(max-width:800px) {.hero-inner {padding-top:120px;grid-template-columns:minmax(0,1fr) 240px;column-gap:25px}.hero-film {width:240px}.hero h1 {font-size:48px;letter-spacing:-2.5px}.hero-copy>p {font-size:14px}.hero-actions {flex-direction:column;align-items:flex-start}.hero-assurance {flex-wrap:wrap;gap:8px 12px}.video-caption strong {font-size:25px}.video-play {width:58px;height:58px}.featured-grid {gap:15px}.project-card-content h3 {font-size:18px}.project-card-content {left:8px;right:8px;bottom:8px}.featured-card .circle-arrow {top:12px;right:12px;width:36px;height:36px}.featured-card .photo-tag {top:12px;left:12px}.featured-card {height:380px}}
@media(max-width:600px) {.hero-inner {grid-template-columns:1fr;gap:0;padding-top:118px}.hero-copy {padding:12px 0 28px}.hero h1 {font-size:57px;letter-spacing:-3.7px}.hero-actions {flex-direction:row;align-items:stretch}.hero-film {width:min(270px,100%);justify-self:center}.hero-assurance {flex-wrap:nowrap;font-size:8px}.hero-bottom {margin-top:24px}.video-caption strong {font-size:29px}.hero-atmosphere::after {background:linear-gradient(180deg,#0b0b0b80,transparent)}.project-card-content {left:12px;right:12px;bottom:12px;padding:18px}.project-card-content .project-meta {font-size:8px;flex-direction:row;gap:8px}.project-card-content h3 {font-size:23px;min-height:0}.featured-card {height:410px}.featured-card .circle-arrow {top:16px;right:16px;width:42px;height:42px}.featured-card .photo-tag {top:16px;left:16px}.video-source {font-size:10px}}
@media(prefers-reduced-motion:reduce) {.button:hover,.featured-card:hover,.button:active,.mobile-contact button:active {transform:none}.featured-card:hover .photo-frame>img,.video-poster:hover>img {transform:none}.button::after {display:none}}
@media(max-width:600px) {.hero h1 {font-size:clamp(40px,12.7vw,50px);letter-spacing:-.065em}.featured-grid {grid-template-columns:1fr}}
@media(max-width:360px) {.hero-actions {flex-wrap:wrap}.hero-actions .button {width:100%}.hero-assurance {flex-wrap:wrap}.project-card-content .project-meta {flex-wrap:wrap}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {.project-card-content {background-color:#222}.glass.secondary,.video-label,.video-play {background-color:#333}.video-shell {background-color:#282828}}