@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');
:root { --parchment:#eee8d9; --paper:#f5efe1; --ultramarine:#1e3153; --deep-blue:#142643; --oxblood:#6d3036; --gold:#ac8757; --ink:#243149; --muted:#6c6d68; --line:#c9bfae; --serif:'Cormorant Garamond',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--parchment); font-family:var(--sans); -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } ::selection { color:var(--paper); background:var(--oxblood); } :focus-visible { outline:2px solid var(--oxblood); outline-offset:4px; } .site-shell { overflow:hidden; } h1,h2,h3,p { margin:0; } h1,h2,h3 { font-family:var(--serif); font-weight:500; }
.site-header { position:relative; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:92px; padding:0 4.8%; border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:10px; width:max-content; } .brand-icon { display:block; flex:none; width:48px; height:48px; object-fit:contain; } .brand-name { font-family:var(--serif); font-size:19px; line-height:.85; letter-spacing:.025em; font-weight:600; }
.main-nav { display:flex; gap:44px; } .main-nav a,.nav-contact,.hero-overline,.hero-action>span,.art-meta,.art-caption,.interlude,.section-head,.company-number,.company-kind,.step>span,.contact-top,.field label,.form-end,.footer-subline,.footer-end,.underlined-link { font-family:var(--mono); font-size:10px; letter-spacing:.065em; } .main-nav a { color:#5f6669; transition:color .2s; } .main-nav a:hover { color:var(--oxblood); } .nav-contact { justify-self:end; padding:15px 22px; color:var(--paper); background:var(--ultramarine); border:1px solid var(--ultramarine); transition:background .2s,color .2s; } .nav-contact:hover { color:var(--ultramarine); background:transparent; }
.hero { display:grid; grid-template-columns:52% 48%; min-height:720px; height:min(770px,calc(100svh - 92px)); } .hero-copy { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:40px 8.8% 63px 9.2%; background:radial-gradient(ellipse at 4% 90%,#eadfcb 0,transparent 56%),var(--paper); } .hero-copy::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.16; background:repeating-linear-gradient(90deg,transparent 0 49px,#ae9f8a 50px,transparent 51px); mask-image:linear-gradient(90deg,black,transparent 80%); } .hero-overline,.hero-action,.hero-thesis { position:relative; } .hero-overline { display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--oxblood); white-space:nowrap; } .hero-overline span:last-child { color:#8d8277; } .latin-note { font:italic 24px/1.2 var(--serif); color:var(--oxblood); letter-spacing:.005em; } .hero h1 { font-size:clamp(76px,7.2vw,121px); line-height:.81; letter-spacing:-.065em; margin:27px 0 40px; } .hero h1 em { color:var(--oxblood); font-weight:400; } .hero-description { max-width:375px; font-size:17px; line-height:1.65; color:#565f60; } .hero-action { display:flex; align-items:center; justify-content:space-between; gap:25px; } .primary-link { padding:18px 24px; border:1px solid var(--oxblood); color:var(--oxblood); font:500 11px var(--mono); letter-spacing:.06em; transition:background .2s,color .2s; } .primary-link:hover { background:var(--oxblood); color:var(--paper); } .hero-action>span { color:#8e867a; white-space:nowrap; } .hero-margin { position:absolute; left:22px; top:50%; color:#a59b8e; font:9px var(--mono); letter-spacing:.1em; writing-mode:vertical-rl; }
.hero-art { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:36px 7% 24px; background:radial-gradient(circle at 47% 47%,#314a70,var(--deep-blue) 65%); color:#e8dfce; } .hero-art::before { content:''; position:absolute; inset:0; opacity:.22; background:repeating-linear-gradient(0deg,transparent 0 48px,#9ba6b5 49px,transparent 50px),repeating-linear-gradient(90deg,transparent 0 48px,#9ba6b5 49px,transparent 50px); mask-image:radial-gradient(circle at 50% 50%,black 10%,transparent 65%); } .art-meta,.art-caption { position:relative; z-index:2; display:flex; width:100%; justify-content:space-between; gap:25px; color:#c3bdad; } .art-meta span:last-child,.art-caption span:last-child { white-space:nowrap; color:#c4a97f; } .architectural-plate { position:relative; width:min(78%,495px); height:74%; max-height:578px; overflow:hidden; border:1px solid #c6a97d; border-radius:49% 49% 0 0 / 23% 23% 0 0; box-shadow:0 0 0 12px #152847,0 0 0 13px #7f765f,0 19px 60px #0a1527a8; background:var(--paper); } .architectural-plate::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#2b466925 0%,transparent 48%,#14264370 100%); } .architectural-plate img { width:100%; height:100%; object-fit:cover; object-position:45% center; filter:sepia(.25) contrast(1.06); display:block; } .plate-overlay { position:absolute; z-index:1; inset:0; opacity:.77; } .datum { position:absolute; width:9px; height:9px; border:1px solid #eee1c4; transform:rotate(45deg); } .datum-a { left:7%; top:40%; } .datum-b { right:9%; top:28%; } .datum-c { left:33%; bottom:13%; } .datum-d { right:13%; bottom:19%; } .axis { position:absolute; background:#eff0dd8c; } .axis.horizontal { width:100%; height:1px; top:53%; left:0; } .axis.vertical { width:1px; height:100%; top:0; left:50%; } .axis-circle { width:128px; height:128px; border-radius:50%; border:1px solid #e9f1e2b0; position:absolute; top:calc(53% - 64px); left:calc(50% - 64px); box-shadow:0 0 0 1px #213e5780; } .art-caption { align-items:end; line-height:1.5; font-size:9px; } .art-caption span:first-child { max-width:345px; }
.interlude { display:flex; gap:28px; align-items:center; justify-content:center; min-height:66px; padding:17px 5%; background:#dcd2bf; color:var(--oxblood); white-space:nowrap; } .interlude-rule { width:70px; height:1px; background:var(--gold); flex:0 1 70px; } .section-frame { padding:34px 7.3% 110px; border-bottom:1px solid var(--line); } .section-head { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:22px; color:var(--oxblood); } .section-head span:last-child { color:#8e8172; } .approach { background:var(--parchment); } .approach-layout { display:grid; grid-template-columns:62% 38%; gap:3%; padding-top:78px; } .section-prelude { color:var(--oxblood); font:italic 25px var(--serif); margin-bottom:15px; } .approach h2,.process h2 { font-size:clamp(64px,6.1vw,103px); line-height:.88; letter-spacing:-.062em; } .approach h2 em,.process h2 em { color:var(--oxblood); font-weight:400; } .approach-aside { padding:19px 9% 0; } .engraving-line { display:block; width:92px; height:52px; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); position:relative; margin-bottom:25px; } .engraving-line::after { content:''; position:absolute; height:1px; width:92px; background:var(--gold); top:25px; } .approach-aside p,.process-layout>div>p { font-size:17px; line-height:1.66; color:#596365; max-width:420px; } .underlined-link { display:inline-block; margin-top:40px; padding-bottom:13px; border-bottom:1px solid var(--oxblood); color:var(--oxblood); } .underlined-link:hover { letter-spacing:.12em; }
.activity { background:var(--ultramarine); color:var(--paper); border-color:#61708a; } .activity .section-head { border-color:#667690; color:#c6a77b; } .activity .section-head span:last-child { color:#abb6c2; } .activity-heading { display:flex; align-items:end; justify-content:space-between; gap:70px; padding:74px 0 51px; } .activity h2 { font-size:clamp(77px,7.8vw,132px); line-height:.86; letter-spacing:-.06em; } .activity h2 em { color:#d8bea0; font-weight:400; } .activity-heading p { max-width:340px; color:#c0c7ca; line-height:1.6; font-size:13px; } .company-grid { border-top:1px solid #718097; } .company { display:grid; grid-template-columns:115px 1fr auto; align-items:center; min-height:118px; border-bottom:1px solid #718097; transition:background .2s,padding .2s; } .company:hover { background:#ffffff0a; padding-left:12px; } .company-number { color:#b8a07f; font-size:12px; } .company-name { font:500 clamp(38px,4.4vw,70px)/1 var(--serif); letter-spacing:-.045em; } .company-kind { color:#a8b5c3; }
.process { background:var(--paper); } .process-layout { display:grid; grid-template-columns:56% 44%; gap:4%; padding-top:83px; } .process h2 em { color:var(--oxblood); } .process-layout>div>p { margin-top:32px; } .steps { padding-right:9%; } .step { display:grid; grid-template-columns:58px 1fr; gap:22px; border-bottom:1px solid var(--line); padding:27px 0; } .step:first-child { padding-top:0; } .step>span { color:var(--oxblood); padding-top:4px; } .step h3 { font-size:31px; line-height:1; letter-spacing:-.02em; } .step p { margin-top:10px; font-size:13px; line-height:1.65; color:#626d6f; max-width:330px; }
.contact { background:var(--oxblood); color:#f2e6d6; padding:34px 7.3% 105px; position:relative; } .contact::before { content:''; position:absolute; inset:0; background:repeating-radial-gradient(circle at 12% 90%,transparent 0 48px,#e9cba40c 49px,transparent 50px); pointer-events:none; } .contact-top { position:relative; display:flex; justify-content:space-between; border-bottom:1px solid #b6887e; padding-bottom:22px; } .contact-layout { position:relative; display:grid; grid-template-columns:50% 50%; gap:4%; padding-top:73px; } .contact .latin-note { color:#e5c09c; } .contact h2 { font-size:clamp(90px,9.2vw,145px); line-height:.8; letter-spacing:-.065em; margin:35px 0 36px; } .contact h2 em { color:#e0b988; font-weight:400; } .contact-copy>p:not(.latin-note) { max-width:365px; font-size:17px; line-height:1.65; color:#efddd0; } .contact-ornament { height:1px; width:35%; margin-top:70px; background:#d1a17c; box-shadow:0 7px 0 #d1a17c; } .contact-form { background:var(--paper); color:var(--ink); padding:39px 42px 35px; box-shadow:16px 16px 0 #491e286b; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .field { margin-bottom:26px; } .field label { display:block; color:var(--oxblood); margin-bottom:12px; } .field input,.field select,.field textarea { appearance:none; width:100%; border:0; border-bottom:1px solid #b7aaa0; border-radius:0; background:transparent; padding:10px 0 12px; outline:none; color:var(--ink); font-size:15px; } .field input::placeholder,.field textarea::placeholder { color:#8f8c83; } .field input:focus,.field select:focus,.field textarea:focus { border-color:var(--oxblood); box-shadow:0 1px 0 var(--oxblood); } .field textarea { resize:vertical; min-height:75px; } .form-end { display:flex; align-items:end; gap:27px; } .form-end p { font-size:9px; line-height:1.6; color:#79746e; max-width:220px; } .form-end button { margin-left:auto; padding:15px 18px; background:var(--ultramarine); border:1px solid var(--ultramarine); color:var(--paper); white-space:nowrap; font-size:10px; letter-spacing:.07em; } .form-end button:disabled { cursor:not-allowed; opacity:.55; } .trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.site-footer { display:grid; grid-template-columns:1fr 1.4fr 1fr; align-items:start; gap:35px; padding:50px 7.3% 65px; background:var(--deep-blue); color:var(--paper); } .footer-brand { display:block; font:600 23px/.9 var(--serif); letter-spacing:.04em; } .footer-subline { display:block; color:#b8a382; margin-top:12px; } .site-footer p { max-width:450px; color:#b6bfca; font-size:11px; line-height:1.65; } .footer-end { text-align:right; color:#b9a987; white-space:nowrap; }
@media(max-width:1050px) { .main-nav { gap:20px; } .hero { grid-template-columns:54% 46%; } .hero-copy { padding-left:8%; padding-right:6%; } .hero-overline span:last-child { display:none; } .hero h1 { font-size:clamp(64px,7.8vw,89px); } .architectural-plate { width:84%; } .approach h2,.process h2 { font-size:clamp(57px,6vw,82px); } .form-row { grid-template-columns:1fr; gap:0; } .contact-form { padding:32px; } .form-end { flex-direction:column; align-items:stretch; gap:16px; } .form-end button { margin-left:0; } }
@media(max-width:700px) { .site-header { grid-template-columns:1fr auto; height:75px; padding:0 6%; } .brand-icon { height:39px; width:39px; } .brand-name { font-size:16px; } .main-nav { display:none; } .nav-contact { padding:12px 13px; font-size:9px; } .hero { display:block; height:auto; min-height:0; } .hero-copy { min-height:615px; padding:29px 7% 41px; } .hero-overline { font-size:8px; } .hero-margin { display:none; } .hero-thesis { margin:51px 0 45px; } .latin-note { font-size:22px; } .hero h1 { font-size:clamp(63px,13.9vw,91px); margin:28px 0 35px; } .hero-description { font-size:15px; } .hero-action>span { display:none; } .primary-link { font-size:10px; } .hero-art { height:570px; padding:25px 8% 20px; } .art-meta { font-size:8px; } .architectural-plate { width:79%; height:76%; } .art-caption { font-size:8px; } .art-caption span:last-child { display:none; } .interlude { gap:11px; min-height:50px; font-size:8px; } .interlude span:first-child { display:none; } .interlude-rule:first-of-type { display:none; } .section-frame { padding:27px 6% 80px; } .section-head { font-size:8px; } .approach-layout,.process-layout { grid-template-columns:1fr; gap:38px; padding-top:61px; } .section-prelude { font-size:21px; } .approach h2,.process h2 { font-size:clamp(61px,11vw,77px); } .approach-aside { padding:0; } .engraving-line { margin-bottom:18px; } .approach-aside p,.process-layout>div>p { font-size:15px; } .activity-heading { display:block; padding:60px 0 35px; } .activity h2 { font-size:clamp(68px,12vw,89px); } .activity-heading p { margin-top:26px; font-size:12px; } .company { grid-template-columns:35px 1fr; min-height:90px; } .company-name { font-size:42px; } .company-kind { display:none; } .steps { padding:0; } .step { grid-template-columns:45px 1fr; gap:15px; } .contact { padding:27px 6% 85px; } .contact-top { font-size:8px; } .contact-layout { grid-template-columns:1fr; gap:48px; padding-top:57px; } .contact h2 { font-size:clamp(93px,22vw,125px); margin:25px 0; } .contact-copy>p:not(.latin-note) { font-size:15px; } .contact-ornament { display:none; } .contact-form { padding:31px 24px; box-shadow:9px 9px 0 #491e286b; } .site-footer { grid-template-columns:1fr; padding:40px 6% 50px; gap:21px; } .footer-end { text-align:left; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.thank-you { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; }
.thank-you-copy { padding:7%; display:flex; flex-direction:column; justify-content:space-between; background:var(--paper); }
.thank-you-art { min-height:100svh; }
@media(max-width:700px) { .thank-you { grid-template-columns:1fr; } .thank-you-copy { min-height:100svh; padding:8%; gap:90px; } .thank-you-art { min-height:570px; height:570px; } }