/* Fonts are loaded via + in each
page's instead of @import — @import blocks the page from loading
the stylesheet and the font in parallel, which slows the first paint. */
/* ---------- Tokens ---------- */
:root{
--ink: #0D141F;
--ink-panel: #17202F;
--ink-line: rgba(237,234,224,0.14);
--diagram-line: rgba(245,243,236,0.4);
--paper: #EFEBDE;
--paper-panel: #E7E2D2;
--paper-line: rgba(16,24,38,0.14);
--text-ink: #F5F3EC;
--text-ink-muted: #AEB8C6;
--text-paper: #1B2233;
--text-paper-muted: #524C3D;
--brass: #E1AD21;
--brass-deep: #B8860B;
--brass-light: #FFE28A;
--radius: 3px;
--max: 1120px;
--gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
background: var(--paper);
color: var(--text-paper);
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
font-family: 'Space Grotesk', sans-serif;
line-height: 1.12;
margin: 0 0 0.5em;
font-weight: 600;
letter-spacing: -0.01em;
}
p{ margin:0 0 1em; }
.container{
max-width: var(--max);
margin: 0 auto;
padding: 0 1.5rem;
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
:focus-visible{
outline: 2px solid var(--brass);
outline-offset: 3px;
}
/* ---------- Section backgrounds ---------- */
.section{ padding: clamp(3.5rem,7vw,6.5rem) 0; }
.on-ink{
background: var(--ink);
color: var(--text-ink);
background-image:
linear-gradient(var(--ink-line) 1px, transparent 1px),
linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center top;
}
.on-ink h1,.on-ink h2,.on-ink h3{ color: var(--text-ink); }
.on-ink .muted{ color: var(--text-ink-muted); }
.on-paper{ background: var(--paper); color: var(--text-paper); }
.on-paper .muted{ color: var(--text-paper-muted); }
.panel-alt{ background: var(--paper-panel); }
.eyebrow{
font-family:'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight:600;
color: var(--brass);
margin: 0 0 0.9rem;
}
/* ---------- Nav ---------- */
.site-nav{
position: sticky; top:0; z-index: 40;
background: rgba(16,24,38,0.94);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--ink-line);
}
.nav-row{
display:flex; align-items:center; justify-content:space-between;
padding: 1rem 1.5rem;
max-width: var(--max);
margin: 0 auto;
}
.brand{
font-family:'Space Grotesk', sans-serif;
font-weight:700;
font-size: 1.15rem;
color: var(--text-ink);
text-decoration:none;
display:flex; align-items:baseline; gap:0.4rem;
}
.brand small{
font-family:'IBM Plex Sans',sans-serif;
font-weight:400;
font-size:0.7rem;
color: var(--brass);
display:inline-block;
animation: badge-in-out 5s ease-in-out infinite;
}
@keyframes badge-in-out{
0% { transform: translateX(0); opacity: 1; }
40% { transform: translateX(-22px); opacity: 0; }
41% { transform: translateX(-22px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.nav-links{
display:flex; align-items:center; gap: 2rem;
list-style:none; margin:0; padding:0;
}
.nav-links a{
color: var(--text-ink-muted);
text-decoration:none;
font-size:0.95rem;
}
.nav-links a:hover, .nav-links a.active{ color: var(--text-ink); }
.nav-cta{
display:flex; align-items:center; gap:1rem;
}
.nav-phone{
color: var(--text-ink-muted);
text-decoration:none;
font-size:0.9rem;
white-space:nowrap;
}
.nav-toggle{
display:none;
background:none; border:none; color: var(--text-ink);
font-size:1.5rem; cursor:pointer; padding:0.25rem 0.5rem;
}
@media (max-width: 1080px){
.nav-links{
position:absolute; top:100%; left:0; right:0;
background: var(--ink);
flex-direction:column; align-items:flex-start;
padding: 1.5rem; gap:1.25rem;
border-bottom: 1px solid var(--ink-line);
display:none;
}
.nav-links.open{ display:flex; }
.nav-toggle{ display:block; }
}
@media (max-width: 480px){
.nav-phone{ display:none; }
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:0.5rem;
font-family:'Space Grotesk', sans-serif;
font-weight:600; font-size:0.95rem;
padding: 0.85rem 1.5rem;
border-radius: var(--radius);
text-decoration:none;
border: 1px solid transparent;
cursor:pointer;
transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-brass{
background: var(--brass);
color: #171008;
}
.btn-brass:hover{ background: var(--brass-deep); box-shadow: 0 10px 28px -10px rgba(203,161,53,0.55); }
.btn-outline-ink{
border-color: var(--ink-line);
color: var(--text-ink);
background: transparent;
}
.btn-outline-ink:hover{ border-color: var(--brass); color: var(--brass); }
.btn-outline-paper{
border-color: var(--paper-line);
color: var(--text-paper);
background: transparent;
}
.btn-outline-paper:hover{ border-color: var(--brass-deep); color: var(--brass-deep); }
.btn-block{ width:100%; justify-content:center; }
/* ---------- Hero ---------- */
.hero{
display:grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items:center;
}
@media (max-width: 900px){ .hero{ grid-template-columns:1fr; } }
.hero h1{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.75rem; }
.hero-note{ margin-top:1.5rem; font-size:0.9rem; color: var(--text-ink-muted); }
.gold-text{
background: linear-gradient(100deg, var(--brass-deep) 0%, var(--brass-light) 35%, var(--brass) 60%, var(--brass-light) 100%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 6s linear infinite;
}
@keyframes shimmer{
0%{ background-position: 0% 50%; }
100%{ background-position: 220% 50%; }
}
.blueprint-frame{
position:relative; border:1px solid var(--ink-line);
padding: 2rem 1.5rem; border-radius: var(--radius);
background: rgba(237,234,224,0.03);
box-shadow: 0 40px 80px -40px rgba(0,0,0,0.5), 0 0 0 1px rgba(203,161,53,0.1);
}
/* "current flowing" effect on the hero diagram's connector lines */
.current-line{
stroke-dasharray: 5 5;
animation: current-flow 1.4s linear infinite;
}
@keyframes current-flow{
to{ stroke-dashoffset: -20; }
}
.current-dot{ filter: url(#pulseGlow); }
.tick{ position:absolute; width:14px; height:14px; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--brass); }
.tick::before{ width:100%; height:1px; top:0; left:0; }
.tick::after{ width:1px; height:100%; top:0; left:0; }
.tick.tl{ top:-1px; left:-1px; }
.tick.tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.tick.bl{ bottom:-1px; left:-1px; transform:scaleY(-1); }
.tick.br{ bottom:-1px; right:-1px; transform:scale(-1,-1); }
/* ---------- Trust bar ---------- */
.trust-bar{
display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem;
border-top:1px solid var(--paper-line);
padding-top: 2.5rem; margin-top: 2.5rem;
}
@media (max-width: 760px){ .trust-bar{ grid-template-columns: repeat(2,1fr); } }
.trust-item{ font-size:0.92rem; }
.trust-item strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:1rem; margin-bottom:0.25rem; }
/* ---------- Process ---------- */
.process-section{ position:relative; overflow:hidden; }
.process-section::before{
content:"";
position:absolute; top:-20%; right:-10%;
width:55%; height:150%;
background: radial-gradient(circle, rgba(203,161,53,0.14), transparent 65%);
pointer-events:none;
}
.process-section::after{
content:"";
position:absolute; bottom:-30%; left:-15%;
width:45%; height:120%;
background: radial-gradient(circle, rgba(203,161,53,0.06), transparent 70%);
pointer-events:none;
}
.process-section .container{ position:relative; z-index:1; }
.process-list{
list-style:none; margin:0; padding:0;
display:grid; gap: 1px;
background: var(--ink-line);
border: 1px solid var(--ink-line);
border-radius: var(--radius);
overflow:hidden;
box-shadow: 0 40px 80px -35px rgba(0,0,0,0.65);
}
.process-list li{
background: var(--ink-panel);
padding: 1.75rem 2rem;
display:grid; grid-template-columns: 3rem 1fr; gap:1.5rem; align-items:start;
transition: background 0.2s ease;
}
.process-list li:hover{ background: #1B2536; }
.process-num{
font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem;
color: var(--brass);
}
.process-list h3{ font-size:1.05rem; margin-bottom:0.35rem; color:var(--text-ink); }
.process-list p{ margin:0; color: var(--text-ink-muted); font-size:0.95rem; }
/* ---------- Cards / grid ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--gap); }
@media (max-width: 860px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.card{
background: var(--paper); border:1px solid var(--paper-line);
border-radius: var(--radius); padding:1.75rem;
}
.card h3{ font-size:1.15rem; }
/* ---------- Pricing ---------- */
.price-card{
border:1px solid var(--paper-line);
border-radius: var(--radius);
padding: 2rem;
background: var(--paper);
display:flex; flex-direction:column;
}
.price-card.featured{
border-color: var(--brass);
background: linear-gradient(160deg, var(--paper-panel), #EFE3C2);
box-shadow: 0 30px 60px -30px rgba(203,161,53,0.45);
}
/* These cards keep a light background even inside a dark (.on-ink) section,
so their text must stay dark regardless of the section's ambient color. */
.on-ink .price-card{ color: var(--text-paper); }
.on-ink .price-card .muted{ color: var(--text-paper-muted); }
.price-ribbon{
display:inline-block; font-family:'Space Grotesk',sans-serif; font-weight:600;
font-size:0.75rem; letter-spacing:0.02em; color:#171008;
background: var(--brass); padding:0.3rem 0.7rem; border-radius:2px;
margin-bottom:0.75rem;
}
.price-tag{
font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.2rem;
margin: 0.5rem 0 0.25rem;
}
.price-tag span{ font-size:1rem; font-weight:500; color: var(--text-paper-muted); }
.price-list{ list-style:none; margin: 1.25rem 0; padding:0; font-size:0.92rem; }
.price-list li{ padding: 0.55rem 0; border-top:1px solid var(--paper-line); }
.price-list li:first-child{ border-top:none; }
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
@media (max-width: 760px){ .tier-grid{ grid-template-columns:1fr; } }
.tier{
border:1px solid var(--paper-line); border-radius: var(--radius);
padding:1.25rem; text-align:left;
}
.tier strong{ display:block; font-family:'Space Grotesk',sans-serif; }
.tier .amount{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.4rem; display:block; margin:0.35rem 0; }
.tier-list{ list-style:none; margin:0.4rem 0 0; padding:0; font-size:0.8rem; color: var(--text-paper-muted); }
.tier-list li{ padding:0.2rem 0; padding-left:0.9rem; position:relative; }
.tier-list li::before{ content:"–"; position:absolute; left:0; color: var(--brass-deep); }
/* ---------- Comparison table ---------- */
.compare-wrap{ overflow-x:auto; margin-top:3rem; border:1px solid var(--ink-line); border-radius: var(--radius); }
.compare-table{ width:100%; border-collapse:collapse; min-width:560px; }
.compare-table th, .compare-table td{
padding: 1rem 1.5rem; text-align:left; font-size:0.95rem;
border-bottom:1px solid var(--ink-line);
}
.compare-table thead th{
font-family:'Space Grotesk',sans-serif; color: var(--text-ink);
background: var(--ink-panel); font-size:1rem;
}
.compare-table tbody th{
color: var(--text-ink); font-weight:500; background: var(--ink);
}
.compare-table td{ color: var(--text-ink-muted); background: var(--ink); }
.compare-table td.yes{ color: var(--text-ink); }
.compare-table td.yes::before{ content:"✓ "; color: var(--brass); font-weight:700; }
.compare-table tr:last-child th, .compare-table tr:last-child td{ border-bottom:none; }
/* ---------- Scroll reveal ---------- */
.reveal{
opacity:0; transform: translateY(18px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }
.signal-line{ margin-top:1.75rem; opacity:0.9; }
/* ---------- Portfolio ---------- */
.device-mockup{ position:relative; }
.browser-frame{
border:1px solid var(--paper-line);
border-radius: 10px 10px 3px 3px;
overflow:hidden;
background: #fff;
}
.device-base{
height: 16px;
margin: 0 -6px;
background: linear-gradient(180deg, #2A2F38, #14171C);
border-radius: 0 0 8px 8px;
position:relative;
}
.device-base::after{
content:"";
position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
width:22%; height:7px;
background: #0D0F12;
border-radius: 0 0 5px 5px;
}
.browser-bar{
display:flex; align-items:center; gap:0.5rem;
background: var(--ink);
padding:0.6rem 0.9rem;
}
.browser-dot{ width:9px; height:9px; border-radius:50%; background: var(--ink-line); }
.browser-url{
margin-left:0.75rem;
font-size:0.8rem; color: var(--text-ink-muted);
font-family:'IBM Plex Sans',sans-serif;
background: rgba(237,234,224,0.06);
border:1px solid var(--ink-line);
border-radius:2px;
padding:0.25rem 0.65rem;
flex:1;
}
.browser-body{
min-height: 220px;
background: var(--paper-panel);
display:flex; align-items:center; justify-content:center;
color: var(--text-paper);
font-weight: 500;
font-size:0.95rem;
padding: 1.5rem;
text-align:center;
position:relative;
overflow:hidden;
}
.browser-body.has-image{ padding:0; }
.browser-body img{
width:100%; height:130%; object-fit:cover; display:block;
position:relative; top:-15%;
will-change: transform;
}
.browser-body .img-fallback{ display:none; }
.portfolio-card{ position:relative; border:1px solid var(--paper-line); border-radius: var(--radius); padding: 1.5rem; background:var(--paper); }
.portfolio-card .tick::before,.portfolio-card .tick::after{ background: var(--brass-deep); }
.coming-soon{
border: 1px dashed var(--paper-line);
border-radius: var(--radius);
padding: 2rem; text-align:center; color: var(--text-paper-muted);
}
/* ---------- Style-direction marquee ---------- */
.marquee-wrap{
overflow:hidden; position:relative; margin-top:2.5rem;
-webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee-track{
display:flex; gap:1.5rem; width:max-content;
animation: marquee-scroll 30s linear infinite;
}
.marquee-track:hover{ animation-play-state: paused; }
@keyframes marquee-scroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
.style-card{
width:220px; flex-shrink:0; border-radius:6px; overflow:hidden;
border:1px solid var(--paper-line);
box-shadow: 0 20px 40px -25px rgba(0,0,0,0.35);
}
.style-card .mini-bar{ display:flex; gap:4px; padding:7px 9px; background:rgba(0,0,0,0.25); }
.style-card .mini-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.3); }
.style-card .mini-body{ padding:16px; height:120px; }
.style-card .sc-title{ height:10px; width:70%; border-radius:2px; margin-bottom:8px; }
.style-card .sc-sub{ height:6px; width:50%; border-radius:2px; margin-bottom:14px; opacity:0.7; }
.style-card .sc-btn{ width:56px; height:16px; border-radius:3px; margin-bottom:10px; }
.style-card .sc-photo{ width:100%; height:32px; border-radius:3px; }
.style-card figcaption{
font-family:'Space Grotesk',sans-serif; font-size:0.8rem; font-weight:600;
text-align:center; padding:0.6rem 0; color: var(--text-paper);
}
.style-card.modern{ background:#FAFAF8; }
.style-card.modern .sc-title, .style-card.modern .sc-btn{ background:#1A1A1A; }
.style-card.modern .sc-sub{ background:#4A4A46; }
.style-card.modern .sc-photo{ background:#E7E5DE; }
.style-card.bold{ background:#101826; }
.style-card.bold .sc-title{ background:#F5F3EC; }
.style-card.bold .sc-sub{ background:#AEB8C6; }
.style-card.bold .sc-btn{ background:#CBA135; }
.style-card.bold .sc-photo{ background:#1B2536; }
.style-card.bold figcaption{ background:#101826; color:#F5F3EC; }
.style-card.classic{ background:#F3F1EA; }
.style-card.classic .sc-title, .style-card.classic .sc-btn{ background:#16233B; }
.style-card.classic .sc-sub{ background:#4C5A72; }
.style-card.classic .sc-photo{ background:#D9D4C4; }
.style-card.rustic{ background:#EFE6D8; }
.style-card.rustic .sc-title{ background:#5B3A21; }
.style-card.rustic .sc-sub{ background:#8A6A46; }
.style-card.rustic .sc-btn{ background:#6E7F52; }
.style-card.rustic .sc-photo{ background:#C9B294; }
/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--ink-line); }
.faq-item:last-child{ border-bottom:1px solid var(--ink-line); }
.faq-item summary{
cursor:pointer; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:1rem;
padding: 1.4rem 0.25rem;
font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem;
color: var(--text-ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:"+"; color: var(--brass); font-size:1.4rem; font-weight:500; flex-shrink:0;
transition: transform 0.2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-a{ padding: 0 0.25rem 1.5rem; color: var(--text-ink-muted); max-width:65ch; }
/* ---------- Form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.25rem; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:0.85rem; font-weight:600; color: var(--text-paper); }
.field input, .field textarea, .field select{
font-family:'IBM Plex Sans',sans-serif;
font-size:1rem;
padding: 0.8rem 0.9rem;
border: 1px solid var(--paper-line);
border-radius: var(--radius);
background: #fff;
color: var(--text-paper);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--brass-deep); }
.hp-field{ position:absolute; left:-9999px; }
.form-section{ border:none; padding:0; margin:0 0 2rem; min-width:0; }
.form-section legend{
font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem;
color: var(--text-paper); padding:0 0 0.6rem; margin-bottom:1.25rem;
width:100%; border-bottom:1px solid var(--paper-line);
}
.checkbox-group{ display:flex; flex-direction:column; gap:0.75rem; }
.checkbox-item{
display:flex; align-items:flex-start; gap:0.65rem;
font-size:0.95rem; cursor:pointer;
}
.checkbox-item input{ margin-top:0.2rem; accent-color: var(--brass-deep); width:16px; height:16px; flex-shrink:0; }
.style-option{
display:flex; align-items:flex-start; gap:0.75rem;
border:1px solid var(--paper-line); border-radius: var(--radius);
padding:0.9rem 1rem; cursor:pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.style-option:hover{ border-color: var(--brass-deep); }
.style-option:has(input:checked){ border-color: var(--brass-deep); background: rgba(203,161,53,0.07); }
.style-option input{ margin-top:0.3rem; accent-color: var(--brass-deep); flex-shrink:0; }
.contact-strip{
display:flex; flex-wrap:wrap; gap:2rem; margin-top:2.5rem;
border-top:1px solid var(--paper-line); padding-top:2rem;
}
.contact-method{ display:flex; align-items:center; gap:0.75rem; }
.contact-method .icon{ color: var(--brass-deep); flex-shrink:0; }
.contact-method a{ text-decoration:none; font-weight:600; }
.contact-method a:hover{ color: var(--brass-deep); }
/* ---------- Footer ---------- */
.site-footer{
background: var(--ink); color: var(--text-ink-muted);
padding: 3rem 0 2rem; font-size:0.9rem;
}
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-row a{ text-decoration:none; color: var(--text-ink-muted); }
.footer-row a:hover{ color: var(--text-ink); }
.footer-links{ display:flex; gap:1.5rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
/* ---------- Page header (inner pages) ---------- */
.page-header{ padding: clamp(2.5rem,5vw,4rem) 0 2rem; }
.page-header h1{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.page-header p{ max-width: 60ch; }
.section-head{ max-width: 60ch; margin-bottom: 2.5rem; }