:root { --ink:#1a1a2e; --muted:#626274; --line:rgba(26,26,46,.13); --accent:#ff6b2b; --peach:#fff0ea; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#f6f5f4; font:400 16px/1.6 Inter,system-ui,sans-serif; } a { color:inherit; } img { max-width:100%; } .wrap { width:min(100% - 40px,1180px); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:20px; z-index:20; background:white; padding:10px 16px; } .skip:focus { top:10px; } :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(26,26,46,.97); color:#fff; } .header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .logo { display:inline-flex; flex:none; } .logo img { width:154px; height:46px; object-fit:contain; } .site-header nav { display:flex; align-items:center; flex-wrap:wrap; gap:20px; } .site-header nav a { text-decoration:none; font-size:14px; } .site-header nav a:hover, footer a:hover { text-decoration:underline; text-underline-offset:5px; } .nav-contact { border:1px solid rgba(255,255,255,.45); padding:8px 16px; border-radius:100px; }
.hero { background:radial-gradient(circle at 85% 15%,rgba(255,107,43,.18),transparent 35%),linear-gradient(140deg,#fff1e9,#f8f7f5 70%); padding:86px 0 96px; } .breadcrumb { display:inline-block; margin-bottom:36px; font-size:14px; text-underline-offset:4px; } .eyebrow { display:block; font:700 11px/1.5 Inter,sans-serif; letter-spacing:.14em; color:#a8461d; } h1,h2,h3,p { margin:0; } h1 { max-width:850px; margin:18px 0 24px; font-size:clamp(43px,6.2vw,80px); line-height:1.06; letter-spacing:-.055em; font-weight:600; } .lede { max-width:780px; color:#49495a; font-size:clamp(18px,2vw,21px); } .actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px; } .button { display:inline-flex; align-items:center; gap:20px; background:var(--ink); color:#fff; border:1px solid var(--ink); padding:12px 22px; border-radius:100px; min-height:48px; text-decoration:none; font-weight:600; } .button:hover { background:#33334b; } .secondary { text-underline-offset:5px; font-weight:600; }
.service-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:16px; background:#fff; margin-top:-34px; position:relative; overflow:hidden; } .service-nav a { padding:16px; text-decoration:none; font-size:13px; font-weight:600; border-right:1px solid var(--line); } .service-nav a:last-child { border:0; } .service-nav a:hover,.service-nav a[aria-current] { background:var(--peach); }
.section { padding-block:100px; } .section-heading { max-width:720px; margin-bottom:38px; } h2 { font-size:clamp(34px,4vw,51px); line-height:1.14; letter-spacing:-.04em; font-weight:600; margin:13px 0; } .section-heading p { color:var(--muted); } .detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .detail { padding:30px; min-height:210px; border:1px solid var(--line); border-radius:18px; background:#fff; } .detail span { color:var(--accent); font-weight:700; font-size:12px; } h3 { font-size:23px; margin:16px 0 10px; } .detail p { color:var(--muted); }
.approach { background:var(--ink); color:#fff; padding:88px 0; } .approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .approach .eyebrow { color:#5eead4; } .approach h2 { margin-bottom:0; } .approach h2 em { font-family:'Instrument Serif',serif; font-weight:400; } .approach p { color:#c5c5d1; font-size:18px; } .approach a { color:#fff; display:inline-block; margin-top:28px; text-underline-offset:5px; } .related-links { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .related-links a { display:flex; justify-content:space-between; align-items:center; text-decoration:none; border:1px solid var(--line); background:#fff; padding:20px; border-radius:14px; font-weight:600; } .related-links a:hover { border-color:var(--accent); }
.closing { background:var(--peach); padding:68px 0; } .closing-inner { display:flex; justify-content:space-between; align-items:center; gap:35px; } .closing p { color:var(--muted); } footer { background:#131322; color:#fff; padding:50px 0; } .footer-inner { display:flex; justify-content:space-between; gap:40px; } footer p { color:#bebecb; max-width:350px; } footer nav { display:flex; flex-wrap:wrap; gap:16px; align-content:start; } footer a { text-decoration:none; font-size:14px; }
@media(max-width:750px){ .header-inner { align-items:start; flex-direction:column; padding:12px 0; gap:8px; } .site-header nav { gap:8px 15px; } .site-header nav a { font-size:12px; } .nav-contact { padding:4px 9px; } .hero { padding:56px 0 78px; } .service-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-nav a:nth-child(2) { border-right:0; } .service-nav a:nth-child(-n+2) { border-bottom:1px solid var(--line); } .detail-grid,.approach-grid { grid-template-columns:1fr; gap:16px; } .related-links { grid-template-columns:1fr; } .closing-inner,.footer-inner { align-items:start; flex-direction:column; } .section { padding-block:70px; } }
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }