:root { --bg:#f2f3ee; --fg:#163127; --accent:#6f927b; --soft:#dbe5dd; --serif:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif; --sans:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--fg); background:var(--bg); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.sample-label { position:fixed; inset:0 0 auto; z-index:10; min-height:35px; padding:.55rem 4vw; color:#f7f4ed; background:#0c0a08; display:flex; justify-content:space-between; gap:1rem; font-size:.62rem; font-weight:800; letter-spacing:.14em; }
.sample-label a { text-decoration:none; }
.site-nav { position:absolute; top:35px; left:0; right:0; z-index:5; min-height:76px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid currentColor; }
.logo { font-family:var(--serif); font-size:1.15rem; font-weight:700; letter-spacing:.08em; }
.site-nav div { display:flex; gap:2rem; font-size:.66rem; font-weight:800; letter-spacing:.12em; }
.sample-hero { position:relative; min-height:770px; height:100svh; padding:135px 4vw 6vh; display:grid; grid-template-columns:1fr 1fr; align-items:end; overflow:hidden; }
.sample-hero img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.sample-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 42%,transparent 72%); }
.hero-copy { max-width:660px; }
.kicker { margin:0 0 1.3rem; font-size:.68rem; font-weight:800; letter-spacing:.17em; }
h1 { margin:0; font-family:var(--serif); font-size:clamp(3.8rem,8vw,8.2rem); font-weight:400; line-height:.87; letter-spacing:-.07em; }
.lead { max-width:460px; margin:2.2rem 0 0; font-size:.92rem; line-height:2; }
.outline-link { display:inline-flex; margin-top:2rem; padding:.8rem 1.2rem; border:1px solid currentColor; text-decoration:none; font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.sample-meta { align-self:end; justify-self:end; width:min(400px,100%); padding:1.6rem; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); }
.sample-meta div { padding:.8rem 0; border-bottom:1px solid color-mix(in srgb,var(--fg) 22%,transparent); display:grid; grid-template-columns:1fr 1fr; gap:1rem; font-size:.72rem; }
.sample-meta span { opacity:.58; }
.direction { padding:clamp(5rem,9vw,9rem) 4vw; display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; }
.direction p { margin:0; font-size:.7rem; font-weight:800; letter-spacing:.15em; }
.direction h2 { max-width:820px; margin:0; font-family:var(--serif); font-size:clamp(2.2rem,4.7vw,5rem); font-weight:400; line-height:1.2; letter-spacing:-.055em; }
.palette { margin-top:2.5rem; display:flex; gap:.7rem; }
.palette i { width:38px; height:38px; border-radius:50%; border:1px solid color-mix(in srgb,var(--fg) 20%,transparent); }
.back-cta { padding:clamp(4.5rem,8vw,8rem) 4vw; color:#f4f0e8; background:#0c0a08; text-align:center; }
.back-cta p { color:#b99b70; font-size:.68rem; font-weight:800; letter-spacing:.17em; }
.back-cta h2 { margin:1rem auto 2rem; font-family:var(--serif); font-size:clamp(2rem,4vw,4.2rem); font-weight:400; }
.back-cta a { display:inline-block; padding:1rem 1.5rem; border:1px solid rgba(255,255,255,.5); text-decoration:none; font-size:.8rem; font-weight:800; }

.corporate { --bg:#080a0d; --fg:#eef3ff; --accent:#2584ff; --soft:#0d2d59; }
.corporate .sample-hero::after { background:linear-gradient(90deg,#080a0d 0%,rgba(8,10,13,.93) 40%,rgba(8,10,13,.1) 78%); }
.corporate h1 { font-family:var(--sans); font-weight:700; letter-spacing:-.08em; }
.corporate .sample-meta { background:rgba(8,10,13,.78); }
.corporate .direction h2 { font-family:var(--sans); font-weight:600; }

.media { --bg:#250806; --fg:#fff3e6; --accent:#df3b27; --soft:#6e1d15; }
.media .sample-hero::after { background:linear-gradient(90deg,#250806 0%,rgba(37,8,6,.93) 42%,rgba(37,8,6,.16) 76%); }
.media .logo,.media h1,.media .direction h2 { font-family:Georgia,"Times New Roman",serif; }
.media h1 { font-style:italic; }
.media .sample-meta { background:rgba(37,8,6,.82); }

.hospitality { --bg:#c8b79f; --fg:#211c17; --accent:#70543b; --soft:#a18667; }
.hospitality .sample-hero::after { background:linear-gradient(90deg,#c8b79f 0%,rgba(200,183,159,.92) 38%,rgba(200,183,159,.08) 74%); }
.hospitality h1 { writing-mode:vertical-rl; height:410px; font-size:clamp(3.2rem,6vw,6.2rem); letter-spacing:.02em; }
.hospitality .sample-meta { background:rgba(200,183,159,.82); }

@media (max-width:760px) {
  .sample-label span:last-child,.site-nav div { display:none; }
  .site-nav { min-height:64px; }
  .sample-hero { min-height:760px; height:auto; grid-template-columns:1fr; gap:2rem; padding-top:130px; }
  .sample-hero::after { background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 70%,transparent),linear-gradient(0deg,var(--bg),transparent 62%); }
  h1 { font-size:clamp(3.6rem,17vw,5.6rem); }
  .sample-meta { justify-self:start; }
  .direction { grid-template-columns:1fr; gap:2rem; }
  .corporate .sample-hero::after { background:linear-gradient(90deg,#080a0d,rgba(8,10,13,.72)),linear-gradient(0deg,#080a0d,transparent 55%); }
  .media .sample-hero::after { background:linear-gradient(90deg,#250806,rgba(37,8,6,.66)),linear-gradient(0deg,#250806,transparent 55%); }
  .hospitality .sample-hero::after { background:linear-gradient(90deg,#c8b79f,rgba(200,183,159,.7)),linear-gradient(0deg,#c8b79f,transparent 55%); }
  .hospitality h1 { writing-mode:horizontal-tb; height:auto; letter-spacing:-.05em; }
}