:root { --ink: #15201f; --forest: #1b2827; --forest-2: #233433; --paper: #f2f0eb; --paper-deep: #e4e1d9; --signal: #dc6c43; --signal-dark: #bd522b; --moss: #829181; --line: rgba(21,32,31,.17); --light-line: rgba(242,240,235,.22); --display: 'Oswald', Impact, sans-serif; --sans: 'Manrope', Arial, sans-serif; --mono: 'DM Mono', monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.container { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 30; left: 12px; top: -50px; background: var(--signal); color: var(--ink); padding: 8px 14px; font-weight: 800; }
.skip-link:focus { top: 12px; }
.site-header { height: 91px; position: relative; z-index: 20; display: grid; grid-template-columns: 1.35fr auto 1.05fr; align-items: center; padding: 0 max(32px, calc((100vw - 1200px) / 2)); border-bottom: 1px solid var(--line); background: rgba(242,240,235,.96); backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.brand-mark { width: 32px; height: 32px; position: relative; display: grid; gap: 3px; transform: skewY(-18deg); }
.brand-mark i { display: block; background: var(--signal); }
.brand-mark i:nth-child(2) { background: var(--forest); margin-left: 5px; }
.brand-mark i:nth-child(3) { margin-left: 10px; }
.brand-text { line-height: 1; display: grid; text-transform: uppercase; letter-spacing: -.04em; font-size: 13px; }
.brand-text strong { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: .015em; }
.brand-text span { font-size: 9px; letter-spacing: .115em; font-weight: 800; margin-top: 3px; }
.desktop-nav { display: flex; gap: 24px; justify-content: center; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.desktop-nav a, .header-call { transition: color .2s ease; }
.desktop-nav a:hover, .header-call:hover { color: var(--signal-dark); }
.header-call { justify-self: end; text-align: right; display: grid; line-height: 1.2; }
.header-call span { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.header-call strong { font-family: var(--display); font-size: 19px; letter-spacing: .04em; font-weight: 500; }
.menu-toggle, .mobile-nav { display: none; }
.hero { min-height: 665px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.section-dark { background: var(--forest); color: var(--paper); }
.hero-photo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,22,22,.94) 0%, rgba(19,34,33,.81) 38%, rgba(25,38,38,.29) 78%, rgba(25,38,38,.16)), url('/manus-storage/async-images/hsi70biDW9ZSQtekCgGXbv/image-1.webp') center/cover no-repeat; filter: saturate(.87); }
.hero-pattern { position: absolute; right: -110px; bottom: -130px; width: 480px; height: 480px; border: 1px solid rgba(242,240,235,.25); border-radius: 50%; box-shadow: 0 0 0 42px transparent, 0 0 0 43px rgba(242,240,235,.16), 0 0 0 85px transparent, 0 0 0 86px rgba(242,240,235,.12); }
.hero-content, .hero-meta { position: relative; }
.hero-content { padding-top: 100px; }
.eyebrow { align-items: center; display: flex; font-family: var(--mono); font-size: 10px; font-weight: 500; gap: 10px; letter-spacing: .08em; margin: 0 0 18px; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 27px; height: 2px; background: var(--signal); }
.eyebrow.light { color: rgba(242,240,235,.8); }
.hero h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: .98; text-transform: uppercase; }
.hero h1 { font-size: clamp(58px, 8.5vw, 123px); max-width: 850px; margin: 0; }
em { color: var(--signal); font-style: italic; font-weight: 500; }
.hero-copy { font-size: 18px; line-height: 1.55; max-width: 520px; margin: 25px 0 30px; color: rgba(242,240,235,.87); }
.hero-actions { align-items: center; display: flex; gap: 30px; flex-wrap: wrap; }
.button { align-items: center; border: 0; display: inline-flex; font-family: var(--mono); font-size: 11px; font-weight: 500; gap: 28px; justify-content: space-between; letter-spacing: .04em; min-width: 219px; padding: 15px 17px; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.button b { font-size: 20px; font-family: var(--sans); font-weight: 400; line-height: .7; }
.button:hover { transform: translateY(-3px); }
.button-signal { background: var(--signal); color: var(--ink); }
.button-signal:hover { background: #e77a50; }
.button-quiet { background: transparent; color: var(--paper); border: 1px solid var(--light-line); }
.button-quiet:hover { background: rgba(242,240,235,.08); }
.text-link { font-size: 13px; border-bottom: 1px solid rgba(242,240,235,.45); padding-bottom: 3px; }
.hero-meta { width: min(1200px, calc(100% - 64px)); margin: 0 auto; display: flex; gap: 32px; padding: 24px 0; border-top: 1px solid var(--light-line); color: rgba(242,240,235,.78); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.hero-meta span { display: flex; align-items: center; gap: 9px; }
.hero-meta span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.intro-band { background: var(--paper-deep); }
.intro-layout { padding: 76px 0 80px; display: grid; grid-template-columns: 1fr 2.35fr auto; gap: 38px; align-items: end; }
.large-statement { font-size: clamp(22px, 2.45vw, 35px); line-height: 1.3; letter-spacing: -.04em; margin: 0; font-weight: 500; max-width: 730px; }
.arrow-link { align-items: center; display: inline-flex; gap: 12px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding-bottom: 7px; text-transform: uppercase; width: fit-content; white-space: nowrap; }
.arrow-link b { font-size: 19px; font-weight: 400; line-height: .5; }
.section-space { padding: 125px 0; }
.section-heading { margin-bottom: 66px; }
.split-heading { display: grid; grid-template-columns: 1.6fr .73fr; gap: 75px; align-items: end; }
h2 { font-size: clamp(43px, 5.1vw, 76px); margin: 0; max-width: 780px; }
.split-heading > p { margin: 0 0 5px; font-size: 15px; line-height: 1.7; max-width: 360px; }
.service-list { border-top: 1px solid var(--line); }
.service-item { display: grid; grid-template-columns: 10% 1.4fr 2fr auto; gap: 25px; align-items: center; padding: 29px 12px 29px 0; border-bottom: 1px solid var(--line); transition: padding .25s ease, background .25s ease; }
.service-item:hover { background: rgba(27,40,39,.045); padding-left: 16px; }
.service-index { font-family: var(--mono); font-size: 10px; color: var(--signal-dark); }
.service-item h3 { font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1; margin: 0; text-transform: uppercase; }
.service-item p { margin: 0; color: rgba(21,32,31,.72); font-size: 14px; max-width: 390px; }
.service-item a { font-size: 27px; color: var(--signal-dark); transition: transform .2s ease; }
.service-item a:hover { transform: translate(4px,-4px); }
.work-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; align-items: start; }
.project-card { overflow: hidden; }
.project-card-offset { margin-top: 84px; }
.project-card img { width: 100%; aspect-ratio: 1.08; object-fit: cover; filter: saturate(.8); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.project-card:hover img { transform: scale(1.045); filter: saturate(1); }
.project-card div { padding-top: 16px; }
.project-card span, .project-card p { font-family: var(--mono); color: rgba(242,240,235,.58); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.project-card h3 { font-family: var(--display); font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1; margin: 5px 0 8px; text-transform: uppercase; }
.project-card p { margin: 0; color: var(--signal); }
.process { background: #dde0d9; }
.process-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 17% 1fr; gap: 15px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.steps span { color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }
.steps h3 { font-family: var(--display); font-weight: 500; font-size: 29px; line-height: 1; margin: 0 0 8px; text-transform: uppercase; }
.steps p { color: rgba(21,32,31,.7); font-size: 14px; margin: 0; max-width: 400px; }
.coverage { padding-top: 0; background: var(--paper); }
.coverage-panel { min-height: 620px; background: var(--forest-2); color: var(--paper); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.coverage-map { position: relative; background: #2b3c3b; overflow: hidden; min-height: 500px; }
.coverage-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(242,240,235,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,235,.11) 1px, transparent 1px); background-size: 52px 52px; transform: rotate(-8deg) scale(1.18); }
.map-ring { position: absolute; left: 50%; top: 49%; border: 1px solid rgba(242,240,235,.42); border-radius: 50%; transform: translate(-50%,-50%); }
.ring-one { width: 200px; height: 200px; }.ring-two { width: 390px; height: 390px; border-style: dashed; }
.map-dot { position: absolute; width: 15px; height: 15px; background: var(--signal); border-radius: 50%; left: calc(50% - 7px); top: calc(49% - 7px); box-shadow: 0 0 0 8px rgba(220,108,67,.18); }
.coverage-map > span:not(.map-label) { position: absolute; left: 50%; top: calc(49% + 22px); transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.map-label { position: absolute; color: rgba(242,240,235,.5); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }.label-north { top: 18%; left: 52%; }.label-west { top: 52%; left: 13%; }.label-south { bottom: 14%; right: 18%; }
.coverage-copy { padding: 94px 74px; align-self: center; }
.coverage-copy > p:not(.eyebrow) { font-size: 15px; color: rgba(242,240,235,.78); max-width: 420px; }
.coverage-list { list-style: none; padding: 0; margin: 33px 0 33px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--light-line); }
.coverage-list li { border-bottom: 1px solid var(--light-line); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 12px 0; text-transform: uppercase; }.coverage-copy .arrow-link { color: var(--paper); border-color: var(--paper); }
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.reason-grid article { min-height: 244px; padding: 25px 34px 28px 0; border-bottom: 1px solid var(--line); }.reason-grid article + article { padding-left: 34px; border-left: 1px solid var(--line); }
.reason-grid span { color: var(--signal-dark); font-family: var(--mono); font-size: 10px; }.reason-grid h3 { font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1; margin: 34px 0 12px; text-transform: uppercase; }.reason-grid p { color: rgba(21,32,31,.7); font-size: 14px; line-height: 1.6; max-width: 300px; margin: 0; }
.quote { padding: 118px 0 110px; }.quote-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 104px; }.quote-intro > p:not(.eyebrow) { color: rgba(242,240,235,.74); max-width: 390px; }.direct-contact { margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--light-line); display: grid; gap: 18px; }.direct-contact a { display: grid; width: fit-content; }.direct-contact small { color: rgba(242,240,235,.56); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }.direct-contact strong { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: .02em; }.quote-form { padding: 31px; background: var(--paper); color: var(--ink); }.quote-form label { display: grid; gap: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; margin-bottom: 20px; text-transform: uppercase; }.quote-form input, .quote-form select, .quote-form textarea { appearance: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; letter-spacing: normal; outline: none; padding: 9px 0 11px; text-transform: none; transition: border-color .2s; }.quote-form select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%2315201f' stroke-width='1.4'/%3E%3C/svg%3E") right 5px center/12px no-repeat; }.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--signal-dark); }.quote-form textarea { resize: vertical; min-height: 100px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }.honeypot { position: absolute !important; overflow: hidden; width: 1px; height: 1px; clip: rect(0,0,0,0); }.quote-form .button { margin-top: 5px; }.form-status { min-height: 24px; font-size: 13px; margin: 16px 0 0; font-weight: 700; }.form-status.error { color: #a73d28; }.form-footnote { color: rgba(21,32,31,.58); font-size: 11px; line-height: 1.5; margin: 12px 0 0; }
.site-footer { background: #101918; color: var(--paper); padding: 41px 0 25px; }.footer-grid { display: grid; grid-template-columns: 1.25fr 1.25fr 1fr; gap: 36px; align-items: start; }.footer-brand .brand-mark i:nth-child(2) { background: var(--paper); }.footer-grid > p { color: rgba(242,240,235,.62); font-size: 13px; line-height: 1.6; margin: 0; max-width: 370px; }.footer-grid > div { display: grid; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }.footer-grid > div a { width: fit-content; border-bottom: 1px solid rgba(242,240,235,.35); padding-bottom: 3px; }.footer-note { grid-column: 1/-1; color: rgba(242,240,235,.42); border-top: 1px solid rgba(242,240,235,.14); padding-top: 22px; margin-top: 17px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .site-header { grid-template-columns: 1fr auto; height: 75px; padding: 0 24px; }.desktop-nav, .header-call { display: none; }.menu-toggle { border: 0; background: transparent; display: grid; gap: 5px; padding: 11px 0 11px 13px; }.menu-toggle span { width: 25px; height: 1.5px; background: var(--ink); transition: transform .2s ease; }.menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3px) rotate(-45deg); }.mobile-nav { background: var(--paper); border-bottom: 1px solid var(--line); display: grid; padding: 4px 24px 19px; position: absolute; width: 100%; z-index: 19; }.mobile-nav a { border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 25px; letter-spacing: -.02em; padding: 11px 0; text-transform: uppercase; }.hero { min-height: 670px; }.hero-content { padding-top: 95px; }.hero-meta { gap: 12px 23px; flex-wrap: wrap; }.intro-layout, .split-heading, .process-layout, .quote-layout { grid-template-columns: 1fr; gap: 25px; }.intro-layout { padding: 54px 0 58px; }.intro-layout .arrow-link { margin-top: 8px; }.section-space { padding: 80px 0; }.section-heading { margin-bottom: 44px; }.project-grid { gap: 20px; }.coverage-panel { grid-template-columns: 1fr; }.coverage-map { min-height: 400px; }.coverage-copy { padding: 65px 38px 70px; }.reason-grid { grid-template-columns: 1fr; }.reason-grid article, .reason-grid article + article { min-height: auto; padding: 23px 0; border-left: 0; }.reason-grid h3 { margin: 18px 0 10px; }.work-heading { align-items: start; }.quote-layout { gap: 58px; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > p { grid-row: 2; }.footer-grid > div { grid-row: 2; } }
@media (max-width: 620px) { .container { width: min(100% - 40px, 1200px); }.site-header { padding: 0 20px; }.hero { min-height: 620px; }.hero-content { padding-top: 75px; }.hero h1 { font-size: clamp(55px, 17vw, 78px); }.hero-copy { font-size: 16px; max-width: 370px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 21px; }.hero-meta { width: calc(100% - 40px); gap: 8px 19px; padding: 18px 0; }.hero-meta span { font-size: 8px; }.hero-pattern { width: 300px; height: 300px; right: -150px; bottom: -90px; }.large-statement { font-size: 25px; }.service-item { grid-template-columns: 11% 1fr auto; gap: 13px; }.service-item p { grid-column: 2 / -1; }.service-item a { grid-row: 1; grid-column: 3; }.service-item h3 { font-size: 28px; }.project-grid { grid-template-columns: 1fr; }.project-card-offset { margin-top: 0; }.project-card img { aspect-ratio: 1.3; }.work-heading { display: grid; gap: 27px; }.process-layout { gap: 43px; }.steps li { grid-template-columns: 14% 1fr; }.coverage-map { min-height: 320px; }.ring-one { width: 140px; height: 140px; }.ring-two { width: 280px; height: 280px; }.coverage-copy { padding: 52px 24px 58px; }.coverage-list { margin-top: 25px; }.quote { padding: 80px 0; }.quote-form { padding: 24px 20px; }.form-row { grid-template-columns: 1fr; gap: 0; }.footer-grid { grid-template-columns: 1fr; }.footer-grid > p, .footer-grid > div { grid-row: auto; }.footer-note { margin-top: 0; }.button { width: 100%; }.direct-contact strong { font-size: 21px; } }

@media (max-width: 900px) { .mobile-nav[hidden] { display: none; } }

.header-quote { justify-self: end; align-items: center; background: var(--signal); color: var(--ink); display: inline-flex; font-family: var(--mono); font-size: 10px; font-weight: 500; gap: 13px; letter-spacing: .04em; padding: 12px 14px; text-transform: uppercase; transition: background .2s ease, transform .2s ease; }
.header-quote:hover { background: #e77a50; transform: translateY(-2px); }
.header-quote b, .footer-quote b { font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: .7; }
.footer-quote { align-items: center; display: inline-flex; gap: 10px; width: fit-content; border-bottom: 1px solid rgba(242,240,235,.4); color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; padding-bottom: 6px; text-transform: uppercase; }
@media (max-width: 900px) { .header-quote { display: none; } }