@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Libre+Caslon+Display&display=swap');

:root { --navy:#122a43; --navy-deep:#0c2034; --blue:#2d67e3; --cream:#f5f0e7; --paper:#fffdf8; --ink:#172b42; --muted:#607083; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:82px; max-width:1240px; margin:auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(18,42,67,.12); }
.brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:750; letter-spacing:-.6px; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:white; background:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-style:italic; }
nav { display:flex; gap:34px; font-size:14px; font-weight:600; color:#4d5d6e; }
nav a:hover { color:var(--blue); }
.header-cta { padding:11px 18px; border:1px solid var(--navy); border-radius:4px; font-size:13px; font-weight:700; transition:.2s; }
.header-cta:hover { background:var(--navy); color:white; }
.hero { min-height:690px; max-width:1240px; margin:auto; padding:78px 42px 70px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:80px; overflow:hidden; }
.eyebrow,.overline { text-transform:uppercase; letter-spacing:2px; font-weight:800; font-size:11px; color:var(--blue); }
.eyebrow { display:flex; align-items:center; gap:10px; }.eyebrow span { width:28px; height:2px; background:var(--blue); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:24px 0; color:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-size:66px; line-height:1.03; letter-spacing:-2.5px; font-weight:600; }
h1 em,.example h2 em,.contact h2 em { color:var(--blue); font-weight:500; }
.hero-lead { max-width:590px; font-size:18px; line-height:1.7; color:var(--muted); }
.hero-actions { margin-top:34px; display:flex; align-items:center; gap:30px; }
.button { min-height:48px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:22px; border-radius:4px; font-size:14px; font-weight:750; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(18,42,67,.15); }
.button-primary { background:var(--blue); color:white; }
.text-link { padding:10px 0; border-bottom:1px solid #adb6c0; font-size:14px; font-weight:700; }
.trust-row { display:flex; gap:26px; margin-top:42px; color:#6c7986; font-size:12px; }.trust-row b { margin-right:6px; color:var(--blue); }
.hero-visual { position:relative; height:520px; }
.paper { position:absolute; background:#fff; box-shadow:0 24px 60px rgba(28,48,69,.18); }
.paper-back { width:390px; height:410px; top:22px; left:18px; padding:38px; transform:rotate(-7deg); background:#e8edf3; border:1px solid #d4dbe3; }
.paper-front { width:405px; min-height:475px; top:5px; right:22px; padding:28px 34px; transform:rotate(2deg); border:1px solid #e4e6e8; }
.paper-title { font-weight:700; color:#6e7783; margin-bottom:40px; }
.scribble { width:75%; height:8px; margin:18px 0; border-radius:10px; background:#c3cbd3; }.scribble.wide { width:94%; }.scribble.short { width:52%; }
.paper-bar { display:flex; justify-content:space-between; color:#8792a0; font-size:9px; text-transform:uppercase; letter-spacing:1.3px; }
.paper-kicker { margin:43px 0 7px; color:var(--blue); font-size:9px; font-weight:800; letter-spacing:1.6px; }
.paper h2 { color:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-size:40px; line-height:.98; font-weight:600; }
.paper-rule { width:100%; height:1px; margin:21px 0; background:#dce1e5; }
.paper-label { color:#8792a0; font-size:8px; letter-spacing:1.5px; font-weight:800; }.paper-text { color:#47586a; font-size:12px; line-height:1.55; }
.process { display:flex; align-items:center; gap:8px; padding:12px 10px; margin:17px 0; background:#edf3ff; color:var(--navy); font-size:10px; font-weight:750; }.process i { color:var(--blue); font-style:normal; }
.paper-note { padding:10px 13px; border-left:3px solid var(--blue); background:#f8f4e9; color:#586678; font-size:9px; }.paper-note b { display:block; margin-bottom:2px; color:var(--navy); }
.sticker { position:absolute; right:-2px; bottom:14px; width:112px; height:112px; display:grid; place-content:center; transform:rotate(-7deg); border-radius:50%; background:var(--blue); color:white; text-align:center; font-size:11px; line-height:1.5; letter-spacing:1.5px; box-shadow:0 14px 30px rgba(45,103,227,.28); }
.section { padding:110px max(32px,calc((100vw - 1176px)/2)); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:48px; }
.section-heading h2,.pricing-heading h2 { margin:9px 0 0; color:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-size:44px; font-weight:600; letter-spacing:-1px; }
.section-heading>p { max-width:430px; margin:0; color:var(--muted); line-height:1.7; font-size:14px; }
.services { background:var(--cream); }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { min-height:340px; padding:31px; background:var(--paper); border-top:3px solid transparent; transition:.2s; }
.service-card:hover { transform:translateY(-5px); border-top-color:var(--blue); box-shadow:0 16px 35px rgba(32,50,68,.08); }
.card-number { color:var(--blue); font-family:"Libre Caslon Display",Georgia,serif; font-style:italic; font-size:18px; }
.service-card h3 { margin:55px 0 14px; color:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-size:26px; font-weight:600; }
.service-card p { min-height:67px; color:var(--muted); line-height:1.6; font-size:13px; }
.service-card ul { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:25px 0 0; list-style:none; }.service-card li { padding:6px 9px; background:#edf2f7; color:#526273; font-size:10px; font-weight:700; }
.example { display:grid; grid-template-columns:.76fr 1.24fr; gap:80px; align-items:center; min-height:760px; background:var(--navy); color:white; }.overline.light { color:#9fbdf9; }
.example h2,.contact h2 { margin:12px 0 25px; font-family:"Libre Caslon Display",Georgia,serif; font-size:48px; line-height:1.08; font-weight:600; }
.example-copy>p:not(.overline) { color:#b8c5d1; line-height:1.75; font-size:14px; }
.example-points { display:grid; gap:13px; margin-top:34px; color:#e0e7ed; font-size:13px; }.example-points span { display:flex; align-items:center; gap:12px; }.example-points b { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#29425c; color:#a9c3fa; font-size:10px; }
.sample-stat { display:flex; align-items:center; gap:16px; margin-top:28px; }.sample-stat strong { color:white; font-family:"Libre Caslon Display",Georgia,serif; font-size:52px; line-height:1; }.sample-stat span { color:#9fb0c1; font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:1px; }
.sample-gallery { position:relative; min-height:540px; display:grid; grid-template-columns:.82fr 34px 1fr 34px 1fr; align-items:center; gap:0; }.sample-page { position:relative; margin:0; overflow:visible; background:white; box-shadow:0 28px 65px rgba(0,0,0,.35); }.sample-page img { display:block; width:100%; height:410px; object-fit:cover; object-position:top; }.sample-source img { height:190px; object-fit:cover; }.sample-page figcaption { display:block; min-height:54px; padding:12px 13px; color:#647384; background:#fff; font-size:8px; line-height:1.4; }.sample-page figcaption span { display:block; margin-bottom:3px; color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:1px; }
.stage-label { position:absolute; z-index:4; top:-15px; left:12px; padding:7px 10px; background:#e1e7ed; color:#42566b; text-transform:uppercase; white-space:nowrap; font-size:7px; font-weight:800; letter-spacing:.8px; box-shadow:0 5px 15px rgba(0,0,0,.15); }.sample-after .stage-label { background:var(--blue); color:white; }.sample-source { transform:rotate(-3deg); }.sample-before { z-index:2; transform:rotate(-1deg); }.sample-after { z-index:2; transform:rotate(3deg); }
.transform-arrow { z-index:5; width:38px; height:38px; display:grid; place-items:center; justify-self:center; border-radius:50%; background:var(--blue); color:white; box-shadow:0 8px 20px rgba(0,0,0,.3); }.transform-arrow span { font-size:17px; }.sample-badge { z-index:6; position:absolute; right:22%; bottom:-5px; width:108px; height:108px; display:grid; place-content:center; transform:rotate(-7deg); border-radius:50%; background:#f0a52b; color:var(--navy); text-align:center; box-shadow:0 15px 32px rgba(0,0,0,.3); }.sample-badge strong { font-family:"Libre Caslon Display",Georgia,serif; font-size:17px; }.sample-badge span { margin-top:5px; color:#5d4a2f; font-size:7px; text-transform:uppercase; letter-spacing:1px; }
.comparison { display:grid; grid-template-columns:1fr 38px 1fr; align-items:center; }
.comparison-card { position:relative; min-height:345px; padding:30px; color:var(--navy); background:white; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.comparison-label { position:absolute; top:-13px; left:22px; padding:7px 13px; background:#dbe2e9; color:#4f6172; text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:1.2px; }
.comparison-card.before { transform:rotate(-3deg); background:#f3efe6; font-family:"Comic Sans MS",cursive; color:#606975; }.comparison-card.before h3 { margin-top:30px; text-decoration:underline; font-size:22px; }.comparison-card.before p { line-height:1.6; font-size:14px; }
.rough-circle { display:inline-block; margin:20px 0 0 60px; padding:12px; border:2px solid #d48672; border-radius:50%; transform:rotate(-8deg); color:#b86652; font-size:12px; }
.comparison-arrow { z-index:2; width:47px; height:47px; display:grid; place-items:center; margin-left:-5px; border-radius:50%; background:var(--blue); color:white; font-size:20px; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.comparison-card.after { transform:rotate(2deg); padding:34px; }.comparison-card.after .comparison-label { background:var(--blue); color:white; }
.mini-kicker { margin-top:15px; color:var(--blue); font-size:8px; letter-spacing:1.3px; font-weight:800; }.comparison-card.after h3 { margin:12px 0; font-family:"Libre Caslon Display",Georgia,serif; font-size:29px; }.mini-rule { height:1px; margin:18px 0; background:#dde2e7; }
.comparison-card.after b { font-size:11px; }.comparison-card.after>p:not(.mini-kicker) { margin:8px 0; color:#657383; font-size:10px; line-height:1.55; }
.mini-summary { margin-top:23px; padding:13px; background:#eef3fd; font-size:9px; color:#536578; }.mini-summary span { display:block; margin-bottom:7px; color:var(--blue); text-transform:uppercase; letter-spacing:1px; font-weight:800; }.mini-summary strong { padding:0 7px; color:var(--blue); }
.pricing { background:#faf9f6; }.pricing-heading { max-width:590px; margin:0 auto 52px; text-align:center; }.pricing-heading>p:last-child { color:var(--muted); line-height:1.7; font-size:14px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card { position:relative; display:flex; flex-direction:column; padding:35px; border:1px solid #dfe3e7; background:white; }.price-card.featured { border:2px solid var(--blue); box-shadow:0 18px 40px rgba(45,103,227,.12); }
.popular { position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:7px 15px; background:var(--blue); color:white; text-transform:uppercase; white-space:nowrap; font-size:9px; font-weight:800; letter-spacing:1px; }
.price-card h3 { margin:0 0 26px; color:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-size:23px; font-weight:600; }.price { color:var(--navy); font-family:"Libre Caslon Display",Georgia,serif; font-size:39px; font-weight:600; }.price-unit { margin-bottom:22px; color:#8995a1; font-size:10px; }
.price-card>p { min-height:64px; color:var(--muted); line-height:1.6; font-size:13px; }.price-card ul { display:grid; gap:12px; min-height:105px; padding:20px 0; margin:0 0 24px; border-top:1px solid #e4e7ea; list-style:none; color:#526273; font-size:12px; }.price-card li { display:flex; gap:9px; }.price-card li span { color:var(--blue); font-weight:800; }.button-outline { border:1px solid var(--navy); color:var(--navy); }
.contact { padding:85px max(32px,calc((100vw - 1176px)/2)); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:110px; background:var(--blue); color:white; }.contact h2 { margin-bottom:0; }.contact h2 em { color:#d8e5ff; }.contact-copy>p { color:#dae6ff; line-height:1.7; font-size:14px; }.button-light { margin-top:12px; background:white; color:var(--navy); }.contact-email { display:block; width:max-content; margin-top:18px; color:#dbe7ff; border-bottom:1px solid rgba(255,255,255,.35); font-size:12px; }
footer { min-height:105px; padding:0 max(32px,calc((100vw - 1176px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--navy-deep); color:#93a3b3; font-size:11px; }.footer-brand { color:white; font-size:16px; }.footer-brand .brand-mark { background:white; color:var(--navy); }

@media (max-width:900px) {
  nav { display:none; }.hero { grid-template-columns:1fr; padding-top:60px; gap:45px; }.hero-copy { max-width:650px; }.hero-visual { max-width:540px; width:100%; margin:auto; }
  .service-grid,.pricing-grid { grid-template-columns:1fr; }.service-card { min-height:auto; }.service-card h3 { margin-top:32px; }.service-card p { min-height:auto; }
  .example { grid-template-columns:1fr; gap:55px; }.sample-gallery { max-width:650px; width:100%; margin:auto; }.contact { grid-template-columns:1fr; gap:30px; }
}
@media (max-width:600px) {
  .site-header { height:70px; padding:0 18px; }.header-cta { padding:9px 12px; }.hero { min-height:auto; padding:48px 22px 65px; }
  h1 { font-size:46px; letter-spacing:-1.6px; }.hero-lead { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:15px; }.trust-row { flex-direction:column; gap:9px; margin-top:30px; }
  .hero-visual { height:390px; transform:scale(.82); transform-origin:top left; width:122%; }.paper-front { right:8px; }.sticker { right:-5px; }
  .section { padding:76px 22px; }.section-heading { display:block; }.section-heading>p { margin-top:20px; }.section-heading h2,.pricing-heading h2 { font-size:37px; }.example h2,.contact h2 { font-size:41px; }
  .sample-gallery { min-height:auto; grid-template-columns:1fr; gap:28px; padding-top:14px; }.sample-page { width:min(100%,310px); justify-self:center; transform:none; }.sample-page img { height:auto; max-height:430px; }.sample-source img { height:auto; }.transform-arrow { transform:rotate(90deg); }.sample-badge { display:none; }
  .contact { padding:70px 22px; } footer { padding:30px 22px; flex-direction:column; gap:15px; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }