:root{--paper:#f7f5ef;--ink:#343a35;--brown:#805638;--line:#d6d1c5;--muted:#62665e;--serif:"YuMincho","Yu Mincho","Hiragino Mincho ProN",serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:15px;line-height:1.9}a{color:inherit;text-decoration:none}button,input{font:inherit}a,summary,input{touch-action:manipulation}a:focus-visible,summary:focus-visible,input:focus-visible+span{outline:3px solid #b5692a;outline-offset:5px}img{width:100%;height:100%;display:block;object-fit:cover}figure{margin:0;position:relative;overflow:hidden}figcaption{position:absolute;right:0;bottom:0;padding:4px 10px;font-size:10px;line-height:1.6;color:#fff;background:#283128c7}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.65}h1,h2{font-family:var(--serif)}p{overflow-wrap:break-word}h2{font-size:clamp(25px,2.8vw,36px);letter-spacing:.045em}h3{font-size:20px}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.wrap{width:min(1120px,88%);margin-inline:auto}.section{padding-block:96px}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--brown);font-weight:600;margin-bottom:15px}.section-head{margin-bottom:40px}.section-head>p:last-child:not(.eyebrow){margin-top:18px;color:var(--muted);font-size:14px}.note{font-size:11px;color:var(--muted);line-height:1.8}.sample-notice{text-align:center;background:#ebe8df;color:#52564f;font-size:10px;padding:8px 20px;line-height:1.6}.site-header{min-height:104px;display:flex;align-items:center;justify-content:space-between;padding:22px 4%;gap:24px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;font-family:var(--serif);font-size:21px;line-height:1.4;letter-spacing:.06em}.brand svg{width:32px;height:38px;color:var(--brown)}.brand small{display:block;font:9px/2.2 sans-serif;letter-spacing:.2em}.site-header nav{display:flex;align-items:center;gap:28px;font-size:12px}.site-header nav>a{padding-block:8px}.site-header nav .nav-contact{padding:13px 22px;background:var(--brown);color:white}.nav-contact span{margin-left:12px}.hero{position:relative;margin:0 3% 0;padding-bottom:36px}.hero>figure{height:min(580px,49vw);min-height:380px}.hero>figure img{object-position:center 53%}.hero-copy{position:relative;margin:-200px 0 0 3.2%;width:650px;max-width:76%;padding:42px 45px 0;background:var(--paper)}h1{font-size:clamp(28px,3.1vw,42px);letter-spacing:.035em;line-height:1.7}h1 span{display:block;white-space:nowrap}.hero .intro{max-width:470px;margin-top:22px;font-size:14px}.hero .note{margin-top:9px}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:28px;font-size:13px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:13px 24px;background:var(--brown);color:#fff}.text-link{border-bottom:1px solid var(--line);padding-block:10px}.text-link span{margin-left:8px}.project-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:36px 42px}.project:first-child{grid-row:span 2}.project figure{aspect-ratio:1.85}.project:first-child figure{aspect-ratio:.94}.project-copy{padding-top:18px}.category{display:inline-block;color:var(--brown);font-size:11px;padding:1px 9px;border:1px solid #c9bba9;margin-bottom:10px}.project h3{font-family:var(--serif);font-size:23px;margin-bottom:10px}.project-copy>p:not(.category){font-size:13px;color:var(--muted)}details{border-bottom:1px solid var(--line);margin-top:16px;font-size:12px}summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:8px 0}summary::-webkit-details-marker{display:none}summary:after{content:'＋';font-size:18px}details[open] summary:after{content:'−'}details>p{padding:8px 0 14px}.services{background:#eeece3}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.service-grid article{position:relative;border-top:1px solid #bfbbae;padding:28px 0 0}.service-grid svg{width:66px;height:66px;display:block;color:var(--brown);margin-bottom:22px}.service-grid .number{position:absolute;right:0;top:24px;color:var(--brown);font:12px Georgia,serif}.service-grid h3{font-family:var(--serif);font-size:23px;margin-bottom:13px}.service-grid p{font-size:14px}.steps{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.steps li{border-top:1px solid var(--line);padding-top:24px}.step-num{color:var(--brown);font:italic 30px/1.2 Georgia,serif;display:block;margin-bottom:20px}.steps h3{font-size:16px;font-weight:600;margin-bottom:12px}.steps p{font-size:13px;color:var(--muted)}.contact{background:#e7e2d5}.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact .section-head{margin:0}.contact h2{font-size:30px}.contact .section-head>p:last-child{max-width:400px}.consultation{background:#f9f8f3;padding:28px}.consultation fieldset{border:0;padding:0;margin:0}.consultation legend{font-size:13px;font-weight:600;margin-bottom:15px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choices label{position:relative;cursor:pointer;font-size:12px}.choices input{position:absolute;width:1px;height:1px;opacity:0}.choices span{display:block;padding:9px 7px;border:1px solid var(--line);text-align:center}.choices input:checked+span{background:var(--brown);color:#fff;border-color:var(--brown)}.answer{font-size:14px;margin:22px 0 18px;min-height:5.7em}.site-footer{padding-block:48px;position:relative}.brand-name{font-family:var(--serif);font-size:23px;margin-bottom:8px}.site-footer p:not(.brand-name){font-size:11px}.site-footer>a{display:inline-block;font-size:12px;margin-top:18px;border-bottom:1px solid var(--line)}.site-footer small{display:block;font-size:9px;letter-spacing:.13em;margin-top:28px;color:var(--muted)}.skip{position:fixed;top:-100px;left:16px;background:#fff;padding:12px;z-index:100}.skip:focus{top:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Before: an ordinary readable information site, using exactly the same facts. */
.before{background:#fff;color:#333;font-size:14px}.before .site-header{width:min(980px,90%);margin:auto;padding:25px 0;min-height:90px}.before .brand{font-family:inherit;font-size:18px}.before .brand svg{display:none}.before .site-header nav{gap:18px;font-size:12px}.before .site-header nav .nav-contact{background:transparent;color:inherit;padding:8px 0}.before .wrap{width:min(940px,88%)}.before .hero{width:min(940px,88%);margin:30px auto 0;padding:0}.before .hero>figure{height:240px;min-height:0}.before .hero-copy{margin:24px 0 0;width:auto;max-width:none;padding:0;background:none}.before h1{font:500 26px/1.7 sans-serif;letter-spacing:0}.before h2{font:500 24px/1.7 sans-serif;letter-spacing:0;border-bottom:1px solid #ccc;padding-bottom:12px}.before .hero .eyebrow,.before .section-head>.eyebrow{display:none}.before .hero .intro{max-width:none}.before .section{padding-block:45px}.before .section-head{margin-bottom:24px}.before .services,.before .contact{background:transparent}.before .service-grid{display:block}.before .service-grid article{padding:10px 0;border:0}.before .service-grid svg,.before .number{display:none}.before .service-grid h3{font-family:inherit;font-size:18px;margin-bottom:5px}.before .steps{display:block;margin-bottom:20px;list-style:decimal;padding-left:1.5em}.before .steps li{border:0;padding:0;margin-bottom:18px}.before .step-num{display:none}.before .steps h3{font-size:16px;margin:0}.before .project-grid{display:block}.before .project{display:grid;grid-template-columns:230px 1fr;gap:28px;border-bottom:1px solid #ddd;padding:20px 0}.before .project figure,.before .project:first-child figure{aspect-ratio:1.5;align-self:start}.before .project-copy{padding:0}.before .project h3{font-family:inherit;font-size:18px;margin-bottom:8px}.before .category{border:0;padding:0;font-size:12px;margin-bottom:3px}.before .contact-inner{display:block}.before .consultation{margin-top:24px;background:#f5f5f3;max-width:620px}.before .site-footer{border-top:1px solid #ddd}.before .brand-name{font-family:inherit;font-size:18px}
@media(max-width:900px){.site-header{padding-inline:5%;flex-wrap:wrap;gap:18px}.site-header nav{width:100%;justify-content:space-between;gap:10px}.hero-copy{padding:32px 32px 0;margin-top:-150px;max-width:86%}.hero>figure{min-height:340px}.section{padding-block:70px}.project-grid{gap:30px}.steps{grid-template-columns:repeat(2,1fr);gap:32px}.contact-inner{grid-template-columns:1fr;gap:30px}.contact .section-head>p:last-child{max-width:none}.before .site-header nav{width:100%}.before .project{grid-template-columns:190px 1fr}}
@media(max-width:600px){body{font-size:14px}.sample-notice{font-size:9px;padding:8px 16px}.site-header{padding:22px 6% 18px;gap:18px}.brand{font-size:20px}.site-header nav{font-size:10px;gap:7px}.site-header nav .nav-contact{padding:8px 9px}.nav-contact span{display:none}.hero{margin:0;padding-bottom:0}.hero>figure{height:330px;min-height:0}.hero-copy{margin:-50px 0 0 6%;max-width:none;width:94%;padding:28px 6.4% 0 0;background:var(--paper)}.hero-copy:before{content:'';position:absolute;inset:0 auto 0 -16px;width:16px;background:var(--paper)}h1{font-size:clamp(21px,5.6vw,33px);letter-spacing:0;line-height:1.8}.hero .eyebrow{font-size:10px;margin-bottom:10px}.hero .intro{font-size:13px;margin-top:18px}.hero .note{font-size:10px}.hero-actions{gap:16px;margin-top:22px;font-size:11px}.button{padding:12px 15px;gap:15px}.text-link span{margin-left:3px}.wrap{width:88%}.section{padding-block:56px}h2{font-size:25px;letter-spacing:0;text-wrap:pretty;word-break:auto-phrase}.section-head{margin-bottom:26px}.section-head>p:last-child:not(.eyebrow){font-size:12px;margin-top:14px}.eyebrow{font-size:10px;margin-bottom:10px}.project-grid{display:block}.project+.project{margin-top:32px}.project figure,.project:first-child figure{aspect-ratio:1.3}.project h3{font-size:22px}.service-grid{display:block}.service-grid article{padding:23px 0 25px 82px;min-height:126px}.service-grid svg{position:absolute;left:0;top:29px;width:53px;height:53px}.service-grid .number{display:none}.service-grid h3{font-size:21px;margin-bottom:8px}.service-grid p{font-size:12px}.steps{grid-template-columns:1fr;gap:24px;margin-bottom:24px}.steps li{position:relative;padding:22px 0 0 54px}.step-num{position:absolute;left:0;top:23px;font-size:25px}.steps h3{font-size:16px}.steps p{font-size:13px}.contact h2{font-size:26px}.consultation{padding:22px 18px}.choices{gap:8px}.choices label{font-size:11px}.answer{font-size:13px}.site-footer{padding-block:35px}.before .site-header{padding-block:20px}.before .site-header nav{flex-wrap:wrap;justify-content:flex-start;gap:8px 20px}.before .hero{margin-top:16px}.before .hero>figure{height:160px}.before .hero-copy{padding:0;margin-top:20px;width:auto}.before .hero-copy:before{display:none}.before h1{font-size:22px}.before h2{font-size:22px}.before .section{padding-block:32px}.before .project{display:block;padding-block:24px}.before .project figure{width:180px;margin-bottom:15px}.before .steps li{padding:0}.before .contact h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(hover:hover){a:hover{opacity:.75}summary:hover{color:var(--brown)}}

p{text-wrap:pretty}