/* F — Pieces. Geometric tiles that assemble into the Central Coast. Prototype. */
:root { --t: 10vw; --k: #000; --blue: #2440E8; --red: #EE4027; --yellow: #FFC72C; --pink: #F7B6CE; --green: #0B7A5C; --font: "Jost", "Futura", system-ui, sans-serif; --spring: cubic-bezier(.3, 1.35, .45, 1); }
*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: #fff; color: var(--k); font: 400 1.1875rem/1.42 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ul, ol { list-style: none; padding: 0; } .defs { position: absolute; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } .skip { position: absolute; left: 12px; top: -70px; z-index: 200; background: var(--k); color: #fff; padding: 10px 14px; } .skip:focus { top: 10px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.035em; line-height: .96; } h2 { font-size: calc(var(--t) * .66); }
.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 72px; padding-inline: calc(var(--t) * .2); background: #fff; } .top img { height: 22px; width: auto; } .top nav { display: flex; gap: 28px; font-size: 1.15rem; font-weight: 500; } .top nav a { text-decoration: none; } .top nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.t { display: block; overflow: hidden; box-shadow: 0 0 0 .6px var(--bg, transparent); } .t svg { display: block; width: 100%; height: 100%; rotate: var(--r, 0deg); transition: rotate .55s var(--spring); }
.hero { position: relative; } .art { display: grid; grid-template-columns: repeat(10, var(--t)); grid-auto-rows: var(--t); } .art--s { display: none; }
.hero__t { position: absolute; left: 0; top: 0; width: calc(var(--t) * 6); height: calc(var(--t) * 4); padding: calc(var(--t) * .2); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.hero h1 { font-size: calc(var(--t) * .96); line-height: .9; letter-spacing: -.04em; } .hero p { max-width: 27em; margin: calc(var(--t) * .14) 0 calc(var(--t) * .16); font-size: clamp(1.15rem, .9rem + .55vw, 1.55rem); line-height: 1.26; }
.btn { display: inline-flex; align-items: center; min-height: 58px; padding: 0 26px; background: var(--k); color: #fff; font-size: 1.2rem; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s; } .btn:hover { background: var(--blue); } .btn--w { background: #fff; color: var(--k); } .btn--w:hover { background: var(--yellow); } .btn--l { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; } .btn--l:hover { background: #fff; color: var(--k); }
.svc { padding-top: calc(var(--t) * .9); } .svc__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 40px; padding: 0 calc(var(--t) * .2) calc(var(--t) * .42); } .svc__h p { max-width: 26em; }
.bento { display: grid; grid-template-columns: repeat(10, var(--t)); grid-auto-rows: calc(var(--t) * 2); } .b { position: relative; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; } .c2 { grid-column: span 2; }
.b a { display: flex; flex-direction: column; height: 100%; padding: calc(var(--t) * .17); padding-right: calc(var(--t) * .34); text-decoration: none; } .b h3 { font-size: clamp(2rem, 1.2rem + 1.7vw, 3.1rem); } .c2 h3 { font-size: clamp(1.9rem, 1.2rem + 1.25vw, 2.5rem); } .b p { margin-top: 10px; max-width: 16em; line-height: 1.26; } .pr { margin-top: auto; max-width: calc(100% - var(--t) * .7); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.c2 a { padding-right: calc(var(--t) * .17); } .c2 .pr { max-width: calc(100% - var(--t) * .72); } .t.m { position: absolute; right: 0; bottom: 0; width: var(--t); height: var(--t); pointer-events: auto; } .c2 .t.m { width: calc(var(--t) * .72); height: calc(var(--t) * .72); }
.work { padding-top: calc(var(--t) * .9); } .work h2 { padding: 0 calc(var(--t) * .2) calc(var(--t) * .42); }
.p { display: grid; grid-template-columns: calc(var(--t) * 6.5) calc(var(--t) * 3.5); } .p--r { grid-template-columns: calc(var(--t) * 3.5) calc(var(--t) * 6.5); } .p--r .mosaic { order: 2; }
.mosaic { position: relative; display: block; height: calc(var(--t) * 4); overflow: hidden; } .mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cov { position: absolute; inset: 0; display: grid; } .cov .t { transition: scale .5s var(--spring), rotate .5s ease; } .cov .t.off { scale: 0; rotate: 90deg; }
.info { position: relative; padding: calc(var(--t) * .2); } .info h3 { font-size: clamp(2.1rem, 1.2rem + 2.1vw, 3.5rem); } .info p { margin-top: 10px; max-width: 15em; line-height: 1.25; } .info a { display: inline-block; margin-top: 12px; font-weight: 600; text-underline-offset: 4px; }
.rate { display: grid; grid-template-columns: calc(var(--t) * 4.5) 1fr; align-items: end; gap: 0 calc(var(--t) * .3); margin-top: calc(var(--t) * .9); padding: calc(var(--t) * .4) calc(var(--t) * .2); background: var(--pink); } .five { font-size: calc(var(--t) * 2.5); font-weight: 600; line-height: .8; letter-spacing: -.05em; } .five span { color: var(--red); }
blockquote { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.8rem); font-weight: 500; line-height: 1.04; letter-spacing: -.025em; } figcaption { margin-top: 14px; } .note { grid-column: 1 / -1; margin-top: calc(var(--t) * .18); }
.about { display: grid; grid-template-columns: calc(var(--t) * 4) 1fr; align-items: end; gap: calc(var(--t) * .5); padding: calc(var(--t) * .7) calc(var(--t) * .2) 0; } .arch { overflow: hidden; height: calc(var(--t) * 4.6); border-radius: calc(var(--t) * 1.9) calc(var(--t) * 1.9) 0 0; background: var(--yellow); } .arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .about__t { padding-bottom: calc(var(--t) * .3); max-width: 34em; } .about__t p { margin-top: 14px; } .lead { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; line-height: 1.14; letter-spacing: -.015em; }
.how { padding-top: calc(var(--t) * .9); } .how h2 { padding: 0 calc(var(--t) * .2) calc(var(--t) * .42); } .how ol { display: grid; grid-template-columns: repeat(4, 1fr); } .how li { min-height: calc(var(--t) * 3); padding: calc(var(--t) * .2); } .num { display: grid; place-items: center; width: calc(var(--t) * .6); height: calc(var(--t) * .6); border-radius: 50%; background: currentColor; font-size: 1.6rem; font-weight: 600; line-height: 1; } .num { color: inherit; } li .num { background: #fff; color: #000; } .how h3 { margin-top: calc(var(--t) * .3); font-size: clamp(1.7rem, 1.2rem + 1.1vw, 2.5rem); } .how p { margin-top: 8px; line-height: 1.28; }
.end { padding: calc(var(--t) * .4) calc(var(--t) * .2) 18px; background: var(--k); color: #fff; } .end h2 { font-size: calc(var(--t) * 2.1); line-height: .9; letter-spacing: -.05em; } .end__a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--t) * .34); } .end footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; margin-top: calc(var(--t) * .5); padding-bottom: 60px; font-size: 1rem; }
@media (max-width: 899px) { :root { --t: 25vw; } h2 { font-size: 15vw; } .top nav { display: none; } .art--l { display: none; } .art--s { display: grid; grid-template-columns: repeat(4, var(--t)); } .hero__t { position: relative; width: 100%; height: auto; padding: 8vw 5vw 9vw; } .hero h1 { font-size: 21vw; } .hero p { margin: 16px 0 20px; }
  .svc, .work, .how { padding-top: 16vw; } .svc__h, .work h2, .how h2 { padding: 0 5vw 7vw; } .bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .c4, .c3, .c2 { grid-column: auto; } .b a { min-height: min(50vw, 280px); padding: 5vw; padding-right: 26vw; } .t.m, .c2 .t.m { width: min(22vw, 170px); height: min(22vw, 170px); } .pr { max-width: none; padding-top: 16px; }
  .p, .p--r { grid-template-columns: 1fr; } .p--r .mosaic { order: 0; } .mosaic { height: 62vw; } .info { min-height: min(52vw, 280px); padding: 5vw; padding-right: 26vw; } .rate { grid-template-columns: 1fr; gap: 20px; margin-top: 16vw; padding: 9vw 5vw; } .five { font-size: 42vw; } .about { grid-template-columns: 1fr; padding: 16vw 5vw 0; gap: 22px; } .arch { height: 112vw; border-radius: 45vw 45vw 0 0; } .how ol { grid-template-columns: 1fr; } .how li { min-height: 0; padding: 6vw 5vw 8vw; } .num { width: 14vw; height: 14vw; } .how h3 { margin-top: 16px; font-size: 8.4vw; } .end { padding: 9vw 5vw 18px; } .end h2 { font-size: 27vw; } .end__a { margin-top: 22px; } .end footer { margin-top: 26px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }