/* ============================================================ ORTMAN LAW FIRM, PLLC — homepage styles Themeable via [data-palette], [data-type], [data-corners] on ============================================================ */ /* ---------- Palettes ---------- */ :root, :root[data-palette="navy"] { --bg: #f7f4ee; --surface: #ffffff; --surface-2: #efe9dd; --ink: #1b2a44; --ink-soft: #586173; --line: #e4ddcd; --brand: #20355a; --brand-deep: #15243f; --accent: #b08648; --accent-soft: #ecdfc7; --on-brand: #f2eee4; --family: #20355a; --probate: #b08648; } :root[data-palette="sage"] { --bg: #f4f2e9; --surface: #ffffff; --surface-2: #e8e8da; --ink: #1e2a21; --ink-soft: #505c4c; --line: #dadbc8; --brand: #2f4a3a; --brand-deep: #213728; --accent: #b3744f; --accent-soft: #e7d5c3; --on-brand: #f1f1e5; --family: #2f4a3a; --probate: #b3744f; } :root[data-palette="oxblood"] { --bg: #f5f1ed; --surface: #ffffff; --surface-2: #ece2dc; --ink: #2a1f20; --ink-soft: #6b5b59; --line: #e2d7cf; --brand: #5e2630; --brand-deep: #471c24; --accent: #9a824f; --accent-soft: #e6dcc6; --on-brand: #f3ebe4; --family: #5e2630; --probate: #5b6b72; } :root[data-palette="charcoal"] { --bg: #f4f3f1; --surface: #ffffff; --surface-2: #e7e5e0; --ink: #23262c; --ink-soft: #5e636d; --line: #ddдbd6; --line: #dddbd6; --brand: #2c3037; --brand-deep: #1c1f25; --accent: #b89253; --accent-soft: #e8ddc6; --on-brand: #f2f1ed; --family: #2c3037; --probate: #b89253; } /* ---------- Typography pairings ---------- */ :root, :root[data-type="classic"] { --font-display: "Libre Baskerville", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; --display-weight: 700; --display-tracking: 0; --display-line: 1.16; } :root[data-type="editorial"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Public Sans", system-ui, sans-serif; --display-weight: 500; --display-tracking: -0.01em; --display-line: 1.1; } :root[data-type="refined"] { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Karla", system-ui, sans-serif; --display-weight: 700; --display-tracking: 0; --display-line: 1.06; } /* ---- Authority polish (refined only) ---- Keep Cormorant for true display moments; switch small sub-heads to crisp Karla so delicate serif strokes never read as fragile. */ :root[data-type="refined"] .step h4, :root[data-type="refined"] .cpoint h4, :root[data-type="refined"] .matter h4, :root[data-type="refined"] .qa summary, :root[data-type="refined"] .attorney-art .stamp b, :root[data-type="refined"] .cred b, :root[data-type="refined"] .pp-rail .rail-card b, :root[data-type="refined"] .hero-art .badge b { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; } /* a hair more presence on the marquee headlines */ :root[data-type="refined"] .hero h1, :root[data-type="refined"] .arc .head h2, :root[data-type="refined"] .connect h2, :root[data-type="refined"] .contact h2 { letter-spacing: -0.008em; } /* ---------- Corners ---------- */ :root, :root[data-corners="sharp"] { --r: 2px; --r-lg: 3px; } :root[data-corners="soft"] { --r: 10px; --r-lg: 18px; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); line-height: var(--display-line); letter-spacing: var(--display-tracking); color: var(--ink); text-wrap: balance; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; } .eyebrow.center::after { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; padding: 15px 26px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: all .2s ease; line-height: 1; } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-deep); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); } .btn-accent { background: var(--accent); color: #1c1408; } .btn-accent:hover { filter: brightness(.94); } .btn .arr { transition: transform .2s ease; } .btn:hover .arr { transform: translateX(3px); } /* ---------- Placeholders ---------- */ .ph { position: relative; background-color: var(--surface-2); background-image: repeating-linear-gradient( -45deg, transparent, transparent 9px, color-mix(in oklab, var(--ink) 6%, transparent) 9px, color-mix(in oklab, var(--ink) 6%, transparent) 10px); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ph span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg); padding: 5px 10px; border-radius: 3px; border: 1px solid var(--line); } /* ============================================================ TOP BAR + NAV ============================================================ */ .topbar { background: var(--brand-deep); color: var(--on-brand); font-size: 13px; letter-spacing: 0.01em; } .topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 42px; white-space: nowrap; } .topbar a { color: var(--on-brand); opacity: .85; white-space: nowrap; } .topbar a:hover { opacity: 1; } .topbar .loc { opacity: .8; } .topbar .right { display: flex; align-items: center; gap: 22px; } .topbar .right .sep { width: 1px; height: 14px; background: rgba(255,255,255,.22); } header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } header.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; } .brand { display: flex; align-items: center; gap: 14px; } .brand .mark { width: 42px; height: 42px; flex: none; border: 1.5px solid var(--brand); color: var(--brand); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; border-radius: var(--r); } .brand .name { line-height: 1.05; } .brand .name b { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; display: block; color: var(--ink); } .brand .name small { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } nav.links { display: flex; align-items: center; gap: 30px; } nav.links a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); position: relative; padding: 6px 0; } nav.links a:hover { color: var(--ink); } nav.links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--accent); transition: width .22s ease; } nav.links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 14px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: 84px 0 0; } .hero .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } .hero h1 { font-size: clamp(40px, 5vw, 62px); margin: 20px 0 0; } .hero h1 .lead { color: var(--brand); } .hero .sub { font-size: 19px; color: var(--ink-soft); margin-top: 26px; max-width: 30em; line-height: 1.62; } .hero .cta-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; } .hero .trust { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; gap: 38px; flex-wrap: wrap; } .hero .trust .item small { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; } .hero .trust .item b { font-family: var(--font-display); font-size: 22px; color: var(--brand); font-weight: 700; } .hero-art { position: relative; } .hero-art .ph { aspect-ratio: 4/5; } .hero-art .badge { position: absolute; left: -28px; bottom: 34px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 18px 22px; border-radius: var(--r); max-width: 230px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); } .hero-art .badge b { font-family: var(--font-display); display: block; font-size: 15px; margin-bottom: 4px; } .hero-art .badge span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; } /* ============================================================ LIFE ARC — the synergy device ============================================================ */ .arc { padding: 96px 0 100px; margin-top: 84px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .arc .head { text-align: center; max-width: 720px; margin: 0 auto 18px; } .arc .head h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 16px 0 0; } .arc .head p { color: var(--ink-soft); margin-top: 18px; font-size: 18px; } .arcwrap { margin-top: 60px; position: relative; } .arc-track { display: grid; grid-template-columns: repeat(8, 1fr); position: relative; } .arc-line { position: absolute; left: 6%; right: 6%; top: 8px; height: 2px; background: var(--line); } .arc-node { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 6px; } .arc-node .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-soft); z-index: 2; margin: 0 auto; } .arc-node.fam .dot { border-color: var(--family); } .arc-node.pro .dot { border-color: var(--probate); } .arc-node.both .dot { border-color: var(--accent); background: var(--accent); } .arc-node .label { font-size: 13px; font-weight: 600; text-align: center; margin-top: 14px; color: var(--ink); white-space: nowrap; } .arc-node .stage { font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 3px; } .arc-node .above { margin-bottom: 14px; } /* the two practice bands */ .bands { margin-top: 46px; position: relative; height: 92px; } .band { position: absolute; height: 40px; border-radius: 40px; display: flex; align-items: center; padding: 0 22px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: #fff; } .band.fam { left: 0; width: 64%; top: 0; background: var(--family); } .band.pro { right: 0; width: 64%; bottom: 0; background: var(--probate); } .band .ico { margin-right: 10px; opacity: .8; } .band-meet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1.5px solid var(--accent); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 16px; border-radius: 40px; z-index: 3; white-space: nowrap; box-shadow: 0 8px 24px -12px rgba(0,0,0,.35); } .arc-foot { text-align: center; margin-top: 44px; color: var(--ink-soft); font-size: 16px; max-width: 640px; margin-left: auto; margin-right: auto; } .arc-foot b { color: var(--ink); font-weight: 600; } /* ============================================================ PRACTICE AREAS — dual columns ============================================================ */ .practice { padding: 100px 0; } .practice .head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; flex-wrap: wrap; } .practice .head h2 { font-size: clamp(30px, 3.4vw, 42px); margin-top: 14px; max-width: 14em; } .practice .head p { color: var(--ink-soft); max-width: 24em; font-size: 16.5px; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 38px 36px 34px; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .pcard:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0,0,0,.35); } .pcard .tag { position: absolute; top: 0; left: 0; height: 4px; width: 100%; } .pcard.fam .tag { background: var(--family); } .pcard.pro .tag { background: var(--probate); } .pcard .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .pcard.fam .kicker { color: var(--family); } .pcard.pro .kicker { color: var(--probate); } .pcard h3 { font-size: 27px; margin: 12px 0 6px; } .pcard > p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 24px; } .svc { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .svc li { background: var(--surface); padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 15px; transition: background .15s ease; cursor: default; } .svc li:hover { background: var(--surface-2); } .svc li .b { width: 6px; height: 6px; border-radius: 50%; flex: none; } .pcard.fam .svc li .b { background: var(--family); } .pcard.pro .svc li .b { background: var(--probate); } .crosslink { margin-top: 24px; padding: 16px 18px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line)); font-size: 14px; color: var(--ink); display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; } .crosslink b { color: var(--ink); } .crosslink .cl-ico { color: var(--accent); flex: none; margin-top: 1px; } .pcard-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; } .pcard.fam .pcard-link { color: var(--family); } .pcard.pro .pcard-link { color: var(--probate); } .pcard-link .arr { transition: transform .2s ease; } .pcard-link:hover .arr { transform: translateX(4px); } /* ============================================================ CONNECTION / synergy essay ============================================================ */ .connect { background: var(--brand); color: var(--on-brand); padding: 104px 0; } .connect .inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; } .connect .eyebrow { color: var(--accent); } .connect h2 { color: var(--on-brand); font-size: clamp(30px, 3.6vw, 46px); margin: 18px 0 0; } .connect .lead-quote { font-family: var(--font-display); font-size: 23px; line-height: 1.4; margin-top: 26px; color: var(--on-brand); } .connect p.body { color: color-mix(in oklab, var(--on-brand) 78%, transparent); margin-top: 22px; font-size: 16.5px; line-height: 1.7; } .connect .points { display: grid; gap: 22px; } .cpoint { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); } .cpoint:last-child { border-bottom: 0; padding-bottom: 0; } .cpoint .num { font-family: var(--font-display); font-size: 17px; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; } .cpoint h4 { color: var(--on-brand); font-size: 18px; margin-bottom: 6px; } .cpoint p { color: color-mix(in oklab, var(--on-brand) 72%, transparent); font-size: 14.5px; line-height: 1.55; } /* ============================================================ ATTORNEY ============================================================ */ .attorney { padding: 104px 0; } .attorney .inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; } .attorney-art { position: relative; } .attorney-art .ph { aspect-ratio: 3/4; } .attorney-art .stamp { position: absolute; right: -22px; top: 30px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 16px 20px; border-radius: var(--r); box-shadow: 0 18px 40px -24px rgba(0,0,0,.4); } .attorney-art .stamp b { font-family: var(--font-display); font-size: 14px; display: block; } .attorney-art .stamp span { font-size: 12px; color: var(--ink-soft); } .attorney h2 { font-size: clamp(28px, 3.3vw, 40px); margin: 16px 0 0; } .attorney .role { color: var(--accent); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; margin-top: 14px; } .attorney p.bio { color: var(--ink-soft); margin-top: 20px; font-size: 16.5px; line-height: 1.7; } .attorney p.bio + p.bio { margin-top: 16px; } .creds { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .cred { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; background: var(--surface); } .cred b { font-family: var(--font-display); font-size: 20px; color: var(--brand); display: block; } .cred span { font-size: 12.5px; color: var(--ink-soft); } /* ============================================================ PROCESS ============================================================ */ .process { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 96px 0; } .process .head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .process .head h2 { font-size: clamp(28px, 3.3vw, 42px); margin-top: 14px; } .process .head p { color: var(--ink-soft); margin-top: 16px; font-size: 17px; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: s; } .step { position: relative; padding-top: 30px; } .step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-size: 14px; color: var(--accent); position: absolute; top: 0; left: 0; } .step .bar { height: 2px; background: var(--line); position: relative; margin-bottom: 22px; } .step .bar::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 26px; background: var(--accent); } .step h4 { font-size: 19px; margin-bottom: 8px; } .step p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; } /* ============================================================ FAQ ============================================================ */ .faq { padding: 100px 0; } .faq .inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; } .faq .lead h2 { font-size: clamp(28px, 3.3vw, 40px); margin: 16px 0 0; } .faq .lead p { color: var(--ink-soft); margin-top: 18px; font-size: 16px; } .faq .lead .btn { margin-top: 26px; } .qa { border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; font-family: var(--font-display); font-size: 19px; color: var(--ink); } .qa summary::-webkit-details-marker { display: none; } .qa summary .pm { flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; position: relative; transition: all .2s; } .qa summary .pm::before, .qa summary .pm::after { content: ""; position: absolute; background: var(--ink); } .qa summary .pm::before { width: 11px; height: 1.5px; } .qa summary .pm::after { width: 1.5px; height: 11px; transition: transform .2s; } .qa details[open] summary .pm { background: var(--accent); border-color: var(--accent); } .qa details[open] summary .pm::after { transform: scaleY(0); } .qa details[open] summary .pm::before { background: #1c1408; } .qa .ans { padding: 0 0 24px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; max-width: 52em; } /* ============================================================ CONTACT ============================================================ */ .contact { background: var(--brand-deep); color: var(--on-brand); padding: 100px 0; } .contact .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; } .contact .eyebrow { color: var(--accent); } .contact h2 { color: var(--on-brand); font-size: clamp(30px, 3.6vw, 46px); margin: 18px 0 0; } .contact p.intro { color: color-mix(in oklab, var(--on-brand) 76%, transparent); margin-top: 20px; font-size: 17px; line-height: 1.65; max-width: 30em; } .contact .info { margin-top: 38px; display: grid; gap: 20px; } .contact .info .row { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; } .contact .info .row small { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; } .contact .info .row span { color: var(--on-brand); font-size: 16px; } .contact .info .ico { color: var(--accent); } .form { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 34px; } .form h3 { font-size: 22px; margin-bottom: 6px; } .form .fnote { font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 15px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent); } .field textarea { resize: vertical; min-height: 92px; } .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form .btn { width: 100%; justify-content: center; margin-top: 8px; } .form .disc { font-size: 11.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.5; } /* ============================================================ FOOTER ============================================================ */ footer.site { background: var(--brand-deep); color: var(--on-brand); padding: 60px 0 30px; border-top: 1px solid rgba(255,255,255,.1); } footer.site .top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); } footer.site .brand .name b { color: var(--on-brand); } footer.site .brand .mark { border-color: var(--on-brand); color: var(--on-brand); } footer.site .fabout { color: color-mix(in oklab, var(--on-brand) 70%, transparent); font-size: 14px; margin-top: 18px; line-height: 1.6; max-width: 26em; } footer.site col-title, footer.site h5 { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } footer.site ul { list-style: none; display: grid; gap: 11px; } footer.site ul a { color: color-mix(in oklab, var(--on-brand) 74%, transparent); font-size: 14.5px; } footer.site ul a:hover { color: var(--on-brand); } footer.site .bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; gap: 20px; flex-wrap: wrap; } footer.site .bottom p { color: color-mix(in oklab, var(--on-brand) 60%, transparent); font-size: 13px; } footer.site .disclaimer { color: color-mix(in oklab, var(--on-brand) 50%, transparent); font-size: 12px; max-width: 60em; margin-top: 18px; line-height: 1.6; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1000px) { .hero .grid, .connect .inner, .attorney .inner, .faq .inner, .contact .inner { grid-template-columns: 1fr; gap: 44px; } .hero-art { order: -1; max-width: 420px; } .attorney-art { max-width: 380px; } .steps { grid-template-columns: 1fr 1fr; gap: 36px 26px; } nav.links { display: none; } footer.site .top { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 720px) { .wrap { padding: 0 22px; } .topbar .loc { display: none; } .cols { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .arc-node .label { font-size: 11px; } .arc-node .stage { display: none; } .band.fam, .band.pro { width: 100%; position: relative; margin-bottom: 10px; } .bands { height: auto; display: flex; flex-direction: column; gap: 8px; } .band-meet { position: relative; left: auto; top: auto; transform: none; align-self: center; margin: 4px 0; } .footer-hide, footer.site .top { grid-template-columns: 1fr 1fr; } }