@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink: #293b35; --paper: #f5f0e6; --orange: #e9784f; --line: rgba(245, 240, 230, .28); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: "DM Sans", sans-serif; }
main, footer { max-width: 1440px; margin: auto; padding-left: clamp(1rem, 5vw, 5rem); padding-right: clamp(1rem, 5vw, 5rem); }
nav { display: flex; align-items: center; gap: 28px; padding: 26px 0 20px; border-bottom: 1px solid var(--line); font: 700 .83rem "DM Sans", sans-serif; }
nav a { color: var(--paper); text-decoration: none; }
.wordmark { color: var(--paper); font: 500 1rem "DM Mono", monospace; letter-spacing: -.08em; text-decoration: none; margin-right: auto; }
.wordmark span, .eyebrow { color: #ff9c7e; }
.anvil-link { color: #ff9c7e; }
.hero { min-height: 700px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 5vw; align-items: center; padding: 11vh 0 80px; }
.hero img { width: 100%; min-height: 440px; height: min(58vw, 650px); object-fit: cover; background: #333; }
.eyebrow, .number, .fine { font: 500 .74rem "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; letter-spacing: -.05em; }
h1 { margin-bottom: 28px; font-size: clamp(4rem, 7vw, 7.5rem); line-height: .86; }
h1 em { color: var(--orange); font-style: italic; }
.intro { max-width: 420px; font-size: 1.12rem; line-height: 1.55; }
.jump { display: inline-block; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--paper); color: var(--paper); font-weight: 700; text-decoration: none; }
.jump span { padding-left: 9px; color: #ff9c7e; }
.line { padding: 105px 0; border-top: 1px solid var(--line); }
h2 { max-width: 750px; margin: 14px 0 52px; font-size: clamp(3rem, 5.6vw, 6rem); line-height: .9; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.product-grid article { min-height: 320px; padding: 28px; display: flex; flex-direction: column; }
.product-grid article + article { border-left: 1px solid var(--line); }
.product-grid article:nth-child(2) { background: var(--orange); color: var(--ink); }
.product-grid h3 { margin: auto 0 16px; font-size: clamp(2rem, 3.2vw, 3.3rem); line-height: .91; }
.product-grid p { max-width: 310px; margin-bottom: 0; line-height: 1.55; }
.system { display: grid; grid-template-columns: 1fr 1fr; background: #3b5147; color: var(--paper); }
.system img { width: 100%; height: 600px; object-fit: cover; }
.system > div { padding: 100px 14%; align-self: center; }
.system .eyebrow { color: #ffb19a; }
.system h2 { margin-bottom: 25px; }
.system > div > p { font-size: 1.08rem; line-height: 1.6; }
.system .fine { margin-top: 32px; color: #ffb19a; font-size: .72rem; }
footer { display: flex; justify-content: space-between; align-items: center; min-height: 100px; border-top: 1px solid var(--line); font: .72rem "DM Mono", monospace; }
footer .wordmark { margin: 0; }
footer p { margin: 0; }
footer a { color: inherit; }
@media (max-width: 760px) { nav { gap: 15px; } .anvil-link { display: none; } .hero, .system, .product-grid { grid-template-columns: 1fr; } .hero { padding-top: 13vh; } .hero img { min-height: 330px; height: 76vw; } .product-grid article + article { border-left: 0; border-top: 1px solid var(--line); } .system img { height: 430px; } .system > div { padding: 80px 9%; } footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; } }

/* Return-to-parent button (GoGo Mojo Co.) */
.gmc-backlink-wrap { padding: 48px 0 28px; border-top: 1px solid rgba(245,240,230,.28); }
.gmc-backlink { display: inline-flex; align-items: center; gap: 10px; color: #f5f0e6 !important; background: transparent; text-decoration: none; font: 700 .95rem "DM Sans", sans-serif; border: 1px solid #e9784f; border-radius: 999px; padding: 12px 20px; transition: background .2s, color .2s; }
.gmc-backlink:hover, .gmc-backlink:focus-visible { background: #e9784f; color: #293b35 !important; }