-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
471 lines (440 loc) · 24.8 KB
/
index.html
File metadata and controls
471 lines (440 loc) · 24.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Obsidian Studio — Web Design With An Editorial Eye</title>
<meta name="description" content="Editorial web design for independent brands. Story-led, properly magazine. No templates, no gimmicks. From £1,200.">
<meta property="og:title" content="Obsidian Studio — Web Design With An Editorial Eye">
<meta property="og:description" content="Editorial web design for independent brands. Story-led, properly magazine. No templates, no gimmicks. From £1,200.">
<meta property="og:image" content="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351851/Obsidian/hero-img_zlbp1b.png">
<meta property="og:url" content="https://obsidianstudio.co">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
cream: '#ffffff',
ink: '#111111',
sand: '#f4f4f4',
sand2: '#f4f4f4',
sand3: '#e8e8e8',
sand4: '#e8e8e8',
sand5: '#f4f4f4',
sand6: '#e8e8e8',
},
fontFamily: {
serif: ['Georgia', 'Times New Roman', 'serif'],
sans: ['Inter', 'system-ui', 'sans-serif']
},
letterSpacing: {
editorial: '0.24em'
}
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
body { background: #ffffff; color: #111111; }
summary::-webkit-details-marker {
display: none;
}
</style>
</head>
<body class="bg-cream text-ink font-sans selection:bg-sand3 selection:text-ink">
<div class="mx-auto max-w-7xl px-4 py-4 md:px-6 lg:px-8">
<header class="border-b border-black/10 pb-4">
<div class="flex items-center justify-between gap-6">
<a href="index.html" class="font-serif text-lg uppercase tracking-[-0.02em] md:text-xl">
Obsidian Studio
</a>
<nav class="hidden items-center gap-6 text-[11px] uppercase tracking-[0.22em] md:flex lg:gap-8">
<a href="#work" class="text-black/55 transition hover:text-black">
Work
</a>
<a href="#services" class="text-black/55 transition hover:text-black">
Services
</a>
<a href="#approach" class="text-black/55 transition hover:text-black">
Approach
</a>
<a href="#contact" class="text-black/55 transition hover:text-black">
Contact
</a>
</nav>
<details class="relative md:hidden">
<summary class="list-none cursor-pointer text-[11px] uppercase tracking-[0.22em] text-black/55 transition hover:text-black">
Menu
</summary>
<div class="absolute right-0 top-full z-20 mt-3 min-w-[220px] border border-black/10 bg-sand2 p-4 shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
<nav class="flex flex-col gap-3 text-[11px] uppercase tracking-[0.22em]">
<a href="#work" class="text-black/55 transition hover:text-black">
Work
</a>
<a href="#services" class="text-black/55 transition hover:text-black">
Services
</a>
<a href="#approach" class="text-black/55 transition hover:text-black">
Approach
</a>
<a href="#contact" class="text-black/55 transition hover:text-black">
Contact
</a>
</nav>
</div>
</details>
</div>
</header>
<main class="space-y-5 py-5 md:space-y-6 md:py-6">
<section class="grid gap-5 lg:grid-cols-12">
<div class="relative overflow-hidden border border-black/10 bg-white/40 p-6 md:p-8 lg:col-span-8 lg:p-12">
<div class="max-w-4xl">
<div class="mb-6 flex flex-wrap items-center gap-3 text-[11px] uppercase tracking-editorial text-black/50">
<span>01 — Hero</span>
<span class="h-px w-10 bg-black/15"></span>
<span>Story-led web design</span>
</div>
<h1 class="max-w-4xl font-serif text-5xl leading-[0.95] tracking-[-0.05em] text-[#1f1c19] md:text-7xl lg:text-[6.2rem]">
Web design with an editorial eye.
</h1>
<p class="mt-6 max-w-2xl text-base leading-8 text-black/70 md:text-lg md:leading-9">
Thoughtful, story-led websites for brands that want to look distinctive, credible, and well considered — not templated, not trend-chasing, and never built to disappear into the crowd.
</p>
<div class="mt-8 grid gap-6 border-t border-black/10 pt-6 md:grid-cols-2 md:items-end">
<div class="border-l border-black/15 pl-5">
<p class="font-serif text-xl italic leading-tight text-black/80 md:text-[1.9rem]">
Your Brand Has A Story, Now Share It.
</p>
</div>
<div class="text-sm leading-7 text-black/60">
Bespoke websites for businesses investing in stronger positioning, better communication, and a more refined online presence.
</div>
</div>
<div class="mt-8 flex flex-wrap gap-3">
<a href="start-project.html" class="rounded-none bg-ink px-6 py-3 text-sm tracking-[0.02em] text-cream transition hover:-translate-y-0.5">Start a Project</a>
<a href="#work" class="rounded-none border border-black/15 bg-white/40 px-6 py-3 text-sm tracking-[0.02em] text-black/70 transition hover:bg-white/70">View Selected Work</a>
</div>
</div>
</div>
<aside class="grid gap-5 lg:col-span-4">
<div class="overflow-hidden border border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351851/Obsidian/hero-img_zlbp1b.png"
alt="Obsidian Studio workspace"
class="w-full h-full min-h-[260px] object-cover object-center"
/>
</div>
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
<div class="border border-black/10 bg-white/35 p-6">
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Projects</div>
<div class="mt-6 font-serif text-4xl tracking-[-0.04em]">Variety</div>
<div class="mt-2 font-serif text-2xl tracking-[-0.03em]">01-06</div>
<p class="mt-3 text-sm leading-6 text-black/58">Six concept projects spanning tattoo studios, bookshops, sports brands, hospitality design, audio production, and counter-culture retail.</p>
</div>
<div class="border border-black/10 bg-white/35 p-6">
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Pricing Tiers</div>
<div class="mt-6 font-serif text-4xl tracking-[-0.04em]">Flexible</div>
<div class="mt-2 font-serif text-2xl tracking-[-0.03em]">£1.2k–5k</div>
<p class="mt-3 text-sm leading-6 text-black/58">Foundation, Studio, and Definitive — three tiers for businesses that want clarity from the outset.</p>
</div>
</div>
</aside>
</section>
<section class="overflow-hidden border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
<div class="mb-6 text-[11px] uppercase tracking-editorial text-black/50">02 — Studio Philosophy</div>
<blockquote class="max-w-6xl font-serif text-[2rem] leading-[1.02] tracking-[-0.04em] text-[#1f1c19] md:text-[3.6rem] lg:text-[4.5rem]">
Anti-template. Anti-gimmick. Just thoughtful, story-led websites designed to give your brand the presence it deserves.
</blockquote>
</section>
<section id="work" class="overflow-hidden border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
<div class="flex flex-col gap-5 border-b border-black/10 pb-6 md:flex-row md:items-end md:justify-between">
<div>
<div class="mb-3 text-[11px] uppercase tracking-editorial text-black/50">03 — Selected Work</div>
<h2 class="max-w-4xl font-serif text-[2.2rem] leading-[0.98] tracking-[-0.04em] md:text-[4rem]">
A considered collection.
</h2>
</div>
<p class="max-w-md text-sm leading-7 text-black/58">
Six projects spanning independent retail, hospitality, sports, culture, and counter-culture — five concept builds and one live brand, each built from scratch with a distinct story at its centre.
</p>
</div>
<div class="mt-8 grid gap-5 lg:grid-cols-12">
<!-- Oshun -->
<a href="#" class="block group lg:col-span-7">
<article class="relative overflow-hidden border border-black/10 bg-sand p-6 lg:min-h-[620px] lg:p-10 transition hover:bg-[#e8e8e8]">
<div class="absolute right-6 top-6 text-[10px] uppercase tracking-editorial text-black/35">Lead Feature</div>
<div class="flex h-full flex-col justify-start gap-8">
<div class="max-w-xl">
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Oshun Studios</div>
<p class="mt-3 text-[11px] uppercase tracking-[0.2em] text-black/45">Tattoo Studio, London</p>
<div class="mt-6 h-px w-16 bg-black/15"></div>
<h3 class="mt-6 font-serif text-[2.1rem] leading-[0.95] tracking-[-0.04em] md:text-[3.8rem]">
Bold, atmospheric, and unmistakably art directed.
</h3>
<p class="mt-5 max-w-lg text-base leading-7 text-black/68">
A concept homepage that uses strong imagery, elegant type, and a premium booking-led structure to elevate a tattoo studio beyond the expected visual clichés.
</p>
</div>
<div class="mt-2 overflow-hidden border border-black/10 bg-[#cfc2b1]">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774545935/Obsidian/oshun-main-studio_r0oskq.png"
alt="Oshun Studios portfolio preview"
class="w-full aspect-[2/1] object-cover object-top transition duration-500 group-hover:scale-[1.01]"
/>
</div>
<div class="mt-3 overflow-hidden border border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774366100/Obsidian/oshun-clients_zb4i1k.png"
alt="Oshun Studios tattoo work"
class="w-full aspect-[2/1] object-cover object-center transition duration-500 group-hover:scale-[1.01]"
/>
</div>
</div>
</article>
</a>
<!-- Right column -->
<div class="grid gap-5 lg:col-span-5 h-full">
<!-- Red Herring -->
<a href="#" class="block group h-full">
<article class="flex h-full flex-col overflow-hidden border border-black/10 bg-sand2 lg:min-h-[300px] transition hover:bg-[#e8e8e8]">
<div class="grid h-full gap-0 md:grid-cols-1">
<div class="overflow-hidden border-b border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351851/Obsidian/red-herring-portfolio_rt0yep.png"
alt="The Red Herring portfolio preview"
class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.01]"
/>
</div>
<div class="p-6 lg:p-8">
<div class="flex h-full flex-col justify-between gap-6">
<div>
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">The Red Herring</div>
<p class="mt-3 text-[11px] uppercase tracking-[0.2em] text-black/45">Independent Bookshop, Marylebone</p>
</div>
<div>
<div class="mb-4 h-px w-14 bg-black/15"></div>
<h3 class="font-serif text-[2rem] leading-[0.98] tracking-[-0.04em]">Warm, literary, and quietly distinctive.</h3>
<p class="mt-4 text-sm leading-6 text-black/66">
Curated recommendations, event promotion, and a strong sense of independent character — a softer editorial direction that feels completely at home.
</p>
</div>
</div>
</div>
</div>
</article>
</a>
<!-- Soleil -->
<a href="#" class="block group h-full">
<article class="flex h-full flex-col overflow-hidden border border-black/10 bg-sand2 lg:min-h-[300px] transition hover:bg-[#e8e8e8]">
<div class="grid h-full gap-0 md:grid-cols-1">
<div class="overflow-hidden border-b border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351846/Obsidian/soleil-portfolio_okb8eb.png"
alt="Soleil Studio portfolio preview"
class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.01]"
/>
</div>
<div class="p-6 lg:p-8">
<div class="flex h-full flex-col justify-between gap-6">
<div>
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Soleil Studio</div>
<p class="mt-3 text-[11px] uppercase tracking-[0.2em] text-black/45">Hospitality Design, Zürich</p>
</div>
<div>
<div class="mb-4 h-px w-14 bg-black/15"></div>
<h3 class="font-serif text-[2rem] leading-[0.98] tracking-[-0.04em]">Spacious, refined, and built around taste.</h3>
<p class="mt-4 text-sm leading-6 text-black/66">
Restraint, composition, and typography working together to signal premium positioning for a commercial interior design consultancy.
</p>
</div>
</div>
</div>
</div>
</article>
</a>
</div>
</div>
<div class="mt-5 grid gap-5 md:grid-cols-3">
<!-- All In -->
<a href="#" class="block group h-full">
<article class="flex h-full flex-col overflow-hidden border border-black/10 bg-sand2 transition hover:bg-[#e8e8e8]">
<div class="overflow-hidden border-b border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351854/Obsidian/all-in-portfolio_ggrnkx.png"
alt="All In Pickleball Club portfolio preview"
class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.01]"
/>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="h-16">
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">All In Pickleball</div>
<p class="mt-3 text-[11px] uppercase tracking-[0.2em] text-black/45">Sports & Lifestyle, Las Vegas</p>
</div>
<div class="mt-auto">
<div class="mb-4 h-px w-14 bg-black/15"></div>
<h3 class="font-serif text-[1.8rem] leading-tight tracking-[-0.04em]">Fresh, social, and full of movement.</h3>
<p class="mt-4 text-sm leading-6 text-black/66">
Editorial thinking adapted to a community-led sports brand — proving the methodology works across every brand world.
</p>
</div>
</div>
</article>
</a>
<!-- Spectral -->
<a href="spectral.html" class="block group h-full">
<article class="flex h-full flex-col overflow-hidden border border-black/10 bg-sand2 transition hover:bg-[#e8e8e8]">
<div class="overflow-hidden border-b border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351847/Obsidian/spectral-portfolio_dobj9w.png"
alt="Spectral portfolio preview"
class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.01]"
/>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="h-16">
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Spectral</div>
<p class="mt-3 text-[11px] uppercase tracking-[0.2em] text-black/45">Audio Post-Production, Soho</p>
</div>
<div class="mt-auto">
<div class="mb-4 h-px w-14 bg-black/15"></div>
<h3 class="font-serif text-[1.8rem] leading-tight tracking-[-0.04em]">Moody, immersive, and image-led.</h3>
<p class="mt-4 text-sm leading-6 text-black/66">
Atmosphere, credibility, and sonic identity — a concept built for a studio where the sound is the story. </p>
</div>
</div>
</article>
</a>
<!-- Deathwings -->
<a href="deathwings.html" class="block group h-full">
<article class="flex h-full flex-col overflow-hidden border border-black/10 bg-sand2 transition hover:bg-[#e8e8e8]">
<div class="overflow-hidden border-b border-black/10">
<img
src="https://res.cloudinary.com/dragon-fire-design-studio/image/upload/f_auto,q_90/v1774351853/Obsidian/deathwings-portfolio_ycmqvu.png"
alt="Deathwings portfolio preview"
class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.01]"
/>
</div>
<div class="flex flex-1 flex-col p-6">
<div class="h-16">
<div class="text-[11px] uppercase tracking-[0.22em] text-black/45">Deathwings</div>
<p class="mt-3 text-[11px] uppercase tracking-[0.2em] text-black/45">Metal Lifestyle Brand, Birmingham</p>
</div>
<div class="mt-auto">
<div class="mb-4 h-px w-14 bg-black/15"></div>
<h3 class="font-serif text-[1.8rem] leading-tight tracking-[-0.04em]">The statement piece at the back of the magazine.</h3>
<p class="mt-4 text-sm leading-6 text-black/66">
Bold, disruptive branding that still sits inside a carefully structured homepage. Proof that editorial thinking works at full intensity.
</p>
</div>
</div>
</article>
</a>
</div>
</section>
<section class="grid gap-5 lg:grid-cols-12 mt-5">
<section id="services" class="border border-black/10 bg-white/30 p-6 md:p-8 lg:col-span-5 lg:p-10">
<div class="mb-4 text-[11px] uppercase tracking-editorial text-black/50">04 — Services</div>
<h2 class="max-w-lg font-serif text-[2rem] leading-[0.98] tracking-[-0.04em] md:text-[3.2rem]">
Bespoke websites for brands with substance.
</h2>
<p class="mt-5 max-w-md text-base leading-7 text-black/64">
Built for businesses that want more than a generic online presence — and are ready to invest in something more considered.
</p>
<div class="mt-9 space-y-1">
<div class="flex items-center justify-between border-t border-black/10 py-4 text-[15px] text-black/74 transition hover:pl-1"><span>Brand-led websites</span><span class="text-black/35">→</span></div>
<div class="flex items-center justify-between border-t border-black/10 py-4 text-[15px] text-black/74 transition hover:pl-1"><span>Studio and portfolio sites</span><span class="text-black/35">→</span></div>
<div class="flex items-center justify-between border-t border-black/10 py-4 text-[15px] text-black/74 transition hover:pl-1"><span>Service business websites</span><span class="text-black/35">→</span></div>
<div class="flex items-center justify-between border-t border-black/10 py-4 text-[15px] text-black/74 transition hover:pl-1"><span>Editorial landing pages</span><span class="text-black/35">→</span></div>
<div class="flex items-center justify-between border-t border-black/10 py-4 text-[15px] text-black/74 transition hover:pl-1"><span>Strategic website refreshes</span><span class="text-black/35">→</span></div>
</div>
</section>
<section id="approach" class="border border-black/10 bg-ink p-6 text-cream md:p-8 lg:col-span-7 lg:p-10">
<div class="mb-4 text-[11px] uppercase tracking-editorial text-white/45">05 — Approach</div>
<h2 class="max-w-3xl font-serif text-[2rem] leading-[0.98] tracking-[-0.04em] md:text-[3.2rem]">
Story. Structure. Style. Presence.
</h2>
<p class="mt-5 max-w-2xl text-base leading-7 text-white/68">
A clearer, more editorial process that focuses on what your website needs to communicate — not just what sections it should contain.
</p>
<div class="mt-10 grid gap-5 md:grid-cols-2">
<div class="border-t border-white/12 pt-5">
<h3 class="font-serif text-[1.7rem] tracking-[-0.03em]">Story</h3>
<p class="mt-3 max-w-sm text-sm leading-7 text-white/66">Clarify what matters, what differentiates you, and what your website needs to communicate.</p>
</div>
<div class="border-t border-white/12 pt-5">
<h3 class="font-serif text-[1.7rem] tracking-[-0.03em]">Structure</h3>
<p class="mt-3 max-w-sm text-sm leading-7 text-white/66">Build a clearer hierarchy so the experience feels intentional, intuitive, and easy to follow.</p>
</div>
<div class="border-t border-white/12 pt-5">
<h3 class="font-serif text-[1.7rem] tracking-[-0.03em]">Style</h3>
<p class="mt-3 max-w-sm text-sm leading-7 text-white/66">Shape the visual language through typography, layout, tone, and carefully directed design decisions.</p>
</div>
<div class="border-t border-white/12 pt-5">
<h3 class="font-serif text-[1.7rem] tracking-[-0.03em]">Presence</h3>
<p class="mt-3 max-w-sm text-sm leading-7 text-white/66">Create a website that makes your brand feel more established, more distinctive, and worth paying attention to.</p>
</div>
</div>
</section>
</section>
<section class="grid gap-5 lg:grid-cols-12">
<section class="border border-black/10 bg-[#e8e8e8] p-6 md:p-8 lg:col-span-4 lg:p-10">
<div class="mb-4 text-[11px] uppercase tracking-editorial text-black/50">06 — Founder Note</div>
<h2 class="font-serif text-[2rem] leading-[0.98] tracking-[-0.04em] md:text-[3rem]">
On why editorial instincts build better websites.
</h2>
</section>
<section class="border border-black/10 bg-white/30 p-6 md:p-8 lg:col-span-8 lg:p-10">
<div class="max-w-3xl">
<p class="font-serif text-[1.5rem] leading-tight tracking-[-0.03em] text-[#1f1c19] md:text-[2.1rem]">
I started learning web design in the late 1990s, back when websites were built with tables and visual rhythm mattered.
</p>
<p class="mt-6 text-[17px] leading-8 text-black/66">
Before that, I wanted to be a magazine journalist. That editorial instinct never left. Today I build websites the same way a good editor lays out a magazine — with hierarchy, intention, and a clear sense of what the reader needs to feel at every point. Old-school thinking. Modern execution.
</p>
</div>
</section>
</section>
<section id="contact" class="overflow-hidden border border-black/10 bg-white/30 p-6 md:p-8 lg:p-12">
<div class="grid gap-7 lg:grid-cols-12 lg:items-end">
<div class="lg:col-span-8">
<div class="mb-4 text-[11px] uppercase tracking-editorial text-black/50">07 — Enquire</div>
<h2 class="max-w-5xl font-serif text-[2.3rem] leading-[0.96] tracking-[-0.045em] text-[#1f1c19] md:text-[4rem] lg:text-[5.1rem]">
If your brand has a story worth telling, let’s give it the presence it deserves.
</h2>
</div>
<div class="lg:col-span-4 lg:pl-8">
<p class="text-base leading-8 text-black/62">
Choose from three defined tiers depending on the level of strategy, design depth, and content structure your project needs: Foundation (£1,200), Studio (£2,500), or Definitive (£5,000).
</p>
<div class="mt-7 flex flex-wrap gap-3">
<a href="start-project.html" class="rounded-none bg-ink px-6 py-3 text-sm tracking-[0.02em] text-cream transition hover:-translate-y-0.5">Start Your Project</a>
<a href="spectral.html" class="rounded-none border border-black/15 px-6 py-3 text-sm tracking-[0.02em] text-black/70 transition hover:bg-white/65">See Process</a>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t border-black/10 py-5">
<div class="flex flex-col gap-3 text-[11px] uppercase tracking-[0.22em] text-black/45 md:flex-row md:items-end md:justify-between">
<div class="flex flex-col gap-2">
<span>Obsidian Studio</span>
<div class="flex gap-4">
<a href="privacy-notice.html" class="transition hover:text-black">Privacy Notice</a>
<a href="terms.html" class="transition hover:text-black">Terms</a>
</div>
</div>
<span>Web Design With An Editorial Eye</span>
</div>
</footer>
</div>
</body>
</html>