/* ============================================================ NKS — Navi Knowledge Solutions site stylesheet Base: cream / ink / slate, one green accent ("cleared"). Type: Space Grotesk (display) + IBM Plex Sans (body) + IBM Plex Mono (labels, numbers, file tabs). The Studio page layers navi-studio-brand.css on top. ============================================================ */ /* Fonts are linked from each page with preconnect, not @import, so they download in parallel with this stylesheet instead of after it. */ :root{ --ink:#16202B; --ink-soft:#2A3948; --cream:#FAF7F2; --white:#FFFFFF; --slate:#5A6B7C; --green:#1E7A4A; --green-dark:#16603A; --green-tint:#E7F1EB; --line:#E4DED3; /* Logo tokens, from the supplied NKS brand pack */ --nks-coral:#FE7171; --nks-coral-deep:#E85D5D; --font-display:'Space Grotesk',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace; --w-max:1160px; --pad:24px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important;transition:none!important;} } body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;height:auto;display:block;} a{color:var(--green);text-underline-offset:3px;} a:hover{color:var(--green-dark);} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px;} h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.12; letter-spacing:-0.015em; margin:0 0 0.5em; } h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;} h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;} h3{font-size:clamp(19px,2.2vw,23px);font-weight:600;} p{margin:0 0 1em;} .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:62ch;} .muted{color:var(--slate);} .small{font-size:14px;} .wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--pad);} section{padding:72px 0;} section.tight{padding:48px 0;} .rule-top{border-top:1px solid var(--line);} /* --- Eyebrow: styled as a loan-file tab --- */ .eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; } .eyebrow::before{ content:""; width:22px;height:1.5px; background:var(--green); display:inline-block; } /* --- Header / nav --- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(250,247,242,.94); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line); } .nav-bar{ display:flex;align-items:center;justify-content:space-between; min-height:64px;gap:16px; } /* --------------------------------------------------------------- NKS LOGO LOCKUP (supplied 06_LOGO/html/header-lockup.html) Real text in real fonts, no image, so no font-in-SVG failure. Serif monogram keeps the brand equity, wordmark is the site face. --------------------------------------------------------------- */ .nks-logo{ display:inline-flex;align-items:center;gap:.7rem; text-decoration:none;line-height:1;white-space:nowrap; } .nks-logo__mark{ font-family:"Playfair Display",Georgia,"Times New Roman",serif; font-weight:600;font-size:1.5rem;letter-spacing:.01em; color:var(--ink);font-feature-settings:"kern" 1; } .nks-logo__rule{ width:1px;height:1.55em;background:var(--nks-coral); flex:0 0 1px;border-radius:1px; } .nks-logo__word{ font-family:var(--font-display);font-weight:500; font-size:.625rem;letter-spacing:.19em;text-transform:uppercase; color:var(--slate);padding-top:.12em; } .nks-logo:hover .nks-logo__mark{color:var(--ink);} .nks-logo:hover .nks-logo__rule{background:var(--nks-coral-deep);} .nks-logo--reversed .nks-logo__mark{color:var(--cream);} .nks-logo--reversed .nks-logo__word{color:rgba(255,255,255,.72);} .nks-logo--stacked{flex-direction:column;align-items:flex-start;gap:.35rem;} .nks-logo--stacked .nks-logo__rule{width:2.2rem;height:1px;} @media (max-width:640px){ .nks-logo{gap:.55rem;} .nks-logo__mark{font-size:1.25rem;} .nks-logo__word{font-size:.5625rem;letter-spacing:.16em;} } /* Very small screens: monogram only. Wordmark stays in the a11y tree. */ @media (max-width:380px){ .nks-logo__rule,.nks-logo__word{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } } .nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;} .nav-links a{ color:var(--ink);text-decoration:none; font-size:15px;font-weight:500; } .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--green);} .nav-cta{ background:var(--green);color:#fff!important; padding:9px 18px;border-radius:6px; font-weight:600; } .nav-cta:hover{background:var(--green-dark);} .nav-toggle{ display:none;background:none;border:1px solid var(--line); border-radius:6px;padding:8px 10px;cursor:pointer; font-family:var(--font-mono);font-size:13px;color:var(--ink); } @media (max-width:820px){ .nav-toggle{display:block;} .nav-links{ display:none;position:absolute;left:0;right:0;top:100%; background:var(--cream);border-bottom:1px solid var(--line); flex-direction:column;align-items:flex-start; padding:14px var(--pad) 20px;gap:14px; } .nav-links.open{display:flex;} } /* --- Buttons --- */ .btn{ display:inline-block; background:var(--green);color:#fff;text-decoration:none; font-family:var(--font-display);font-weight:600;font-size:16px; padding:13px 26px;border-radius:6px;border:none;cursor:pointer; } .btn:hover{background:var(--green-dark);color:#fff;} .btn-ghost{ background:transparent;color:var(--ink); border:1.5px solid var(--ink); } .btn-ghost:hover{background:var(--ink);color:var(--cream);} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;} /* --- Hero --- */ .hero{padding:84px 0 64px;} .hero .lede{margin-top:18px;} .hero .btn-row{margin-top:30px;} /* --- File rail (signature device) --- */ .file-rail{ list-style:none;margin:44px 0 0;padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1.5px solid var(--ink); counter-reset:stop; } .file-rail li{ counter-increment:stop; padding:16px 14px 4px 0; position:relative; font-family:var(--font-mono); font-size:13px;line-height:1.45; color:var(--ink-soft); } .file-rail li::before{ content:"0" counter(stop); display:block; color:var(--green); margin-bottom:4px; font-size:12px;letter-spacing:.1em; } .file-rail li::after{ content:""; position:absolute;top:-5px;left:0; width:8px;height:8px;border-radius:50%; background:var(--ink); } .file-rail li strong{ display:block;color:var(--ink);font-weight:500; text-transform:uppercase;letter-spacing:.08em;font-size:12.5px; } .reveal .file-rail li{opacity:0;transform:translateY(8px);} .reveal.in .file-rail li{ opacity:1;transform:none; transition:opacity .5s ease,transform .5s ease; } .reveal.in .file-rail li:nth-child(2){transition-delay:.08s;} .reveal.in .file-rail li:nth-child(3){transition-delay:.16s;} .reveal.in .file-rail li:nth-child(4){transition-delay:.24s;} .reveal.in .file-rail li:nth-child(5){transition-delay:.32s;} @media (max-width:820px){ .file-rail{grid-template-columns:1fr 1fr;border-top:none;} .file-rail li{border-top:1.5px solid var(--ink);margin-right:14px;} } /* --- Split (asymmetric editorial grid) --- */ .split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start;} .split.rev{grid-template-columns:7fr 5fr;} .split .side h2{position:sticky;top:96px;} @media (max-width:820px){ .split,.split.rev{grid-template-columns:1fr;gap:24px;} .split .side h2{position:static;} } /* --- Cards --- */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;} .card-grid.two{grid-template-columns:repeat(2,1fr);} .card{ background:var(--white); border:1px solid var(--line); border-radius:10px; padding:26px 24px; } .card h3{margin-top:6px;} .card .tab{ font-family:var(--font-mono);font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--green); } @media (max-width:960px){.card-grid{grid-template-columns:1fr 1fr;}} @media (max-width:640px){.card-grid,.card-grid.two{grid-template-columns:1fr;}} /* --- Desk sections (service pages) --- */ .desk{ position:relative; border-top:1.5px solid var(--ink); padding:34px 0 26px; display:grid;grid-template-columns:4fr 8fr;gap:40px; transition:border-color .4s ease; } .desk::after{ content:"";position:absolute;top:-1.5px;left:0; height:1.5px;width:0;background:var(--page-accent,var(--green)); transition:width .55s cubic-bezier(.2,.8,.2,1); } .desk.in::after{width:100%;} .desk .desk-name{position:relative;} .desk .desk-name h3{font-size:clamp(21px,2.6vw,28px);margin-bottom:0;} .desk .desk-name .eyebrow{color:var(--page-accent,var(--green));} .desk .desk-name .eyebrow::before{background:var(--page-accent,var(--green));} .desk .tasks{list-style:none;margin:14px 0 0;padding:0;} .desk .tasks li{ padding:10px 0 10px 28px;position:relative; border-bottom:1px dashed var(--line); color:var(--ink-soft); } .desk .tasks li:last-child{border-bottom:none;} .desk .tasks li::before{ content:"";position:absolute;left:2px;top:17px; width:9px;height:9px; border:1.5px solid var(--page-accent,var(--green));border-radius:2px; transition:background .3s ease; } .desk:hover .tasks li::before{background:color-mix(in srgb,var(--page-accent,var(--green)) 18%,white);} @media (max-width:820px){ .desk{grid-template-columns:1fr;gap:6px;padding:26px 0 20px;} .desk .desk-name .eyebrow{margin-bottom:8px;} } /* --- Page accent theming (set on ) --- */ body[data-accent="appraisal"]{--page-accent:#1F5C8A;} body[data-accent="title"]{--page-accent:#1E7A4A;} body[data-accent="processing"]{--page-accent:#1E7A4A;} body[data-accent] .eyebrow{color:var(--page-accent,var(--green));} body[data-accent] .eyebrow::before{background:var(--page-accent,var(--green));} body[data-accent] .btn{background:var(--page-accent,var(--green));} body[data-accent] .btn:hover{filter:brightness(.9);} body[data-accent] .nav-cta{background:var(--page-accent,var(--green));} body[data-accent] main p a,body[data-accent] main li a{color:var(--page-accent,var(--green));} body[data-accent] .card .tab{color:var(--page-accent,var(--green));} body[data-accent] .checklist li::before{color:var(--page-accent,var(--green));} body[data-accent] .proof em{color:var(--page-accent,var(--green));} body[data-accent] .band p a,body[data-accent] .band li a{color:#9FD5EE;} body[data-accent="title"] .band p a,body[data-accent="processing"] .band p a{color:#8FD0AC;} body[data-accent] .band .proof em{color:#9FD5EE;} body[data-accent="title"] .band .proof em,body[data-accent="processing"] .band .proof em{color:#8FD0AC;} /* Labels inside cards on dark bands need the light accent, not the dark one */ .band .card .tab,body[data-accent] .band .card .tab{color:#8FD0AC;} body[data-accent="appraisal"] .band .card .tab{color:#9FD5EE;} .band .card h3{color:var(--cream);} .band .card p{color:#C6CFD8;} body .site-footer a{color:#C6CFD8;} body .site-footer a:hover{color:#8FD0AC;} body[data-accent] .nav-links a{color:var(--ink);} body[data-accent] .nav-links a:hover,body[data-accent] .nav-links a[aria-current="page"]{color:var(--page-accent,var(--green));} body[data-accent] .nav-links .nav-cta,body[data-accent] .nav-links .nav-cta:hover{color:#fff;} /* --- Checklist (trust section) --- */ .checklist{list-style:none;margin:20px 0 0;padding:0;max-width:70ch;} .checklist li{ padding:12px 0 12px 34px;position:relative; border-bottom:1px solid var(--line); } .checklist li::before{ content:"✓"; position:absolute;left:2px;top:10px; color:var(--green);font-weight:700;font-family:var(--font-mono); } /* --- Dark band --- */ .band{ background:var(--ink);color:var(--cream); padding:72px 0; } .band h2{color:var(--cream);} .band .lede,.band p{color:#C6CFD8;} .band a{color:#8FD0AC;} .band .btn{background:var(--green);} .band .btn:hover{background:#25955B;} /* --- Quote / proof --- */ .proof{ font-family:var(--font-display); font-size:clamp(22px,3.2vw,32px); font-weight:600;line-height:1.3;letter-spacing:-.01em; max-width:26ch;margin:0; } .proof em{font-style:normal;color:var(--green);} .band .proof em{color:#8FD0AC;} /* --- Forms --- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;} .form-grid .full{grid-column:1/-1;} label{ display:block;font-family:var(--font-mono); font-size:12.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:6px; } input,textarea,select{ width:100%;padding:12px 14px; border:1px solid var(--line);border-radius:6px; background:var(--white);color:var(--ink); font-family:var(--font-body);font-size:16px; } input:focus,textarea:focus{border-color:var(--green);outline:2px solid var(--green-tint);} textarea{min-height:130px;resize:vertical;} @media (max-width:640px){.form-grid{grid-template-columns:1fr;}} /* --- Tables --- */ table{width:100%;border-collapse:collapse;margin-top:24px;} th,td{ text-align:left;padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; } th{ font-family:var(--font-mono);font-size:12.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft); } /* --- Door panels (audience router) --- */ .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;} .door{ position:relative;display:flex;flex-direction:column;gap:14px; background:var(--white);border:1px solid var(--line);border-radius:14px; padding:30px 26px 26px;text-decoration:none;color:var(--ink); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease; overflow:hidden; } .door::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; background:var(--door-accent,var(--green)); transform:scaleX(.28);transform-origin:left; transition:transform .4s cubic-bezier(.2,.8,.2,1); } .door:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(22,32,43,.28);border-color:transparent;color:var(--ink);} .door:hover::before{transform:scaleX(1);} .door .ico{ width:52px;height:52px;border-radius:12px; display:flex;align-items:center;justify-content:center; background:var(--green-tint); background:color-mix(in srgb,var(--door-accent,var(--green)) 12%,white); color:var(--door-accent,var(--green)); } .door .ico svg{width:28px;height:28px;} .door .aud{ font-family:var(--font-mono);font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--slate); } .door h3{margin:0;font-size:clamp(20px,2.2vw,24px);} .door p{margin:0;color:var(--ink-soft);font-size:15.5px;flex-grow:1;} .door .go{ font-family:var(--font-display);font-weight:600;font-size:15px; color:var(--door-accent,var(--green)); display:inline-flex;align-items:center;gap:8px; } .door .go::after{content:"\2192";transition:transform .3s ease;} .door:hover .go::after{transform:translateX(5px);} .door--mortgage{--door-accent:var(--green);} .door--appraisal{--door-accent:#1F5C8A;} .door--studio{--door-accent:#FF6A4D;} .door--studio .aud{color:#8A6A62;} @media (max-width:960px){.doors{grid-template-columns:1fr;gap:16px;}} /* --- Load-in animation (hero + doors) --- */ @media (prefers-reduced-motion:no-preference){ .rise{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards;} .rise.d1{animation-delay:.08s;} .rise.d2{animation-delay:.16s;} .rise.d3{animation-delay:.24s;} .rise.d4{animation-delay:.32s;} .rise.d5{animation-delay:.40s;} @keyframes rise{to{opacity:1;transform:none;}} /* Section headings arrive in three beats: the eyebrow rule draws, the heading wipes up, then the supporting copy and content follow. */ .reveal-up .eyebrow, .reveal-up .s-overline{opacity:0;transform:translateY(10px);} .reveal-up .eyebrow::before{transform:scaleX(0);transform-origin:left center;} .reveal-up h2{ opacity:0;transform:translateY(20px); clip-path:inset(0 0 18% 0); } .reveal-up .lede, .reveal-up > .wrap > p:not(.eyebrow):not(.s-overline), .reveal-up .split > div > p{opacity:0;transform:translateY(14px);} .reveal-up .card-grid, .reveal-up .doors, .reveal-up .steps, .reveal-up .checklist, .reveal-up .btn-row, .reveal-up .work-layout, .reveal-up .proof, .reveal-up .desk{opacity:0;transform:translateY(20px);} .reveal-up.in .eyebrow, .reveal-up.in .s-overline{ opacity:1;transform:none; transition:opacity .5s ease .02s,transform .5s cubic-bezier(.2,.8,.2,1) .02s; } .reveal-up.in .eyebrow::before{ transform:scaleX(1); transition:transform .55s cubic-bezier(.2,.8,.2,1) .1s; } .reveal-up.in h2{ opacity:1;transform:none;clip-path:inset(0 0 0 0); transition:opacity .6s ease .14s,transform .7s cubic-bezier(.2,.8,.2,1) .14s,clip-path .7s cubic-bezier(.2,.8,.2,1) .14s; } .reveal-up.in .lede, .reveal-up.in > .wrap > p:not(.eyebrow):not(.s-overline), .reveal-up.in .split > div > p{ opacity:1;transform:none; transition:opacity .6s ease .28s,transform .6s cubic-bezier(.2,.8,.2,1) .28s; } .reveal-up.in .card-grid, .reveal-up.in .doors, .reveal-up.in .steps, .reveal-up.in .checklist, .reveal-up.in .btn-row, .reveal-up.in .work-layout, .reveal-up.in .proof, .reveal-up.in .desk{ opacity:1;transform:none; transition:opacity .65s ease .38s,transform .65s cubic-bezier(.2,.8,.2,1) .38s; } /* The desk rows keep their own scroll trigger, so they must not be held back by the section-level delay once they are individually in view. */ .reveal-up.in .desk.in{transition-delay:0s;} } /* --- Page hero (inner pages) --- */ .hero--page{padding:56px 0 60px;} .hero--page h1{max-width:18ch;} .crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .crumb a{padding:4px 0;} /* --- Section spacing rhythm --- */ section + section{padding-top:64px;} .band + section,section + .band{padding-top:72px;} @media (max-width:640px){ section{padding:52px 0;} section + section{padding-top:48px;} .hero{padding:56px 0 44px;} .band{padding:56px 0;} } /* --- Hero ledger backdrop --- */ .hero--home{ background-image:linear-gradient(var(--cream) 0%,var(--cream) 100%), repeating-linear-gradient(to bottom,transparent,transparent 47px,var(--line) 48px); background-blend-mode:normal; position:relative; } .hero--home{background-image:repeating-linear-gradient(to bottom,transparent,transparent 47px,rgba(228,222,211,.55) 48px);} /* --- Two halves (home) --- */ .halves{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px;} @media (max-width:820px){.halves{grid-template-columns:1fr;}} .half{ position:relative;display:flex;flex-direction:column;gap:14px; padding:34px 30px;border-radius:16px;text-decoration:none; border:1px solid var(--line);background:var(--white);color:var(--ink); overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; } .half:hover{transform:translateY(-5px);box-shadow:0 22px 46px -26px rgba(22,32,43,.32);color:var(--ink);} .half::before{ content:"";position:absolute;inset:0 auto 0 0;width:4px; background:var(--half-accent,var(--green)); } .half .tag{ font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--half-accent,var(--green)); } .half h3{margin:0;font-size:clamp(22px,2.6vw,28px);} .half p{margin:0;color:var(--ink-soft);flex-grow:1;} .half .go{ font-family:var(--font-display);font-weight:600;font-size:15px; color:var(--half-accent,var(--green));display:inline-flex;align-items:center;gap:8px; } .half .go::after{content:"\2192";transition:transform .3s ease;} .half:hover .go::after{transform:translateX(5px);} .half--ops{--half-accent:var(--green);} .half--studio{--half-accent:#FF6A4D;} /* --- Compact service cards (home) --- */ .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;} @media (max-width:820px){.mini-grid{grid-template-columns:1fr;}} .mini{ display:block;padding:22px 20px;border-radius:12px;text-decoration:none; border:1px solid var(--line);background:var(--white);color:var(--ink); transition:border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1); } .mini:hover{border-color:var(--green);transform:translateY(-3px);color:var(--ink);} .mini h3{font-size:18px;margin:0 0 6px;} .mini p{margin:0;font-size:14.5px;color:var(--ink-soft);} /* --- Contact rows --- */ .contact-rows{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px;} .contact-rows li{border-bottom:1px solid var(--line);} .contact-rows a,.contact-rows .row-static{ display:flex;align-items:center;gap:16px; padding:16px 4px;text-decoration:none;color:var(--ink); transition:background .25s ease,padding-left .25s ease; } .contact-rows a:hover{background:var(--green-tint);padding-left:12px;color:var(--ink);} .contact-rows .ico{ width:38px;height:38px;flex:0 0 38px;border-radius:9px; background:var(--green-tint);color:var(--green); display:flex;align-items:center;justify-content:center; } .contact-rows .ico svg{width:19px;height:19px;} .contact-rows .lbl{ font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--slate);display:block;margin-bottom:2px; } .contact-rows .val{font-weight:500;word-break:break-word;} /* --- Office cards --- */ .offices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;} @media (max-width:640px){.offices{grid-template-columns:1fr;}} .office{ background:var(--white);border:1px solid var(--line);border-radius:12px; padding:26px 24px;position:relative;overflow:hidden; } .office::after{ content:"";position:absolute;right:-30px;bottom:-30px; width:110px;height:110px;border-radius:50%; background:var(--green-tint);opacity:.7; } .office .flag{ font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--green);margin-bottom:10px; } .office address{font-style:normal;color:var(--ink-soft);line-height:1.65;position:relative;z-index:1;} /* --- Numbered steps --- */ .steps-num{list-style:none;counter-reset:s;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:820px){.steps-num{grid-template-columns:1fr;}} .steps-num--4{grid-template-columns:repeat(4,1fr);} @media (max-width:1000px){.steps-num--4{grid-template-columns:1fr 1fr;}} @media (max-width:820px){.steps-num--4{grid-template-columns:1fr;}} .steps-num li{ counter-increment:s;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:24px 22px; } .steps-num li::before{ content:"0" counter(s); font-family:var(--font-mono);font-size:13px;letter-spacing:.1em; color:var(--green);display:block;margin-bottom:10px; } .steps-num h3{font-size:18px;margin-bottom:6px;} .steps-num p{margin:0;font-size:15px;color:var(--ink-soft);} /* --- FAQ --- */ .faq{margin-top:30px;border-top:1px solid var(--line);} .faq details{border-bottom:1px solid var(--line);} .faq summary{ cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2vw,19px); color:var(--ink); } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:"";position:absolute;right:8px;top:50%; width:11px;height:11px;margin-top:-7px; border-right:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(45deg);transition:transform .3s ease; } .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;} .faq .answer{padding:0 0 22px;color:var(--ink-soft);max-width:74ch;} .faq summary:hover{color:var(--green);} /* --- Inline note (form routing) --- */ .note-inline{ margin-top:12px;padding:12px 14px;border-radius:8px; background:var(--green-tint);border-left:3px solid var(--green); font-size:14.5px;color:var(--ink-soft); } /* --- Breadcrumb --- */ .crumb{ font-family:var(--font-mono);font-size:13px; color:var(--slate);margin:26px 0 0; } .crumb a{color:var(--slate);text-decoration:none;} .crumb a:hover{color:var(--green);} /* --- Accessibility & interaction floor --- */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--ink);color:var(--cream); padding:12px 18px;border-radius:0 0 6px 0; font-family:var(--font-display);font-weight:600;text-decoration:none; } .skip-link:focus{left:0;color:var(--cream);} [id]{scroll-margin-top:88px;} .nav-links a{padding:10px 0;display:inline-block;line-height:1.2;} .nav-links .nav-cta{padding:11px 18px;} .nav-toggle{min-height:44px;min-width:52px;} .site-footer li a{display:inline-block;padding:3px 0;} @media (max-width:820px){ .nav-links a{padding:12px 0;width:100%;} .nav-links .nav-cta{width:auto;padding:12px 20px;} } /* --- Tables on small screens --- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;} @media (max-width:760px){ table{min-width:600px;} .table-scroll{ border:1px solid var(--line);border-radius:10px; background:linear-gradient(to right,var(--white) 60%,rgba(228,222,211,.35)); } } /* --- Print safety --- */ @media print{ .site-header,.nav-toggle,.btn-row{display:none;} body{background:#fff;} .band,.site-footer{background:#fff;color:#000;} .band h2,.band p{color:#000;} } /* --- Footer --- */ .site-footer{ background:var(--ink);color:#C6CFD8; padding:56px 0 34px;margin-top:40px; } .site-footer .cols{ display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px; } .site-footer h4{ color:var(--cream);font-size:14px; font-family:var(--font-mono);font-weight:500; letter-spacing:.12em;text-transform:uppercase; } .site-footer ul{list-style:none;margin:0;padding:0;} .site-footer li{margin-bottom:9px;} .site-footer a{color:#C6CFD8;text-decoration:none;} .site-footer a:hover{color:#8FD0AC;} .site-footer .legal{ border-top:1px solid #2A3948;margin-top:44px;padding-top:22px; font-size:13.5px;color:#8A97A5; display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between; } @media (max-width:820px){.site-footer .cols{grid-template-columns:1fr;gap:28px;}}