:root { --paper:#f5f0e6; --surface:#fff; --ink:#141414; --muted:#7a5a1f; --line:#ded2bb; --blue:#141414; --sans:'Jost',Arial,sans-serif; --serif:'Jost',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.7 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
a:focus-visible,button:focus-visible { outline:2px solid var(--agachi-dark-bronze); outline-offset:6px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.section-width { width:min(1200px,calc(100% - 112px)); margin-inline:auto; }
.site-header { height:100px; position:sticky; top:0; z-index:10; background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner { width:min(1320px,calc(100% - 64px)); height:100%; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; padding:23px; flex-shrink:0; }
.brand-logo { display:block; width:auto; height:46px; max-width:220px; object-fit:contain; }
.site-header nav { display:flex; gap:30px; font-size:12px; font-weight:400; letter-spacing:.04em; }
.site-header nav a { padding:8px 0; border-bottom:1px solid transparent; }
.site-header nav a:hover { border-color:var(--agachi-bronze); }
.header-cta { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:260px; padding:13px 16px; border:1px solid var(--ink); font-size:10px; font-weight:400; letter-spacing:.09em; text-transform:uppercase; line-height:1.55; }
.header-cta svg { width:18px; height:18px; }
.header-cta:hover { background:var(--ink); color:var(--paper); }
.hero { display:grid; grid-template-columns:.95fr 1fr; gap:76px; align-items:center; padding-block:58px 64px; }
.eyebrow { font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; line-height:1.8; color:var(--agachi-dark-bronze); }
.hero .eyebrow { display:flex; gap:12px; align-items:center; }
.hero .eyebrow>.layer-mark { display:flex; flex-direction:column; justify-content:center; gap:5px; width:28px; height:24px; flex-shrink:0; }
.layer-mark i { display:block; height:2px; width:14px; background:#b8893a; }
.layer-mark i:nth-child(2) { width:20px; background:#9a6f2a; }
.layer-mark i:nth-child(3) { width:26px; background:#7a5a1f; }
.hero h1 { font:300 clamp(46px,5.1vw,70px)/1.1 var(--serif); letter-spacing:-.045em; max-width:560px; margin-top:25px; text-wrap:balance; }
.hero-description { font-size:16px; font-weight:300; line-height:1.85; max-width:450px; color:var(--muted); margin-top:26px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:31px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:17px 23px; border:1px solid transparent; border-radius:2px; font-size:11px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; line-height:1.6; transition:background .15s,color .15s; }
.button.primary { background:var(--blue); color:var(--button-ink,#f5f0e6); }
.button.primary:hover { background:var(--agachi-dark-bronze); color:var(--agachi-cream); }
.button svg { height:19px; width:19px; }
.text-link { display:flex; align-items:center; gap:15px; font-size:12px; color:var(--ink); border-bottom:1px solid var(--agachi-bronze); padding-block:7px; }
.text-link span { font-size:18px; }
.hero-note { font-size:10px; font-weight:300; color:var(--muted); margin-top:15px; }
.hero-detail { display:flex; align-items:center; gap:16px; margin-top:37px; }
.detail-rule { width:32px; height:1px; background:var(--agachi-bronze); flex-shrink:0; }
.hero-detail p { font:italic 400 22px/1.3 var(--editorial); color:var(--ink); max-width:330px; }
.hero-photo { position:relative; aspect-ratio:1.08; overflow:hidden; background:var(--surface); border-radius:4px; }
.hero-photo>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.photo-tag { position:absolute; left:20px; top:20px; display:flex; gap:26px; align-items:center; background:var(--agachi-black); color:var(--agachi-cream); font-size:9px; letter-spacing:.15em; font-weight:400; line-height:1.5; padding:10px 13px; }
.photo-tag>span { color:var(--agachi-gold); }
.hero-photo figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; background:var(--surface); }
.hero-photo figcaption>span { font-size:11px; font-weight:400; letter-spacing:.12em; }
.hero-photo figcaption small { font-size:10px; color:var(--muted); }
.feature-strip { display:grid; grid-template-columns:repeat(4,1fr); padding-block:29px; border-block:1px solid var(--line); gap:24px; }
.feature-strip>div { display:flex; gap:15px; align-items:center; }
.feature-strip svg { width:28px; height:28px; color:var(--agachi-dark-bronze); }
.feature-strip strong { display:block; font-size:13px; font-weight:400; }
.feature-strip small { display:block; font-size:11px; font-weight:300; color:var(--muted); margin-top:4px; }
.projects-section { padding-block:100px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:50px; margin-bottom:38px; }
.section-heading h2 { font:300 42px/1.2 var(--serif); letter-spacing:-.025em; margin-top:12px; max-width:650px; }
.section-heading>p { max-width:325px; font-size:14px; font-weight:300; line-height:1.8; color:var(--muted); }
.project-card { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); overflow:hidden; background:var(--surface); }
.project-visual { display:block; position:relative; min-height:470px; background:var(--paper); overflow:hidden; }
.project-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; transition:transform .3s; }
.project-visual:hover img { transform:scale(1.02); }
.project-index { position:absolute; top:20px; left:20px; min-height:34px; min-width:34px; display:grid; place-items:center; background:var(--agachi-black); color:var(--agachi-gold); font-size:10px; font-weight:400; }
.project-info { padding:45px 48px; display:flex; flex-direction:column; align-items:flex-start; }
.project-info h3 { font:400 35px/1.2 var(--serif); letter-spacing:.045em; margin-top:17px; }
.project-info .project-description { font-size:15px; font-weight:300; color:var(--muted); line-height:1.85; margin-top:20px; }
.project-options { list-style:none; padding:0; margin:24px 0 30px; display:flex; flex-direction:column; gap:11px; font-size:13px; }
.project-options li { display:flex; align-items:center; gap:11px; }
.project-options li:before { content:'—'; font-size:16px; color:var(--agachi-dark-bronze); }
.project-info .button { margin-top:auto; }
.motion-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,290px); gap:80px; align-items:center; margin-bottom:100px; padding:55px 70px; background:var(--section-background,#141414); color:var(--section-ink,#f5f0e6); }
.motion-copy .eyebrow,.closing-cta .eyebrow { color:var(--section-ink,#f5f0e6); opacity:.75; }
.motion-copy h2 { font:300 47px/1.15 var(--serif); letter-spacing:-.025em; max-width:480px; margin-top:18px; text-wrap:balance; }
.motion-description { font-size:15px; font-weight:300; line-height:1.85; max-width:460px; color:var(--section-ink,#f5f0e6); opacity:.78; margin-top:24px; }
.motion-copy .button { margin-top:32px; }
.motion-section .button.primary,.closing-cta .button.primary { background:var(--section-action,#c9a24b); color:var(--section-action-ink,#141414); }
.motion-section .button.primary:hover,.closing-cta .button.primary:hover { background:var(--agachi-cream); color:var(--agachi-black); }
.motion-player { width:100%; max-width:290px; margin-inline:auto; }
.video-frame { position:relative; }
.motion-player video { display:block; width:100%; height:auto; aspect-ratio:256/455; background:var(--agachi-black); border:1px solid #c9a24b55; border-radius:2px; }
.motion-player figcaption { font-size:11px; font-weight:300; line-height:1.6; text-align:center; margin-top:14px; color:var(--section-ink,#f5f0e6); opacity:.75; }
.video-brand,.video-message { position:absolute; pointer-events:none; line-height:1.4; background:var(--agachi-black); color:var(--agachi-cream); }
.video-brand { left:12px; top:12px; padding:7px 10px; font-size:9px; font-weight:400; letter-spacing:.12em; max-width:calc(100% - 24px); }
.video-message { bottom:54px; left:12px; right:12px; padding:10px; text-align:center; font:400 18px/1.25 var(--editorial); }
.video-brand:empty,.video-message:empty { display:none; }
.gallery-section { background:var(--surface); padding-block:90px; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.gallery-shot>div { position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--paper); }
.gallery-shot img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.gallery-shot:hover img { transform:scale(1.025); }
.zoom-badge { position:absolute; right:12px; top:12px; width:30px; height:30px; display:grid; place-items:center; background:var(--agachi-cream); color:var(--agachi-black); }
.zoom-badge svg { height:14px; width:14px; }
.gallery-caption { display:flex; align-items:baseline; gap:12px; font-size:13px; font-weight:400; padding:17px 1px; line-height:1.4; }
.gallery-caption small { font-size:10px; color:var(--agachi-dark-bronze); font-weight:300; }
.gallery-credit { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; font-size:11px; font-weight:300; color:var(--muted); }
.gallery-credit p { max-width:760px; }
.how-section { padding-block:95px; }
.steps { list-style:none; padding:0; margin:42px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:45px; }
.steps li { border-top:1px solid var(--agachi-bronze); padding-top:19px; }
.step-number { font:400 38px/1 var(--editorial); color:var(--agachi-dark-bronze); }
.steps h3 { font-size:18px; font-weight:400; margin-top:22px; }
.steps p { font-size:14px; font-weight:300; color:var(--muted); line-height:1.8; max-width:340px; margin-top:12px; }
.closing-cta { padding:48px 52px; background:var(--section-background,#141414); color:var(--section-ink,#f5f0e6); display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:95px; }
.closing-cta h2 { font:300 36px/1.2 var(--serif); letter-spacing:-.02em; margin-top:12px; }
.closing-cta p:not(.eyebrow) { font-size:14px; font-weight:300; color:var(--section-ink,#f5f0e6); opacity:.75; margin-top:14px; }
.closing-cta .button { white-space:nowrap; flex-shrink:0; }
.site-footer.section-width { width:100%; margin:0; padding:46px max(56px,calc((100% - 1200px)/2)) 52px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; background:var(--agachi-black); color:var(--agachi-cream); }
.site-footer .brand { padding:25px; margin-left:-25px; }
.site-footer .brand-logo { height:50px; max-width:230px; }
.site-footer p { font:400 21px/1.4 var(--editorial); color:var(--agachi-cream); opacity:.78; margin-top:4px; }
.site-footer>div:nth-child(2) { display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.site-footer>div:nth-child(2)>span { font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--agachi-gold); }
.site-footer>div:nth-child(2)>a { font-size:15px; font-weight:300; border-bottom:1px solid var(--agachi-bronze); padding-bottom:3px; }
#photo-dialog { border:1px solid var(--line); border-radius:4px; padding:12px; color:var(--ink); background:var(--surface); max-width:calc(100vw - 30px); max-height:calc(100dvh - 30px); overflow:auto; }
#photo-dialog::backdrop { background:#141414ed; }
#photo-dialog figure { margin:0; }
#large-photo { display:block; max-height:calc(100dvh - 100px); max-width:calc(100vw - 56px); width:auto; height:auto; }
#photo-caption { font-size:13px; text-align:center; padding:12px 8px 3px; }
#close-photo { position:absolute; right:20px; top:20px; width:36px; height:36px; border:1px solid var(--agachi-cream); color:var(--agachi-black); background:var(--agachi-cream); font-size:24px; line-height:1; z-index:1; }
@media(min-width:1600px) { .hero { padding-block:76px; } }
@media(max-width:1100px) {
  .section-width { width:calc(100% - 72px); }
  .header-inner { width:calc(100% - 36px); gap:20px; }
  .site-header nav { gap:20px; font-size:11px; }
  .header-cta { max-width:218px; font-size:9px; padding:12px; }
  .hero { gap:42px; padding-block:46px 52px; }
  .hero h1 { font-size:54px; }
  .hero-description { font-size:15px; }
  .hero-actions { gap:18px; }
  .feature-strip { gap:18px; }
  .feature-strip>div { gap:10px; }
  .feature-strip strong { font-size:12px; }
  .feature-strip small { font-size:10px; }
  .project-info { padding:33px; }
  .project-info h3 { font-size:30px; }
  .project-visual { min-height:460px; }
  .motion-section { padding:45px; gap:45px; grid-template-columns:minmax(0,1fr) 260px; }
  .motion-copy h2 { font-size:40px; }
  .closing-cta { padding:36px; gap:28px; }
  .closing-cta h2 { font-size:30px; }
  .closing-cta .button { font-size:10px; gap:15px; }
  .site-footer.section-width { padding-inline:36px; }
}
@media(max-width:800px) {
  html { scroll-padding-top:92px; }
  .site-header { height:82px; }
  .header-inner { width:calc(100% - 24px); gap:10px; }
  .brand { padding:18px; }
  .brand-logo { height:36px; max-width:130px; }
  .site-header nav { display:none; }
  .header-cta { max-width:180px; font-size:9px; gap:10px; padding:11px 12px; }
  .header-cta svg { width:16px; height:16px; }
  .section-width { width:calc(100% - 40px); }
  .hero { grid-template-columns:1fr; gap:32px; padding-block:37px 39px; }
  .hero h1 { font-size:clamp(43px,8.2vw,62px); max-width:600px; margin-top:21px; }
  .hero-description { font-size:15px; max-width:550px; margin-top:21px; }
  .hero-actions { gap:22px; margin-top:26px; }
  .hero-note { font-size:10px; }
  .hero-detail { margin-top:25px; }
  .hero-detail p { font-size:21px; }
  .hero-photo { aspect-ratio:1.16; }
  .hero-photo figcaption { padding:12px 15px; }
  .hero-photo figcaption>span { font-size:10px; }
  .photo-tag { left:15px; top:15px; font-size:8px; gap:22px; }
  .feature-strip { grid-template-columns:1fr 1fr; gap:25px 18px; padding-block:25px; }
  .feature-strip svg { width:23px; height:23px; }
  .feature-strip strong { font-size:12px; }
  .feature-strip small { font-size:10px; line-height:1.5; }
  .projects-section { padding-block:60px; }
  .section-heading { display:block; margin-bottom:27px; }
  .section-heading h2 { font-size:33px; }
  .section-heading>p { font-size:13px; max-width:none; margin-top:15px; }
  .eyebrow { font-size:9px; letter-spacing:.17em; }
  .project-card { grid-template-columns:1fr; }
  .project-visual { min-height:0; aspect-ratio:1.12; }
  .project-info { padding:30px 25px; }
  .project-info h3 { font-size:29px; }
  .project-info .project-description { font-size:14px; }
  .project-options { font-size:12px; margin-block:22px 26px; }
  .project-info .button { width:100%; }
  .button { font-size:10px; padding:16px 19px; gap:22px; }
  .motion-section { grid-template-columns:1fr; padding:34px 25px; gap:34px; margin-bottom:60px; }
  .motion-copy h2 { font-size:36px; }
  .motion-description { font-size:14px; margin-top:20px; }
  .motion-copy .button { margin-top:26px; }
  .motion-player { max-width:280px; }
  .gallery-section { padding-block:58px; }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:19px 13px; }
  .gallery-caption { font-size:11px; gap:7px; padding-block:13px; }
  .gallery-caption small { font-size:9px; }
  .gallery-credit { font-size:10px; }
  .zoom-badge { width:26px; height:26px; right:8px; top:8px; }
  .how-section { padding-block:60px; }
  .steps { grid-template-columns:1fr; gap:26px; margin-top:29px; }
  .steps li { display:grid; grid-template-columns:38px 1fr; column-gap:17px; padding-top:20px; }
  .step-number { font-size:31px; grid-row:span 2; }
  .steps h3 { margin:0; font-size:17px; }
  .steps p { grid-column:2; margin-top:9px; max-width:none; font-size:13px; }
  .closing-cta { display:block; padding:31px 25px; margin-bottom:60px; }
  .closing-cta h2 { font-size:30px; }
  .closing-cta p:not(.eyebrow) { font-size:13px; }
  .closing-cta .button { margin-top:25px; width:100%; }
  .site-footer.section-width { padding:30px 26px 38px; gap:30px; }
  .site-footer .brand { padding:21px; margin-left:-21px; }
  .site-footer .brand-logo { height:42px; }
  .site-footer p { font-size:20px; }
  .site-footer>div:nth-child(2) { align-items:flex-start; }
  .site-footer>div:nth-child(2)>a { font-size:14px; }
}
@media(max-width:380px) {
  .header-cta { max-width:156px; font-size:8px; padding:9px; }
  .hero .eyebrow { font-size:8px; letter-spacing:.14em; }
  .hero h1 { font-size:42px; }
  .hero-actions .button { padding-inline:15px; gap:14px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; } }