body { overflow-x: hidden; }
.scroll-progress { background:#8d7a68; height:3px; left:0; position:fixed; top:0; transform:scaleX(0); transform-origin:left; width:100%; z-index:100; }
.cursor-glow { background:radial-gradient(circle,rgba(255,255,255,.48),rgba(193,172,151,.14) 42%,transparent 70%); border-radius:50%; height:360px; left:0; pointer-events:none; position:fixed; top:0; transform:translate(-50%,-50%); width:360px; z-index:0; }
.site-header, main, footer, .floating-cta { position:relative; z-index:1; }
.site-header { position:absolute; z-index:60; }

/* Interactive editorial header */
.site-header nav a { padding:10px 2px; position:relative; }
.site-header nav a::after { background:currentColor; bottom:5px; content:""; height:1px; left:0; position:absolute; transform:scaleX(0); transform-origin:right; transition:transform .3s ease; width:100%; }
.site-header nav a:hover::after,.site-header nav a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.header-cta { background:rgba(36,36,33,.94); border:1px solid rgba(255,255,255,.22); border-radius:999px; box-shadow:0 10px 28px rgba(36,36,33,.14); color:#fff; gap:12px; min-height:52px; overflow:hidden; padding:5px 6px 5px 20px; position:relative; transition:transform .3s ease,box-shadow .3s ease,background .3s ease; }
.header-cta::before { background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent); content:""; inset:0; position:absolute; transform:translateX(-120%); transition:transform .55s ease; }
.header-cta:hover { background:#4d4741; box-shadow:0 16px 34px rgba(36,36,33,.22); opacity:1; transform:translateY(-2px); }
.header-cta:hover::before { transform:translateX(120%); }
.header-cta small { color:#cfc4b8; font-family:var(--display); font-size:7px; letter-spacing:.16em; line-height:1; position:absolute; top:9px; }
.header-cta b { font-size:11px; font-weight:500; letter-spacing:.08em; padding-top:12px; position:relative; }
.header-cta span { background:#f3f0ea; border:0; border-radius:50%; color:var(--ink); height:40px; position:relative; transition:transform .3s ease; width:40px; }
.header-cta:hover span { transform:rotate(45deg); }
#service,#plans,#flow,#company { scroll-margin-top:24px; }
.risk-free-label { align-items:center; display:flex; font-size:11px; gap:11px; letter-spacing:.04em; margin:0 0 14px; }
.risk-free-label span { background:var(--ink); color:#fff; padding:6px 10px; }
.risk-free { align-items:center; background:#e5ddd2; display:grid; gap:8vw; grid-template-columns:.72fr 1.28fr; overflow:hidden; position:relative; }
.risk-free::before { border:1px solid rgba(36,36,33,.12); border-radius:50%; content:""; height:640px; left:-270px; position:absolute; top:-230px; width:640px; }
.risk-free-number { font-family:var(--display); font-size:clamp(170px,25vw,390px); font-weight:400; letter-spacing:-.09em; line-height:.7; position:relative; text-align:center; }
.risk-free-number span { font-family:var(--serif); font-size:.1em; letter-spacing:0; margin-left:.08em; }
.risk-free-copy { max-width:720px; position:relative; }
.risk-free-copy .section-label { margin-bottom:40px; }
.risk-kicker { font-family:var(--serif); font-size:14px; letter-spacing:.08em; }
.risk-free h2 { font-family:var(--serif); font-size:clamp(42px,5vw,72px); font-weight:400; letter-spacing:-.04em; line-height:1.4; margin:10px 0 30px; }
.risk-free h2 em { font-style:normal; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:10px; }
.risk-free-copy>p:not(.section-label):not(.risk-kicker) { color:#5e5a55; font-size:14px; max-width:620px; }
.risk-steps { align-items:center; border-bottom:1px solid rgba(36,36,33,.18); border-top:1px solid rgba(36,36,33,.18); display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 18px; padding:18px 0; }
.risk-steps span { font-size:11px; }
.risk-steps span.active { background:var(--ink); color:#fff; padding:5px 9px; }
.risk-steps i { color:#9d948a; font-style:normal; }
.risk-free-copy small { color:#6c6761; display:block; font-size:9px; line-height:1.8; margin-bottom:28px; }
.risk-free-copy .button { width:max-content; }
.marquee { background:var(--ink); color:#f5f2ec; display:flex; overflow:hidden; padding:18px 0; position:relative; }
.marquee div { animation:marquee 22s linear infinite; flex:none; font-family:var(--display); font-size:17px; letter-spacing:.17em; white-space:nowrap; }
.hero-art, .report-sheet, .plan { will-change:transform; }
.browser-object { transition:transform .15s ease-out; }
.plan { transition:transform .25s ease,box-shadow .25s ease; }
.plan:hover { box-shadow:0 28px 55px rgba(36,36,33,.1); }
@keyframes marquee { to { transform:translateX(-50%); } }
@media(max-width:800px) {
  .cursor-glow { display:none; }
  .risk-free-label { align-items:flex-start; flex-direction:column; font-size:10px; }
  .risk-free { gap:58px; grid-template-columns:1fr; }
  .risk-free::before { height:430px; left:-210px; top:-110px; width:430px; }
  .risk-free-number { font-size:210px; text-align:left; }
  .risk-free h2 { font-size:39px; }
  .risk-steps { gap:8px; }
  .risk-steps i { font-size:10px; }
  .risk-free-copy .button { width:100%; }
  .marquee div { font-size:13px; }
}

.company { background:#d9d0c5; display:grid; gap:9vw; grid-template-columns:.9fr 1.1fr; }
.company-art { align-self:stretch; background:#242421; color:#f4f0e9; min-height:500px; overflow:hidden; padding:45px; position:relative; }
.company-art>p { font-family:var(--display); font-size:10px; letter-spacing:.2em; }
.company-art>strong { bottom:72px; font-family:var(--display); font-size:clamp(65px,8vw,120px); font-weight:400; left:34px; letter-spacing:-.07em; line-height:1; position:absolute; transform:rotate(-90deg); transform-origin:left bottom; }
.company-art>strong span { color:#bcae9e; font-style:italic; }
.company-art>div { border:1px solid #5f5d58; border-radius:50%; height:290px; position:absolute; right:-100px; top:70px; width:290px; }
.company-art>div i { border:1px solid #77736d; border-radius:50%; inset:38px; position:absolute; }
.company-art>div i:nth-child(2) { inset:82px; }
.company-art>div i:nth-child(3) { background:#bcae9e; border:0; height:8px; left:137px; top:-4px; width:8px; }
.company-dot { background:#d8c6b4; border-radius:50%; height:7px; left:50%; offset-path:circle(144px at 0 0); position:absolute; top:50%; width:7px; }
.company-dot.one { animation:company-orbit 8s linear infinite; }
.company-dot.two { animation:company-orbit 13s linear -4s infinite reverse; height:4px; opacity:.7; offset-path:circle(105px at 0 0); width:4px; }
.company-dot.three { animation:company-orbit 18s linear -8s infinite; background:#77736d; height:5px; offset-path:circle(62px at 0 0); width:5px; }
.company-art>small { bottom:40px; font-family:var(--display); font-size:9px; letter-spacing:.17em; position:absolute; right:35px; text-align:right; }
.company-content { align-self:center; }
.company-content .section-label { margin-bottom:48px; }
.company-content h2 { font-family:var(--serif); font-size:clamp(36px,4.5vw,62px); font-weight:400; letter-spacing:-.04em; margin-bottom:28px; }
.company-lead { color:#5e5a55; font-size:13px; line-height:2; max-width:570px; }
.company-list { border-top:1px solid rgba(36,36,33,.2); margin:42px 0 0; }
.company-list div { border-bottom:1px solid rgba(36,36,33,.2); display:grid; gap:30px; grid-template-columns:110px 1fr; padding:18px 0; }
.company-list dt { color:#716b65; font-size:10px; letter-spacing:.08em; }
.company-list dd { font-family:var(--serif); font-size:13px; margin:0; }
.company-list a { text-decoration:underline; text-underline-offset:4px; }

@media(max-width:800px) {
  .company { gap:55px; grid-template-columns:1fr; }
  .company-art { min-height:380px; padding:30px; }
  .company-art>strong { font-size:74px; }
  .company-art>div { height:230px; right:-85px; width:230px; }
  .company-art>div i:nth-child(3) { left:107px; }
  .company-content .section-label { margin-bottom:38px; }
  .company-content h2 { font-size:36px; }
  .company-list div { gap:18px; grid-template-columns:82px 1fr; }
  .company-list dd { overflow-wrap:anywhere; }
  .site-header { background:rgba(243,240,234,.94); backdrop-filter:blur(14px); position:fixed; }
  .site-header .menu-button { position:relative; z-index:3; }
  .site-header .menu-button span { transition:transform .25s ease,opacity .25s ease; }
  .site-header.menu-open .menu-button span:first-child { transform:translateY(4px) rotate(45deg); }
  .site-header.menu-open .menu-button span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .site-header.menu-open nav { align-items:flex-start; background:rgba(243,240,234,.98); border-bottom:1px solid var(--line); box-shadow:0 24px 44px rgba(36,36,33,.12); display:flex; flex-direction:column; gap:0; left:0; padding:82px 24px 24px; position:fixed; right:0; top:0; z-index:2; }
  .site-header.menu-open nav a { border-bottom:1px solid var(--line); font-family:var(--serif); font-size:18px; padding:14px 2px; width:100%; }
  #service,#plans,#flow,#company { scroll-margin-top:70px; }
}
@media(prefers-reduced-motion:reduce) {
  .marquee div { animation:none; }
  .cursor-glow { display:none; }
  .hero-art,.report-sheet,.plan,.browser-object { transform:none!important; }
}

/* Section artwork and responsive line control */
.keep { display:inline-block; }
.browser-object { background:#f4f0e9; box-shadow:0 34px 80px rgba(56,47,39,.18); left:9%; overflow:hidden; position:absolute; top:175px; transform:rotate(-3deg); width:min(76%,460px); }
.browser-bar { align-items:center; border-bottom:1px solid #cfc6bb; display:flex; gap:6px; height:34px; padding:0 12px; }
.browser-bar i { border:1px solid #8e857c; border-radius:50%; height:6px; width:6px; }
.browser-bar span { font-family:var(--display); font-size:7px; letter-spacing:.14em; margin-left:auto; }
.browser-canvas { display:grid; grid-template-columns:1.2fr .8fr; min-height:360px; padding:42px 34px 32px; }
.canvas-copy { display:flex; flex-direction:column; justify-content:space-between; position:relative; z-index:2; }
.canvas-copy small,.canvas-copy span { font-family:var(--display); font-size:8px; letter-spacing:.15em; line-height:1.4; }
.canvas-copy strong { font-family:var(--display); font-size:clamp(43px,5vw,70px); font-weight:500; letter-spacing:-.06em; line-height:.78; }
.canvas-shape { border-left:1px solid #bab0a5; overflow:hidden; position:relative; }
.canvas-shape b { font-family:var(--display); font-size:11px; font-weight:400; position:absolute; right:8px; top:0; }
.canvas-shape i { border:1px solid #91867c; border-radius:50%; height:230px; left:20px; position:absolute; top:50px; width:230px; }
.canvas-shape i:last-child { height:130px; left:70px; top:100px; width:130px; }
.project-tag { background:var(--ink); bottom:105px; color:white; display:flex; flex-direction:column; padding:15px 20px; position:absolute; right:4%; transform:rotate(2deg); width:180px; }
.project-tag span { color:#aaa59e; font-family:var(--display); font-size:7px; letter-spacing:.18em; }
.project-tag strong { font-family:var(--display); font-size:12px; font-weight:500; letter-spacing:.08em; }
.mini-site { height:360px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#8f8478 transparent; scrollbar-width:thin; scroll-behavior:smooth; }
.mini-site::-webkit-scrollbar { width:4px; }
.mini-site::-webkit-scrollbar-thumb { background:#8f8478; border-radius:99px; }
.mini-site section { min-height:360px; position:relative; }
.mini-hero { background:#f4f0e9; padding:20px 25px 24px; }
.mini-nav { align-items:center; border-bottom:1px solid #cfc6bb; display:flex; justify-content:space-between; padding-bottom:10px; }
.mini-nav img { height:34px; object-fit:contain; width:34px; }
.mini-nav span { font-family:var(--display); font-size:6px; letter-spacing:.12em; }
.mini-opening { align-items:center; display:grid; grid-template-columns:1.25fr .75fr; min-height:255px; }
.mini-opening>div { display:flex; flex-direction:column; justify-content:center; }
.mini-opening small { font-family:var(--display); font-size:7px; letter-spacing:.15em; line-height:1.4; }
.mini-opening strong { font-family:var(--display); font-size:49px; font-weight:500; letter-spacing:-.06em; line-height:.78; margin:24px 0 18px; }
.mini-opening p { color:#777068; font-family:var(--serif); font-size:7px; line-height:1.8; margin:0; }
.mini-opening>img { filter:opacity(.77); max-width:125px; transform:rotate(7deg); width:100%; }
.mini-scroll { bottom:12px; font-family:var(--display); font-size:6px; letter-spacing:.17em; position:absolute; right:22px; }
.mini-about { background:#292824; color:#f4f0e9; padding:48px 35px; }
.mini-about small,.mini-works>small,.mini-contact small { font-family:var(--display); font-size:7px; letter-spacing:.18em; }
.mini-about h3 { font-family:var(--serif); font-size:28px; font-weight:400; letter-spacing:-.03em; line-height:1.45; margin:45px 0 20px; }
.mini-about p { color:#aaa69f; font-size:8px; line-height:1.8; max-width:210px; }
.mini-line { background:#706e68; height:1px; margin-top:45px; position:relative; width:100%; }
.mini-line::after { animation:mini-travel 3s ease-in-out infinite; background:#d1bca8; border-radius:50%; content:""; height:7px; position:absolute; top:-3px; width:7px; }
.mini-works { background:#ded5ca; padding:38px 30px; }
.mini-works>div { border-top:1px solid #a9a096; margin-top:34px; }
.mini-works article { align-items:center; border-bottom:1px solid #a9a096; display:grid; gap:20px; grid-template-columns:30px 1fr; min-height:72px; }
.mini-works b { font-family:var(--display); font-size:8px; font-weight:400; }
.mini-works span { font-family:var(--display); font-size:18px; letter-spacing:.03em; }
.mini-contact { align-items:center; background:#f4f0e9; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.mini-contact h3 { font-family:var(--display); font-size:44px; font-weight:400; line-height:.9; margin:42px 0; }
.mini-contact>span { border-bottom:1px solid; font-family:var(--display); font-size:8px; letter-spacing:.15em; padding-bottom:6px; }
@keyframes mini-travel { 0% { left:0; } 50%,100% { left:calc(100% - 7px); } }
@keyframes company-orbit { to { offset-distance:100%; } }
.statement { overflow:hidden; position:relative; }
.statement-visual { align-items:center; color:#8c8882; display:flex; font-family:var(--display); font-size:10px; gap:18px; letter-spacing:.19em; margin-top:100px; }
.statement-visual i { background:#575651; height:1px; position:relative; width:clamp(45px,10vw,150px); }
.statement-visual i::after { background:#bcae9e; border-radius:50%; content:""; height:7px; position:absolute; right:0; top:-3px; width:7px; }
.service-row { overflow:hidden; position:relative; }
.service-row::after { border:1px solid var(--line); border-radius:50%; content:""; height:90px; opacity:0; position:absolute; right:5%; transform:scale(.3); transition:.35s; width:90px; }
.service-row:hover::after { opacity:1; transform:scale(1); }
.service .section-head h2 small { color:#8b837a; display:block; font-family:var(--serif); font-size:clamp(12px,1.15vw,16px); font-weight:400; letter-spacing:.08em; margin-top:13px; }
.plan { background:#e4dbcf; border-color:#c8bcaf; color:#302e2a; }
.plan.featured { background:#746b63; border-color:#746b63; color:#fffaf3; }
.plan.featured .recommend { background:#d9c9b8; color:#3c3834; }
.plan.featured .plan-intro,.plan.featured .first-payment { color:#e1d9d0; }
.plan.featured .price,.plan.featured ul { border-color:rgba(255,250,243,.28); }
.plan:not(.featured) .plan-intro,.plan:not(.featured) .first-payment { color:#6f675f; }
.plan:not(.featured) .price,.plan:not(.featured) ul { border-color:#bdb0a3; }
.plan .button.light { background:#f4eee6; color:#37332f; }
.plan .button.outline { background:rgba(255,255,255,.22); border-color:#81766c; color:#37332f; }
.plan .button:hover { box-shadow:0 12px 25px rgba(61,52,45,.13); }
.flow { position:relative; }
.flow-dial { align-items:center; display:flex; font-family:var(--display); font-size:10px; gap:10px; margin-top:60px; }
.flow-dial i { background:var(--line); height:1px; overflow:hidden; position:relative; width:150px; }
.flow-dial i::after { animation:flow-line 3s ease-in-out infinite; background:var(--ink); content:""; height:1px; left:0; position:absolute; top:0; width:45%; }
.flow li { position:relative; }
.flow li::before { background:var(--ink); border-radius:50%; content:""; height:6px; left:-3px; position:absolute; top:35px; transform:scale(0); transition:.25s; width:6px; }
.flow li:hover::before { transform:scale(1); }
.faq details { position:relative; }
.faq details::before { color:#b9b1a8; content:"Q"; font-family:var(--display); font-size:12px; left:-34px; position:absolute; top:26px; }
.final-cta { overflow:hidden; position:relative; }
.final-cta>*:not(.cta-orbit) { position:relative; z-index:2; }
.cta-orbit { border:1px solid rgba(36,36,33,.12); border-radius:50%; height:460px; left:50%; position:absolute; top:50%; transform:translate(-50%,-50%); width:460px; }
.cta-orbit::before { border:1px solid rgba(36,36,33,.08); border-radius:50%; content:""; inset:55px; position:absolute; }
.cta-orbit span { background:var(--paper); font-family:var(--display); font-size:8px; letter-spacing:.18em; padding:4px 8px; position:absolute; }
.cta-orbit span:first-child { left:20px; top:90px; }
.cta-orbit span:last-child { bottom:90px; right:10px; }
@keyframes flow-line { 0% { transform:translateX(-110%); } 50%,100% { transform:translateX(230%); } }

@media(max-width:800px) {
  .desktop-break { display:none; }
  .hero .lead .keep { display:block; }
  .browser-object { left:7%; top:70px; width:80%; }
  .browser-canvas { min-height:330px; padding:35px 25px 27px; }
  .canvas-copy strong { font-size:47px; }
  .canvas-shape i { height:170px; left:8px; width:170px; }
  .canvas-shape i:last-child { height:90px; left:48px; top:90px; width:90px; }
  .project-tag { bottom:45px; right:5%; }
  .mini-site,.mini-site section { height:330px; min-height:330px; }
  .mini-hero { padding:17px 20px 20px; }
  .mini-opening { min-height:235px; }
  .mini-opening strong { font-size:41px; }
  .mini-opening>img { max-width:95px; }
  .statement-visual { justify-content:center; margin-top:70px; }
  .statement-visual i { width:38px; }
  .flow-dial { margin-top:38px; }
  .faq details::before { display:none; }
  .cta-orbit { height:340px; width:340px; }
  .company-dot { offset-path:circle(114px at 0 0); }
  .company-dot.two { offset-path:circle(84px at 0 0); }
  .company-dot.three { offset-path:circle(49px at 0 0); }
}