/* Shared colours and basic layout */
:root { --forest:#0d2824; --cream:#f4efe5; --gold:#c8a66a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--forest); background:var(--cream); font-family:Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,select { font:inherit; cursor:pointer; }
button,a,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,select:focus-visible { outline:3px solid #c8a66a; outline-offset:5px; }
img { display:block; max-width:100%; }
.wrap { width:min(1240px,90%); margin:auto; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:26px 5%; background:var(--forest); color:white; gap:20px; }
.brand { font-size:20px; letter-spacing:6px; }
.navlinks { display:flex; gap:24px; font-size:13px; }
.home-nav { position:absolute; z-index:2; width:100%; background:transparent; }
.hero { min-height:90vh; color:white; background:var(--forest); position:relative; display:flex; align-items:end; }
.hero-art,.hero-shade { position:absolute; inset:0; }
.hero-art img { width:100%; height:100%; object-fit:cover; }
.hero-shade { background:linear-gradient(90deg,rgba(6,25,22,.85),rgba(6,25,22,.12)); }
.hero-inner { position:relative; width:90%; max-width:1240px; margin:auto; padding:160px 0 80px; display:grid; grid-template-columns:2fr 1fr; gap:60px; align-items:end; }
.eyebrow { text-transform:uppercase; letter-spacing:3px; font-size:11px; color:#927348; }
.hero .eyebrow { color:var(--gold); }
h1,h2,h3 { font-family:Georgia,serif; font-weight:normal; }
.hero h1 { font-size:clamp(54px,7vw,104px); line-height:.98; letter-spacing:-4px; margin:24px 0; }
p { line-height:1.7; }
.hero-copy p { max-width:550px; font-size:18px; color:#e0e4df; }
.btn { display:inline-block; padding:16px 22px; border:1px solid var(--gold); background:var(--gold); color:var(--forest); border-radius:30px; font-size:12px; }
.hero-panel { padding:20px; border:1px solid #ffffff55; border-radius:24px; background:#ffffff18; }
.mini-image img { height:190px; width:100%; object-fit:cover; border-radius:14px; }
.hero-panel h3 { font-size:28px; margin-bottom:8px; }
.section { padding:90px 0; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
h2 { font-size:clamp(36px,4vw,60px); line-height:1.08; margin:18px 0 24px; }
.intro img { width:100%; height:420px; object-fit:cover; border-radius:24px; }
.projects { background:#fbf8f1; }
.section-head { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filters button,.toolbar button { border:1px solid #bcc3b9; background:transparent; padding:12px 16px; border-radius:25px; }
.filters button.active { background:var(--forest); color:white; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.project-card { display:block; overflow:hidden; border-radius:20px; background:var(--cream); }
.project-card img { width:100%; height:380px; object-fit:cover; transition:transform .25s; }
.project-card:hover img { transform:scale(1.025); }
.project-body { padding:22px; }
.project-body h3 { font-size:28px; margin:0 0 12px; }
.project-body p { font-size:13px; color:#63716b; }
.project-body span { display:block; margin-top:24px; font-size:13px; }
[hidden] { display:none !important; }
footer { padding:28px 5%; font-size:12px; background:var(--forest); color:#d0d9d3; }
.plan-header { padding:42px 0 24px; }
.plan-header h1 { font-size:clamp(36px,5vw,64px); margin:18px 0; }
.plan-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:24px; margin-bottom:60px; }
.plan-sidebar { background:#e8dfcf; padding:24px; border-radius:16px; }
select { width:100%; padding:13px; margin:12px 0 20px; color:var(--forest); background:white; border:1px solid #b6bdaf; border-radius:5px; }
.plan-sidebar p { font-size:13px; }
.plan-viewer { min-width:0; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.toolbar span { margin-left:auto; font-size:13px; }
.stage { height:65vh; min-height:380px; overflow:auto; background:white; border:1px solid #d9d7cf; border-radius:12px; }
.stage img { width:100%; max-width:none; height:auto; }
.source { display:inline-block; margin-top:20px; text-decoration:underline; font-size:13px; }
.error { padding:20px; }
@media(max-width:850px) { .hero-inner,.intro { grid-template-columns:1fr; gap:30px; } .hero-panel { display:none; } .project-grid { grid-template-columns:repeat(2,1fr); } .plan-layout { grid-template-columns:1fr; } .section-head { align-items:start; flex-direction:column; margin-bottom:30px; } }
@media(max-width:520px) { .project-grid { grid-template-columns:1fr; } .navlinks { gap:14px; font-size:12px; } .brand { font-size:16px; } .section { padding:60px 0; } .hero h1 { letter-spacing:-2px; } .intro img { height:320px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; transition:none !important; } }


/* Portfolio transition polish */
@view-transition { navigation:auto; }
html { scroll-behavior:smooth; }
.project-card[data-location="reem"][href="terrace.html"] { view-transition-name:terrace-card; }
.project-card[data-location="reem"][href="terrace.html"] .project-body span { color:#8b6c38; }
.project-card[data-location="reem"][href="terrace.html"]::after { content:"Flagship interactive experience"; position:absolute; top:16px; left:16px; padding:8px 11px; border-radius:18px; background:#0d2824dd; color:#f4efe5; font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
.project-card { position:relative; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }


/* Homepage intro film */
.intro-video{position:relative;width:100%;height:420px;overflow:hidden;border-radius:24px;background:#102824;isolation:isolate}
.intro-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;pointer-events:none;background:#102824}
.intro-video-poster{position:absolute;inset:0;z-index:1;background:#102824}
.intro-video-poster img{width:100%;height:100%;object-fit:cover;border-radius:0}
.intro-video::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 62%,rgba(5,26,23,.34))}
.intro-video-credit{position:absolute;right:16px;bottom:14px;z-index:5;padding:8px 12px;border-radius:999px;background:rgba(8,35,31,.78);backdrop-filter:blur(8px);color:#f6f1e7;font-size:10px;letter-spacing:.7px;text-transform:uppercase}
@media(max-width:520px){.intro-video{height:320px}.intro-video-credit{right:12px;bottom:12px}}