("…consistent execution…") */
.sec-quote__para{ width:100%; }
.sec-quote__para p{ display:inline; white-space:pre-wrap; word-break:break-word; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-quote__review{ padding:150px 40px 100px; }
.sec-quote__cols,.sec-quote__counter,.sec-quote__author{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-quote__col--3{ display:none; }
.sec-quote__counter-inner,.sec-quote__author-wrap{ grid-column:auto; }
.sec-quote__title{ font-size:50px; }
.sec-quote__image{ width:408px; height:483px; }
.sec-quote__line--1{ top:52px; }
.sec-quote__line--2{ top:auto; bottom:54px; }
}
@media (max-width:809.98px){
.sec-quote__review{ padding:150px 20px 100px; }
.sec-quote__cols{ grid-template-columns:1fr; padding:0 20px; }
.sec-quote__col--2,.sec-quote__col--3{ display:none; }
.sec-quote__counter,.sec-quote__author{ display:flex; flex-direction:row; align-items:center; justify-content:center; }
.sec-quote__spacer{ display:none; }
.sec-quote__counter-inner{ width:auto; }
.sec-quote__author-wrap{ width:100%; align-items:flex-start; } /* .framer-142xk8e <810: flex:1 0 0, base align-items:flex-start, gap 50px */
.sec-quote__title{ font-size:36px; }
.sec-quote__image{ width:322px; height:403px; top:-60px; }
.sec-quote__line--1{ top:33px; }
.sec-quote__line--2{ top:67px; }
.sec-quote__line--3{ bottom:33px; }
}
/* ==== css/sections/15-faq.css ==== */
/* ==========================================================================
15 — FAQ section ("[ND® ‒ FAQ / 質問と理解]" — "Quick answers." + 5-item accordion)
Measured on neiden.framer.media at 1440×900 (breakpoint 1200–1619).
Section = 150 + content 888.6 + 150 = 1188.6px
Content = flex row: sticky heading (1/3 = 453.3px, top:100px, gap 200) | accordion (2/3 = 906.7px)
Accordion items: open 520.6px (40 + 32 + 30 + 89.6 + 30 + 259 + 40), closed 92px (30 + 32 + 30)
========================================================================== */
.sec-faq{
position:relative; z-index:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; padding:150px var(--page-pad);
background:var(--white); color:var(--black);
font-family:var(--font-sans);
}
/* ---- hairline column grid (col 1: left + right, cols 2/3: right) ---- */
.sec-faq__cols{
position:absolute; inset:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%;
padding:0 var(--page-pad); pointer-events:none; overflow:clip;
}
.sec-faq__col{ position:relative; height:100%; overflow:clip; }
.sec-faq__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-faq__col--1::after{ border-left-width:1px; }
/* ---- content row ---- */
.sec-faq__content{
position:relative; z-index:1; width:100%;
display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:0;
}
/* ---- left: sticky heading ---- */
.sec-faq__heading{
position:sticky; top:100px; z-index:1;
flex:1 0 0; width:1px; min-width:0;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:200px;
border-radius:10px;
}
.sec-faq__intro{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; }
.sec-faq__label-wrap{ position:relative; width:max-content; height:14px; }
.sec-faq__label{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); cursor:pointer; text-decoration:none; }
.sec-faq__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-faq__icon-bar{ display:block; height:14px; flex:none; overflow:visible; }
.sec-faq__label-text{ display:flex; align-items:flex-end; justify-content:center; gap:2px; height:14px; }
.sec-faq__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
}
.sec-faq__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-faq__title{
display:block; margin:0; white-space:pre; word-break:break-word;
font-family:var(--font-sans); font-size:70px; font-weight:600; line-height:63px; letter-spacing:-.06em; color:var(--black);
}
.sec-faq__title .split-word{ white-space:nowrap; display:inline-block; }
.sec-faq__title .split-char{ display:inline-block; }
.sec-faq__lead{ position:relative; width:max-content; max-width:100%; }
.sec-faq__lead p{ white-space:pre; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left; }
/* CTA block */
.sec-faq__cta{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; }
.sec-faq__cta-text{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:5px; width:100%; }
.sec-faq__cta-title{ white-space:pre; font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black); }
.sec-faq__cta-sub{ white-space:pre; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left; }
/* black CTA button 300×60 (Framer "Default button": red on hover, letters slide, plus spins) */
.sec-faq__btn-wrap{ position:relative; width:300px; height:60px; }
.sec-faq__btn{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:300px; height:60px;
background:var(--black); color:var(--white); cursor:pointer; overflow:clip; text-decoration:none;
/* measured on the live button: variant switch = over-damped spring — fast on hover-in (≈0.35s), slower on hover-out (≈0.7s) */
transition:background-color .7s cubic-bezier(.3,.3,.2,.9);
}
.sec-faq__btn:hover{ background:var(--red); transition-duration:.35s; transition-timing-function:cubic-bezier(.2,.35,.1,.9); }
.sec-faq__btn-txt{ position:relative; z-index:1; display:block; height:12px; overflow:clip; }
.sec-faq__btn-line{
display:block; height:12px; font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
color:var(--white); white-space:pre;
}
.sec-faq__btn-line--b{ position:absolute; left:0; top:0; }
/* Live text effect (measured): on hover every letter jumps 15px up out of the clip instantly, then drops back into place
one letter at a time (≈0.15s ease-out, 30ms stagger); on hover-out they jump 15px below and rise back the same way.
Copy "a" plays the hover-out entrance (from below), copy "b" the hover-in entrance (from above); the other copy jumps. */
.sec-faq__btn-line .c{ display:inline-block; transition:transform .16s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * .03s); }
.sec-faq__btn-line--b .c{ transform:translateY(-15px); transition:none; }
.sec-faq__btn:hover .sec-faq__btn-line--a .c{ transform:translateY(15px); transition:none; }
.sec-faq__btn:hover .sec-faq__btn-line--b .c{ transform:translateY(0); transition:transform .16s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * .03s); }
.sec-faq__btn-icon{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; background:var(--white); pointer-events:none;
-webkit-mask:url("data:image/svg+xml,") no-repeat center/100% 100%;
mask:url("data:image/svg+xml,") no-repeat center/100% 100%;
transition:transform .425s cubic-bezier(.3,.4,.2,.95); /* live: one spring both ways (15% @40ms, 65% @140ms, settled ≈0.45s) */
}
/* live: the plus spins counter-clockwise (−180°) */
.sec-faq__btn:hover .sec-faq__btn-icon{ transform:rotate(-180deg); }
/* ---- right: accordion ---- */
.sec-faq__list{
position:relative; z-index:1;
flex:2 0 0; width:1px; min-width:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:var(--white); list-style:none; margin:0; padding:0;
}
.sec-faq__list::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; border-right-width:1px; pointer-events:none; }
.sec-faq__item{
position:relative; z-index:1; width:100%; list-style:none;
cursor:pointer; overflow:hidden;
}
.sec-faq__item::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-bottom-width:1px; pointer-events:none; z-index:3; }
.sec-faq__item-inner{
position:relative; display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:0;
width:100%; padding:0 46px 0 30px; /* 30 + 16px icon column + 30 */
}
.sec-faq__main{ position:relative; flex:1 0 0; width:1px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:30px 0; }
.sec-faq__item.is-open .sec-faq__main{ padding:40px 0; }
/* block = heading row + body: the unit Framer projects into place when a variant switches */
.sec-faq__block{ position:relative; z-index:2; width:100%; transform-origin:50% 0; }
.sec-faq__head.sec-faq__head--ghost{ position:absolute; top:30px; left:30px; right:46px; width:auto; z-index:1; pointer-events:none; }
/* heading row: number box + question + (empty) tag */
.sec-faq__head{
position:relative; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between;
width:100%; height:32px; padding:0 10px 0 0; margin:0; border:0; background:none; color:inherit; cursor:pointer; text-align:left; font:inherit;
}
.sec-faq__num{
position:relative; flex:none; display:flex; align-items:center; justify-content:center;
width:32px; height:32px; background:var(--black-05); overflow:clip;
}
.sec-faq__num-txt{
display:block; white-space:pre;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
transition:transform .35s cubic-bezier(.7,.05,.4,.85); /* live layout spring: slow start, 41% @180ms, 90% @280ms, done ≈0.38s (same both ways) */
}
.sec-faq__num-txt--b{ position:absolute; top:-20px; left:50%; transform:translate(-50%,0); }
/* Framer "hover" variant of the closed item: visible number drops to bottom:-20px, the duplicate comes in from top:-20px (both +30px) */
.sec-faq__item:not(.is-open):hover .sec-faq__num-txt--a{ transform:translateY(30px); }
.sec-faq__item:not(.is-open):hover .sec-faq__num-txt--b{ transform:translate(-50%,30px); }
.sec-faq__q{
flex:1 0 0; width:1px; min-width:0; margin-left:15px;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
white-space:pre-wrap; word-break:break-word;
}
.sec-faq__tag{ flex:none; display:block; width:30px; height:12px; padding:6px 15px; overflow:hidden; }
/* body (answer + media) */
.sec-faq__body{ display:none; width:100%; padding-top:30px; }
.sec-faq__item.is-open .sec-faq__body{ display:block; }
.sec-faq__answer{
width:100%; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left;
white-space:pre-wrap; word-break:break-word;
}
.sec-faq__media{ position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0; width:100%; margin-top:30px; overflow:hidden; }
.sec-faq__img{ position:relative; flex:1 0 0; width:1px; height:259px; overflow:hidden; }
.sec-faq__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-faq__corner{
position:absolute; top:-1px; left:-1px; z-index:2; width:63px; height:63px; pointer-events:none;
background:url("data:image/svg+xml,") 0 0/100% 100% no-repeat;
transform:rotate(-90deg); transform-origin:50% 50%;
}
/* toggle icon (+ → × when open): 16×16 at right:30px; y = 38 closed (centred in 92) / 40 open */
.sec-faq__toggle{ position:absolute; top:38px; right:30px; z-index:2; display:flex; align-items:center; justify-content:center; width:16px; height:16px; overflow:hidden; transition:top .4s cubic-bezier(.22,1,.36,1); }
.sec-faq__item.is-open .sec-faq__toggle{ top:40px; }
.sec-faq__plus{ display:block; width:16px; height:16px; color:var(--black); }
.sec-faq__plus svg{ display:block; width:16px; height:16px; overflow:hidden; }
.sec-faq__item.is-open .sec-faq__plus{ transform:rotate(45deg); }
.sec-faq.is-static .sec-faq__toggle, .sec-faq.is-static .sec-faq__num-txt, .sec-faq.is-static .sec-faq__btn, .sec-faq.is-static .sec-faq__btn-icon, .sec-faq.is-static .sec-faq__btn-line .c{ transition:none; }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-faq{ padding:200px 0; }
.sec-faq__content{ max-width:var(--container-max); margin:0 auto; }
.sec-faq__cols{ right:auto; left:50%; width:100%; max-width:var(--container-max); transform:translateX(-50%); padding:0; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-faq{ padding:100px 40px; }
.sec-faq__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-faq__col--3{ display:none; }
.sec-faq__content{ flex-direction:column; gap:50px; }
.sec-faq__heading{ position:relative; top:auto; flex:none; flex-direction:row; gap:0; width:100%; }
.sec-faq__intro{ flex:1 0 0; width:1px; }
.sec-faq__cta{ flex:1 0 0; width:1px; }
.sec-faq__list{ flex:none; width:100%; }
.sec-faq__list::after{ border-left-width:1px; }
.sec-faq__cta-text{ gap:0; }
}
@media (max-width:809.98px){
.sec-faq{ padding:50px 20px 100px; }
.sec-faq__cols{ grid-template-columns:1fr; padding:0 20px; }
.sec-faq__col--2,.sec-faq__col--3{ display:none; }
.sec-faq__content{ flex-direction:column; gap:70px; }
.sec-faq__heading{ position:relative; top:auto; flex:none; gap:50px; width:100%; }
.sec-faq__list{ flex:none; width:100%; }
.sec-faq__list::after{ border-left-width:1px; }
.sec-faq__title{ font-size:50px; line-height:45px; }
.sec-faq__lead p,.sec-faq__cta-sub{ white-space:pre-wrap; }
.sec-faq__btn-wrap,.sec-faq__btn{ width:100%; }
.sec-faq__item-inner{ padding:0 20px; }
.sec-faq__toggle{ right:20px; }
.sec-faq__media{ flex-direction:column; align-items:flex-start; }
.sec-faq__img{ flex:none; width:100%; height:150px; }
.sec-faq__cta-text{ gap:0; }
}
/* ==== css/sections/16-blog-posts.css ==== */
/* ==========================================================================
16 — Blog posts ("Articles.") light section, 1003.4px @1440
Measured from neiden.framer.media (dom.json): section padding 0 40px, wrapper padding 0 0 150px,
title 150/50 padding (subheading col 1, 100px h2 cols 2–3), 3 post cards 453×523.6 in a 1px-ruled
grid (image 350 + content 40/40/60), 40px "READ ALL POSTS" button row, "UPDATED WEEKLY" 30px from bottom.
========================================================================== */
.sec-blog-posts{
--bp-ease: cubic-bezier(.65,0,.35,1); /* hover layout (height / offsets) */
--bp-dur: .6s;
--bp-fade: .55s; /* hover fades (opacity / blur) */
position:relative; z-index:1; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:0 var(--page-pad);
background:var(--black-05); color:var(--black);
overflow:clip;
}
/* ---- 3 hairline columns ---- */
.sec-blog-posts__cols{
position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:0;
width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); justify-content:center; overflow:clip; pointer-events:none;
}
.sec-blog-posts__col{ position:relative; height:100%; overflow:clip; }
.sec-blog-posts__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-blog-posts__col--1::after{ border-left-width:1px; }
/* ---- Posts wrapper ---- */
.sec-blog-posts__wrap{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:0 0 150px;
}
/* ---- Corner fact ("UPDATED WEEKLY") — mix-blend difference like the source ---- */
.sec-blog-posts__facts{
position:absolute; top:0; left:0; z-index:0; width:100%; height:100%;
display:flex; align-items:center; justify-content:center; gap:10px;
overflow:clip; mix-blend-mode:difference; pointer-events:none;
}
.sec-blog-posts__fact{
position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:1;
display:flex; align-items:center; justify-content:center; gap:10px; overflow:clip; mix-blend-mode:difference;
}
.sec-blog-posts__fact p{ white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black); }
.sec-blog-posts__fact-dim{ color:var(--black-50); }
/* ---- Title row ---- */
.sec-blog-posts__title{
position:relative; z-index:1; width:100%;
display:flex; justify-content:space-between; align-items:flex-end; padding:150px 0 50px;
}
.sec-blog-posts__sub{
flex:1 0 0; min-width:0; align-self:stretch;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:30px;
}
.sec-blog-posts__tag{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); cursor:pointer; text-decoration:none; }
.sec-blog-posts__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-blog-posts__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-blog-posts__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-blog-posts__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
}
.sec-blog-posts__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-blog-posts__desc{ display:flex; flex-direction:column; width:100%; }
.sec-blog-posts__desc p{ width:100%; white-space:pre-wrap; text-align:left; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; color:var(--black-70); }
.sec-blog-posts__heading{ flex:2 0 0; min-width:0; display:flex; justify-content:space-between; align-items:flex-end; }
.sec-blog-posts__htext{ flex:1 0 0; min-width:0; display:flex; align-items:flex-start; gap:15px; overflow:clip; }
.sec-blog-posts__h2{ font-size:100px; font-weight:600; line-height:.8; letter-spacing:-.08em; color:var(--black); white-space:pre; }
.sec-blog-posts__h2-in{ display:inline-block; }
/* ---- Posts (1px ruled box) ---- */
.sec-blog-posts__posts{
position:relative; z-index:1; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
padding:1px 0 0 1px; overflow:clip;
}
.sec-blog-posts__posts::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; border-bottom-width:1px; pointer-events:none; }
.sec-blog-posts__grid{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:min-content; justify-content:center; gap:0;
}
/* diagonal cut on the first image: 63×63 triangle in the section colour (source: rotated svg) */
.sec-blog-posts__corner{
position:absolute; top:0; left:0; z-index:3; width:63px; height:63px; pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 63'%3E%3Cpath d='M0 0H63L0 63Z' fill='%23f2f2f2'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}
/* ---- Card ---- */
.sec-blog-posts__card{
position:relative; display:flex; align-items:flex-start; justify-content:flex-start; gap:10px;
width:100%; min-width:0; color:var(--black); cursor:pointer; text-decoration:none;
}
.sec-blog-posts__post{ position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; overflow:hidden; }
.sec-blog-posts__media{ position:relative; display:flex; align-items:flex-start; gap:10px; width:100%; }
.sec-blog-posts__imgbox{
position:relative; z-index:2; flex:1 0 0; min-width:0; height:350px; overflow:hidden;
display:flex; align-items:flex-start; justify-content:center;
transition:height var(--bp-dur) var(--bp-ease);
}
.sec-blog-posts__img{ position:absolute; z-index:1; top:calc(50% - 175px); left:0; width:100%; height:350px; overflow:hidden; }
.sec-blog-posts__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-blog-posts__content{
position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
width:100%; padding:40px 40px 60px; border-radius:10px; overflow:hidden;
}
.sec-blog-posts__inner{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; }
/* meta row is absolutely placed (like the hover variant) and the 32px it occupies is padding that collapses on hover */
.sec-blog-posts__main{
position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; width:100%; padding-top:32px;
transition:padding-top var(--bp-dur) var(--bp-ease);
}
.sec-blog-posts__meta{
position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; gap:10px; width:100%; height:12px;
transition:top var(--bp-dur) var(--bp-ease), opacity var(--bp-fade) var(--bp-ease), filter var(--bp-fade) var(--bp-ease);
}
.sec-blog-posts__date,.sec-blog-posts__read{ white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; }
.sec-blog-posts__date{ color:var(--black-50); }
.sec-blog-posts__read{ color:var(--black); }
.sec-blog-posts__dot{ display:block; flex:none; width:4px; height:4px; border-radius:7px; background:var(--black-30); }
.sec-blog-posts__ttl{ display:flex; align-items:flex-start; gap:10px; width:70%; overflow:hidden; }
.sec-blog-posts__ttl p{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:100%; overflow:clip;
white-space:pre-line; word-break:break-word; overflow-wrap:break-word;
font-size:16px; font-weight:700; line-height:1.3; letter-spacing:-.05em; color:var(--black);
}
.sec-blog-posts__more-wrap{ display:grid; grid-template-rows:0fr; width:100%; padding-top:0; transition:grid-template-rows var(--bp-dur) var(--bp-ease), padding-top var(--bp-dur) var(--bp-ease); }
.sec-blog-posts__more{
position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; min-height:0;
opacity:0; filter:blur(8px);
transition:opacity var(--bp-fade) var(--bp-ease), filter var(--bp-fade) var(--bp-ease);
}
.sec-blog-posts__excerpt{ display:flex; flex-direction:column; align-items:flex-start; gap:70px; width:100%; overflow:hidden; }
.sec-blog-posts__excerpt p{ width:100%; white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; text-align:left; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; color:var(--black-70); }
.sec-blog-posts__author{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.sec-blog-posts__by{ display:flex; align-items:center; gap:10px; }
.sec-blog-posts__avatar{ position:relative; flex:none; width:40px; height:40px; aspect-ratio:1; border-radius:25px; overflow:hidden; }
.sec-blog-posts__avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.sec-blog-posts__who{ display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; }
.sec-blog-posts__kind{ display:flex; align-items:center; justify-content:center; gap:3px; }
.sec-blog-posts__kind p{ white-space:pre; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.04em; color:var(--black); }
.sec-blog-posts__kind-dim{ color:var(--black-50) !important; }
.sec-blog-posts__name{ white-space:pre; font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; color:var(--black); }
/* hover: image box collapses to 247px, meta fades/blurs out (and sits 20px above the title), excerpt + author fade in */
.sec-blog-posts__card:hover .sec-blog-posts__imgbox{ height:247px; }
.sec-blog-posts__card:hover .sec-blog-posts__main{ padding-top:0; }
.sec-blog-posts__card:hover .sec-blog-posts__meta{
top:-20px; opacity:0; filter:blur(7px);
transition:top var(--bp-dur) var(--bp-ease), opacity .5s var(--bp-ease) .1s, filter .5s var(--bp-ease) .1s;
}
.sec-blog-posts__card:hover .sec-blog-posts__more-wrap{ grid-template-rows:1fr; padding-top:20px; }
.sec-blog-posts__card:hover .sec-blog-posts__more{
z-index:1; opacity:1; filter:blur(0);
transition:opacity .5s var(--bp-ease) .1s, filter .5s var(--bp-ease) .1s;
}
/* ---- Button row ---- */
.sec-blog-posts__cta-row{
position:relative; z-index:1; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center; gap:0;
}
.sec-blog-posts__cta-row::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-bottom-width:1px; pointer-events:none; }
.sec-blog-posts__spacer{ position:relative; height:100%; overflow:clip; }
.sec-blog-posts__spacer::after{ content:""; position:absolute; inset:0; border:0 solid rgba(255,255,255,.15); border-right-width:1px; pointer-events:none; }
.sec-blog-posts__cta{
position:relative; display:flex; align-items:center; justify-content:space-between;
width:100%; height:40px; overflow:clip; cursor:pointer;
}
.sec-blog-posts__btn{
position:relative; display:flex; flex:1 0 0; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:10px;
height:60px; background:var(--black); color:var(--white); text-decoration:none;
transition:background-color .74s cubic-bezier(.25,.5,.24,1); /* leave: measured on the live site (slow spring, ~0.6s) */
}
.sec-blog-posts__btn-label{
position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
height:12px; overflow:clip; pointer-events:none; user-select:none;
}
.sec-blog-posts__btn-label p{ white-space:pre; font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); }
.sec-blog-posts__w{ white-space:nowrap; }
.sec-blog-posts__ch{ display:inline-block; will-change:transform; }
.sec-blog-posts__plus{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; aspect-ratio:1; pointer-events:none; user-select:none;
background:var(--white);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 7.5 0 L 7.5 15 M 15 7.5 L 0 7.5' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(4.5 4.5)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 7.5 0 L 7.5 15 M 15 7.5 L 0 7.5' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(4.5 4.5)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
transition:transform .51s cubic-bezier(.3,.86,.33,1); /* leave: live spring ω≈15 */
}
/* hover (curves fitted to rAF samples of the live site): black → red in ~0.44s (exponential-like),
plus spins -180° (counter-clockwise) with a ~0.5s spring, letters jump 15px up out of the clipped label
and drop back in one by one (30ms stagger, 120ms ease). On leave they jump 15px down and rise back in. */
.sec-blog-posts__cta:hover .sec-blog-posts__btn{ background:var(--red); transition:background-color .44s cubic-bezier(.2,.98,.49,1); }
.sec-blog-posts__cta:hover .sec-blog-posts__plus{ transform:rotate(-180deg); transition:transform .48s cubic-bezier(.29,.66,.25,1); }
@keyframes sec-blog-posts-ch-in{ from{ transform:translateY(-15px); } to{ transform:translateY(0); } }
@keyframes sec-blog-posts-ch-out{ from{ transform:translateY(15px); } to{ transform:translateY(0); } }
.sec-blog-posts__cta--in .sec-blog-posts__ch{ animation:sec-blog-posts-ch-in .12s ease both; animation-delay:calc(45ms + var(--i) * 30ms); }
.sec-blog-posts__cta--out .sec-blog-posts__ch{ animation:sec-blog-posts-ch-out .12s ease both; animation-delay:calc(var(--i) * 30ms); }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-blog-posts{ padding:0; }
.sec-blog-posts__cols{ padding:0; }
.sec-blog-posts__wrap{ padding:0 0 200px; }
.sec-blog-posts__title{ align-items:center; padding:200px 0 100px; }
.sec-blog-posts__sub{ gap:40px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-blog-posts__wrap{ padding:0 0 120px; }
.sec-blog-posts__title{ align-items:flex-start; padding:100px 0 50px; }
.sec-blog-posts__sub{ align-self:auto; gap:30px; }
.sec-blog-posts__heading{ flex:1 0 0; }
}
@media (max-width:809.98px){
.sec-blog-posts__wrap{ padding:0; }
.sec-blog-posts__title{ flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:20px; padding:100px 0 50px; }
.sec-blog-posts__sub,.sec-blog-posts__heading{ flex:none; width:100%; align-self:auto; gap:20px; }
.sec-blog-posts__h2{ font-size:60px; }
.sec-blog-posts__posts{ padding:1px 1px 30px; }
.sec-blog-posts__grid{ grid-template-columns:minmax(50px,1fr); }
.sec-blog-posts__cta-row{ grid-template-columns:1fr; }
.sec-blog-posts__spacer{ display:none; }
.sec-blog-posts__cols{ grid-template-columns:1fr; }
.sec-blog-posts__col--2,.sec-blog-posts__col--3{ display:none; }
}
/* ==== css/sections/17-subscribe.css ==== */
/* ==========================================================================
17 — Subscribe section (white, 410px, 3 columns)
Measured on neiden.framer.media at 1440×900 (breakpoint 1200–1619).
col 1: label (14) + 30 + h3 (63) + 30 + 2 lines (44.8), padding 100/100, centered → top 14.1
col 2: "ENTER YOUR EMAIL" (12) + 20 + input row (60) = 92, centered → top 159
col 3: consent text 2×18.2, padding 30 0 0 50, centered → top 171.8
========================================================================== */
.sec-subscribe{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr);
justify-content:center; gap:0;
width:100%; max-width:var(--container-max); margin:0 auto; height:410px; padding:0 var(--page-pad);
overflow:clip; color:var(--black); font-family:var(--font-sans);
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-subscribe{ max-width:none; } }
/* ---- hairline column grid (behind everything) ---- */
.sec-subscribe__cols{
position:absolute; inset:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%;
padding:0 var(--page-pad); pointer-events:none; overflow:clip;
}
.sec-subscribe__col{ position:relative; height:100%; }
.sec-subscribe__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-subscribe__col--1::after{ border-left-width:1px; }
/* ---- Column 1: title block ---- */
.sec-subscribe__title{
position:relative; z-index:1; align-self:center; justify-self:start; width:100%;
display:flex; flex-direction:column; align-items:flex-start; gap:30px; padding:100px 0;
}
.sec-subscribe__counter{ display:flex; align-items:center; gap:15px; width:100%; height:14px; }
.sec-subscribe__icons{ display:flex; align-items:center; flex:none; width:40px; height:14px; color:var(--red); }
.sec-subscribe__icon{ display:block; height:14px; flex:none; overflow:visible; image-rendering:pixelated; }
.sec-subscribe__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-subscribe__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; /* live label preset: cv + ss07 */
}
.sec-subscribe__label-part--btn{ cursor:pointer; }
.sec-subscribe__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-subscribe__heading{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:100%; }
.sec-subscribe__h{
width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:70px; font-weight:600; line-height:.9em; letter-spacing:-.06em; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; /* live h3 preset: cv + ss07 */
}
.sec-subscribe__h-word{ display:inline-block; }
.sec-subscribe__desc{ width:100%; word-break:break-word; }
.sec-subscribe__desc p{ margin:0; white-space:pre-wrap; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; text-align:left; color:var(--black-70); }
/* ---- Column 2: form ---- */
.sec-subscribe__rss{
position:relative; z-index:1; align-self:start; width:100%; height:100%;
display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px;
}
.sec-subscribe__form-wrap{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:20px; overflow:clip; }
.sec-subscribe__field-label{
white-space:pre; margin:0;
font-size:12px; font-weight:600; line-height:1em; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; /* live 12px label preset: cv + ss07 */
}
.sec-subscribe__form{ position:relative; display:flex; align-items:flex-start; gap:0; width:100%; overflow:hidden; }
.sec-subscribe__field{ display:flex; align-items:flex-start; gap:10px; flex:1 0 0; width:1px; min-width:0; }
.sec-subscribe__input-wrap{
position:relative; display:flex; align-items:center; flex:1 0 0; width:1px; height:60px;
padding:12px 12px 12px 30px; background:var(--grey-f2); overflow:hidden;
transition:background .3s cubic-bezier(.44,0,.56,1), box-shadow .3s cubic-bezier(.44,0,.56,1);
}
.sec-subscribe__input-wrap::after{
content:""; position:absolute; inset:0; pointer-events:none; box-sizing:border-box;
border:0 solid var(--red);
transition:border-color .3s cubic-bezier(.44,0,.56,1), border-width .3s cubic-bezier(.44,0,.56,1);
}
.sec-subscribe__input-wrap:focus-within::after{ border-width:1px; }
.sec-subscribe__input{
flex:1 1 0; width:auto; min-width:0; height:100%; margin:0; padding:0; border:0; outline:none; background:none;
font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:1.2em; letter-spacing:-.04em; color:var(--black);
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
font-feature-settings:normal; /* live input: --framer-input-font-open-type-features unset → normal */
}
.sec-subscribe__input::placeholder{ color:var(--black-20); opacity:1; }
.sec-subscribe__submit{
position:relative; z-index:1; flex:none; display:flex; justify-content:center; align-items:center;
width:60px; height:60px; margin:0; padding:0; border:0; border-radius:0;
background:var(--black); color:var(--white); cursor:pointer;
}
.sec-subscribe__submit-icon{
display:flex; justify-content:center; align-items:center; width:18px; height:18px;
transition:transform .25s cubic-bezier(.44,0,.56,1); will-change:transform; /* live: ~250ms ease-in-out (rAF-sampled 0→45deg in 250ms, back in 250ms) */
}
.sec-subscribe__submit-icon svg{ display:block; width:18px; height:18px; overflow:hidden; }
.sec-subscribe__submit:hover .sec-subscribe__submit-icon{ transform:rotate(45deg); }
/* ---- Column 3: consent ---- */
.sec-subscribe__copy{
position:relative; z-index:1; align-self:center; justify-self:start; width:100%;
display:flex; align-items:center; gap:10px; padding:30px 0 0 50px; overflow:clip;
}
.sec-subscribe__copy-text{ display:flex; flex-direction:column; }
.sec-subscribe__copy-text p{ margin:0; white-space:pre; font-size:13px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; color:var(--black-50); }
.sec-subscribe__copy-text a{
color:var(--black-90); text-decoration:underline; text-decoration-color:var(--black-20);
text-underline-offset:.16em; text-decoration-thickness:.05em;
transition:color .4s cubic-bezier(.44,0,.56,1), text-decoration-color .4s cubic-bezier(.44,0,.56,1), text-decoration-thickness .4s cubic-bezier(.44,0,.56,1), text-underline-offset .4s cubic-bezier(.44,0,.56,1);
}
.sec-subscribe__copy-text a:hover{ color:var(--red); }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-subscribe{ height:auto; padding:0; }
.sec-subscribe__cols{ padding:0; }
}
@media (max-width:1199.98px){
.sec-subscribe{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; height:auto; padding:100px 40px; }
.sec-subscribe__cols{ display:none; }
.sec-subscribe__title{ gap:50px; } /* live keeps padding:100px 0 and gap 50 at 810–1199 */
.sec-subscribe__rss{ height:auto; }
.sec-subscribe__copy{ padding:0; }
.sec-subscribe__h{ font-size:60px; }
.sec-subscribe__desc p{ font-size:15px; }
}
@media (max-width:809.98px){
.sec-subscribe{ padding:20px 20px 100px; }
.sec-subscribe__title{ gap:20px; padding:100px 0 0; }
}
/* ==== css/sections/18-contact-form.css ==== */
/* ==========================================================================
18 — Contact form (dark panel rgba(0,0,0,.9) + silk shader, 3-col hairline grid)
Measured at 1440: section 871.7px = title row 248.8 (pad-top 150) + width block 622.9 (pad 100/80)
========================================================================== */
.sec-contact-form{
position:relative; z-index:1; width:100%; overflow:clip;
color:var(--white);
font-family:var(--font-sans);
}
/* ---- shader + grid (absolute, z 0, painted above the static panel background) ---- */
.sec-contact-form__shader{ position:absolute; top:0; left:0; width:100%; height:90%; z-index:0; opacity:.33; pointer-events:none; overflow:hidden; }
.sec-contact-form__canvas{ display:block; width:100%; height:100%; }
.sec-contact-form__grid{
position:absolute; top:0; bottom:0; left:0; right:0; z-index:0; margin:0 auto;
width:100%; max-width:var(--container-max); padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); pointer-events:none; overflow:clip;
}
.sec-contact-form__gcol{ position:relative; box-shadow:inset -1px 0 0 var(--line-dark); }
.sec-contact-form__gcol--1{ box-shadow:inset 1px 0 0 var(--line-dark), inset -1px 0 0 var(--line-dark); }
/* ---- panel (static so its background paints under the z-0 shader/grid; z-1 children paint above) ---- */
.sec-contact-form__contacts{
display:flex; flex-direction:column; align-items:center; width:100%;
padding:0 var(--page-pad); background:var(--black-90); overflow:clip;
}
/* ---- Title row: 1/3 intro | 2/3 heading, pad-top 150, align center ---- */
.sec-contact-form__title{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:flex; justify-content:space-between; align-items:center; padding:150px 0 0;
}
.sec-contact-form__intro{ flex:1 0 0; width:1px; display:flex; flex-direction:column; align-items:flex-start; gap:40px; align-self:stretch; }
.sec-contact-form__tag{ display:flex; align-items:center; gap:15px; height:14px; width:max-content; }
.sec-contact-form__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-contact-form__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-contact-form__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-contact-form__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--white);
}
.sec-contact-form__label-part--jp{ font-weight:500; color:var(--white-30); }
.sec-contact-form__desc{ display:flex; flex-direction:column; width:100%; }
.sec-contact-form__desc p{ font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; color:var(--white-30); white-space:pre-wrap; }
.sec-contact-form__head{ flex:2 0 0; width:1px; display:flex; justify-content:space-between; align-items:flex-end; }
.sec-contact-form__h2{
font-size:100px; font-weight:600; line-height:.8; letter-spacing:-.08em; color:var(--white); white-space:pre;
}
.sec-contact-form__word{ display:inline-block; will-change:transform,opacity; }
/* "PROJECTS FOR MAY |||| 3 LEFT" */
.sec-contact-form__left3{ display:flex; align-items:center; gap:10px; height:12px; }
.sec-contact-form__left3-txt{ display:flex; align-items:center; gap:3px; }
.sec-contact-form__left3-num{ display:flex; align-items:center; gap:4px; }
.sec-contact-form__left3-p{ font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); white-space:pre; }
.sec-contact-form__left3-p--n{ letter-spacing:0; }
.sec-contact-form__dim50{ color:var(--white-50); }
.sec-contact-form__dim30{ color:var(--white-30); }
.sec-contact-form__bars{ display:flex; align-items:center; gap:3px; height:12px; overflow:clip; }
.sec-contact-form__bar{ display:block; width:3px; height:12px; background:var(--white-50); }
.sec-contact-form__bar--red{ background:var(--red); }
.sec-contact-form__bar--light{ animation:sec-contact-form-blink 2s linear infinite; }
@keyframes sec-contact-form-blink{
0%{ background:var(--red); }
2.5%{ background:rgba(245,155,160,.827); }
7.5%{ background:rgba(252,224,225,.62); }
12.5%{ background:rgba(254,246,246,.537); }
25%,50%{ background:var(--white-50); }
50.01%,100%{ background:transparent; }
}
/* ---- Width block: 3-col grid, pad 100/80; col 1 = info, cols 2-3 = form ---- */
.sec-contact-form__width{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); padding:100px 0 80px; overflow:clip;
}
.sec-contact-form__info{ display:flex; flex-direction:column; align-items:flex-start; gap:60px; width:100%; }
.sec-contact-form__block{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; width:100%; }
.sec-contact-form__small{ font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); white-space:pre; }
.sec-contact-form__small--dim{ color:var(--white-30); }
.sec-contact-form__links{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.sec-contact-form__phone{ display:flex; align-items:center; height:45px; width:max-content; overflow:clip; }
.sec-contact-form__phone-txt{
display:block; font-size:30px; font-weight:500; line-height:45px; letter-spacing:-.04em; color:var(--white); white-space:pre;
} /* live: colour flips instantly on hover (measured <1 frame) */
.sec-contact-form__phone:hover .sec-contact-form__phone-txt{ color:var(--red); }
.sec-contact-form__mail{ display:block; position:relative; height:30px; width:max-content; overflow:clip; }
.sec-contact-form__mail-stack{ display:block; position:relative; will-change:transform; } /* hover slide driven by JS spring(.35,.2) */
.sec-contact-form__mail-txt{ display:block; font-size:20px; font-weight:500; line-height:30px; letter-spacing:-.04em; color:var(--white); white-space:pre; }
.sec-contact-form__mail-txt--alt{ position:absolute; top:-29px; left:0; opacity:0; }
.sec-contact-form__address{ width:100%; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.04em; color:var(--white-30); white-space:pre-wrap; }
.sec-contact-form__social{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:100%; }
.sec-contact-form__socials{ display:flex; align-items:center; gap:20px; height:21px; }
.sec-contact-form__soc{ display:flex; align-items:center; justify-content:center; width:21px; height:21px; color:var(--white); }
.sec-contact-form__soc svg{ display:block; width:21px; height:21px; overflow:visible; transition:color .5s cubic-bezier(.25,.1,.25,1); will-change:transform; } /* scale 1→1.4 driven by JS spring(.6) */
.sec-contact-form__soc:hover svg{ color:rgb(235,24,93); }
.sec-contact-form__time{ display:flex; align-items:center; gap:5px; height:12px; }
/* ---- Form (cols 2-3) ---- */
.sec-contact-form__form{
grid-column:span 2; display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%; overflow:hidden;
}
.sec-contact-form__row{ display:flex; align-items:center; width:100%; }
.sec-contact-form__row .sec-contact-form__field{ flex:1 0 0; width:1px; }
.sec-contact-form__field{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; cursor:text; }
.sec-contact-form__field-head{ display:flex; justify-content:flex-end; align-items:center; width:100%; height:12px; overflow:hidden; }
.sec-contact-form__corner{ position:absolute; top:22px; right:0; z-index:3; width:12px; height:12px; color:var(--red); pointer-events:none; overflow:clip; }
.sec-contact-form__corner svg{ display:block; width:12px; height:12px; overflow:visible; }
.sec-contact-form__input-wrap{
position:relative; display:flex; align-items:center; width:100%; height:60px; padding:20px; overflow:hidden;
background:rgba(26,26,26,0);
}
.sec-contact-form__input-wrap::after{
content:""; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; box-sizing:border-box;
border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
transition:border-color .5s cubic-bezier(.44,0,.56,1);
}
.sec-contact-form__input-wrap:focus-within::after{ border-color:var(--red); }
.sec-contact-form__row .sec-contact-form__field:nth-child(2) .sec-contact-form__input-wrap::after{ transition-duration:.6s; } /* live: PHONE input uses a .6s focus transition, the others .5s */
.sec-contact-form__input-wrap--area{ height:100px; padding:0; }
.sec-contact-form__input{
flex:1; width:auto; min-width:0; height:20px; padding:0; margin:0; outline:none; border:0; background:transparent;
font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.2; letter-spacing:-.04em; color:var(--white);
border-radius:0; appearance:none; -webkit-appearance:none;
}
.sec-contact-form__input::placeholder{ color:var(--white-30); opacity:1; }
.sec-contact-form__input:-webkit-autofill{ -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 100px #191919 inset; }
.sec-contact-form__textarea{
display:block; width:100%; height:100px; min-height:100px; max-height:100px; padding:20px; resize:vertical; overflow-y:auto; white-space:break-spaces;
}
.sec-contact-form__textarea::-webkit-resizer{
background:url("data:image/svg+xml,") no-repeat;
}
/* bottom row: button + agreement | working times */
.sec-contact-form__bottom{ display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); width:100%; }
.sec-contact-form__submit-col{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%; }
.sec-contact-form__btn{
position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:60px; padding:0;
background:rgb(51,51,51); border-radius:10px; border:0; cursor:pointer; overflow:visible; text-align:center;
}
.sec-contact-form__btn-in{
position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%;
background:var(--white); transition:background-color .2s cubic-bezier(.44,0,.56,1);
}
.sec-contact-form__btn:hover .sec-contact-form__btn-in{ background:var(--red); }
.sec-contact-form__btn-txt{
display:block; height:12px; overflow:clip; white-space:pre;
font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
}
.sec-contact-form__btn-txt--2{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--white); visibility:hidden; }
.sec-contact-form__btn:hover .sec-contact-form__btn-txt--1{ visibility:hidden; }
.sec-contact-form__btn:hover .sec-contact-form__btn-txt--2{ visibility:visible; }
.sec-contact-form__btn-w{ white-space:nowrap; }
.sec-contact-form__btn-txt i{ display:inline-block; font-style:normal; will-change:transform; } /* per-letter slide (hover in: -15→0, hover out: 15→0) is a JS spring(.12) with .03s stagger */
.sec-contact-form__btn-plus{
position:absolute; top:20px; right:20px; width:20px; height:20px; color:var(--black); pointer-events:none;
transition:transform .2s cubic-bezier(.44,0,.56,1), color .2s cubic-bezier(.44,0,.56,1);
}
.sec-contact-form__btn:hover .sec-contact-form__btn-plus{ transform:rotate(-180deg); color:var(--white); }
.sec-contact-form__agree{ font-size:13px; font-weight:500; line-height:1.3; letter-spacing:-.04em; color:var(--white-30); white-space:pre; }
.sec-contact-form__agree a{ color:var(--white); transition:color .4s cubic-bezier(.44,0,.56,1); }
.sec-contact-form__agree a:hover{ color:var(--red); }
.sec-contact-form__hours{ display:flex; align-items:flex-start; gap:7px; width:100%; padding:10px 50px 0; align-self:start; }
.sec-contact-form__hours-in{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.sec-contact-form__hours-txt{ font-size:12px; font-weight:500; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); white-space:pre; }
/* ---- responsive (secondary) ---- */
@media (max-width:1199.98px){
.sec-contact-form__h2{ font-size:80px; }
}
@media (max-width:809.98px){
.sec-contact-form__title{ flex-direction:column; align-items:flex-start; gap:60px; padding-top:100px; }
.sec-contact-form__intro,.sec-contact-form__head{ flex:none; width:100%; }
.sec-contact-form__head{ flex-direction:column; align-items:flex-start; gap:40px; }
.sec-contact-form__h2{ font-size:60px; }
.sec-contact-form__width{ grid-template-columns:1fr; gap:80px; padding:80px 0 60px; }
.sec-contact-form__form{ grid-column:auto; }
.sec-contact-form__row{ flex-direction:column; gap:20px; }
.sec-contact-form__row .sec-contact-form__field{ flex:none; width:100%; }
.sec-contact-form__bottom{ grid-template-columns:1fr; gap:40px; }
.sec-contact-form__hours{ padding:0; }
.sec-contact-form__grid{ grid-template-columns:1fr; }
.sec-contact-form__gcol:not(.sec-contact-form__gcol--1){ display:none; }
}
/* ==== css/sections/19-footer.css ==== */
/* ==========================================================================
19 — Footer ("Desktop" variant, framer-anvll) — measured on neiden.framer.media at 1440×900 (1200–1619 breakpoint)
Section = top grid 326.36 + 1px gap + copyright row 70.59 = 397.95px ≈ 398px
Background rgba(0,0,0,.9); 1px rgba(255,255,255,.1) rule on top; 3 hairline columns (x = 40 / 493 / 946 / 1399)
========================================================================== */
.sec-footer{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%;
background:var(--black-90);
color:var(--white);
font-family:var(--font-sans);
overflow:hidden;
}
/* Framer "[border]" → pseudo element: 1px top rule, rgba(255,255,255,.1) */
.sec-footer::after{ content:""; position:absolute; inset:0; border-top:1px solid var(--line-dark); pointer-events:none; z-index:1; }
/* ---- Lined grid (absolute, behind everything) ---- */
.sec-footer__cols{
position:absolute; top:0; left:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr);
width:100%; height:100%; padding:0 var(--page-pad);
pointer-events:none; overflow:clip;
}
.sec-footer__col{ position:relative; height:100%; overflow:clip; }
.sec-footer__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-dark); border-right-width:1px; pointer-events:none; }
.sec-footer__col--1::after{ border-left-width:1px; }
/* ---- Width wrapper: column, 1px gap between the grid and the copyright row ---- */
.sec-footer__width{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px;
width:100%; padding:0 var(--page-pad); overflow:hidden;
}
/* ==========================================================================
Top grid: nav (col 1) + brand (cols 2–3)
========================================================================== */
.sec-footer__grid{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr);
justify-content:center; width:100%;
}
/* the grid carries a 1px rgba(0,0,0,.1) top border in the source (near-invisible on the dark ground) */
.sec-footer__grid::after{ content:""; position:absolute; inset:0; border-top:1px solid var(--black-10); pointer-events:none; }
/* ---- Navigation column ---- */
.sec-footer__navcol{
position:relative; display:flex; flex-direction:row; align-items:flex-end; justify-content:center; gap:30px;
width:100%; height:100%; padding:0 0 40px;
}
.sec-footer__navwrap{ position:relative; flex:1 0 0; width:1px; display:flex; align-items:flex-start; justify-content:center; }
.sec-footer__nav{
position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:25px;
width:100%; margin:0; padding:0; list-style:none; cursor:pointer;
}
.sec-footer__nav-head{ display:flex; align-items:center; gap:10px; width:min-content; }
.sec-footer__nav-label{
white-space:pre; margin:0;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white-30);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-footer__nav-list{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; align-self:stretch; }
.sec-footer__nav-item{ display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:5px 0; }
.sec-footer__link{
position:relative; display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:5px;
width:min-content; cursor:pointer; text-decoration:none; color:var(--white);
}
.sec-footer__link-clip{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
width:min-content; height:min-content; overflow:clip;
}
.sec-footer__link-txt{
position:relative; display:block; white-space:pre;
font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
transform:translateY(0); will-change:transform;
/* Framer layout spring measured on the live site (48% @90ms, 100% @218ms, 1.5% overshoot peaking @250ms, settled @420ms):
cubic-bezier(.4,.7,.2,1.1) over .34s fits the samples within 0.15px */
transition:transform .34s cubic-bezier(.4,.7,.2,1.1);
}
/* hidden duplicate parked 14px above the clip box; on hover both copies slide down 14px (letter-slide swap).
The parked copy is black at rest (rgb(0,0,0) in the source variant), turns white the instant the hover variant applies,
and fades back to black over .2s (linear) while it slides out on leave — measured on the live site. */
.sec-footer__link-txt--hover{ position:absolute; top:-14px; left:0; z-index:1; color:var(--black); transition:transform .34s cubic-bezier(.4,.7,.2,1.1), color .2s linear; }
.sec-footer__link:hover .sec-footer__link-txt{ transform:translateY(14px); }
.sec-footer__link:hover .sec-footer__link-txt--hover{ color:var(--white); transition:transform .34s cubic-bezier(.4,.7,.2,1.1), color 0s; }
.sec-footer__link-count{
position:relative; z-index:1; display:block; white-space:pre;
font-size:12px; font-weight:600; line-height:13.2px; letter-spacing:-.06em; color:var(--red);
}
/* ---- Brand block (cols 2–3): wordmark + script + EST ---- */
.sec-footer__brand{
position:relative; grid-column:span 2; place-self:start;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px;
width:100%; padding:80px 0 0;
}
/* Framer fit-text: the p is laid out at 350.19px inside a 999.51×280 viewBox, the SVG scales it to 97% of the block */
.sec-footer__wordmark{
position:relative; z-index:2; display:block; flex:none;
width:97%; height:auto; overflow:hidden;
}
.sec-footer__wordmark-fo{ overflow:visible; transform-origin:center center; }
.sec-footer__wordmark-text{
margin:0; text-align:left; white-space:pre; word-break:break-word;
font-family:"'Cal Sans'",var(--font-display); font-weight:400; font-size:350.1891021151422px; line-height:.8em; letter-spacing:-.05em;
color:var(--white);
}
.sec-footer__script-wrap{
position:absolute; right:0; bottom:0; z-index:2;
display:flex; align-items:center; justify-content:center; gap:10px; width:min-content;
}
.sec-footer__script{
position:relative; z-index:1; margin:0; white-space:pre;
font-family:var(--font-script); font-weight:400; font-size:80px; line-height:72px; letter-spacing:0; color:var(--red);
}
.sec-footer__script .split-word{ display:inline; white-space:nowrap; }
.sec-footer__script .split-char{ display:inline-block; }
.sec-footer__est{
position:absolute; top:91px; right:80px; z-index:2; margin:0; white-space:pre;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white-30);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-footer__est-strong{ color:var(--white); }
/* ==========================================================================
Copyright row
========================================================================== */
.sec-footer__copyright{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr);
justify-content:center; width:100%; max-width:var(--container-max); padding:10px 0 20px;
}
/* col 1 — Created by */
.sec-footer__created-col{ position:relative; place-self:start; display:flex; align-items:center; gap:10px; width:100%; height:100%; }
.sec-footer__created{ position:relative; display:flex; align-items:flex-start; justify-content:center; gap:20px; width:min-content; overflow:clip; }
.sec-footer__avatar{ position:relative; flex:none; width:36px; height:36px; border-radius:50px; overflow:hidden; }
.sec-footer__avatar img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; }
.sec-footer__created-details{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; width:min-content; }
.sec-footer__created-title{ margin:0; white-space:pre; font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; color:var(--white); font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-footer__created-line{ display:flex; align-items:center; gap:3px; margin:0; white-space:pre; }
.sec-footer__created-dim{ display:block; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.04em; color:var(--white-50); }
.sec-footer__created-strong{ display:block; font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; color:var(--white); font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
/* col 2 — rights + Built in Framer */
.sec-footer__rights-col{ position:relative; place-self:center start; display:flex; align-items:center; gap:10px; width:100%; }
.sec-footer__rights{ position:relative; display:flex; align-items:flex-start; gap:10px; width:min-content; overflow:hidden; }
.sec-footer__rights-text{ display:flex; align-items:center; gap:5px; margin:0; white-space:pre; font-size:14px; line-height:1.5; letter-spacing:-.04em; }
.sec-footer__rights-dim{ display:block; font-weight:400; color:var(--white-30); }
.sec-footer__rights-strong{ display:block; font-weight:700; color:var(--white); }
.sec-footer__framer{ display:flex; align-items:center; gap:6px; height:24px; margin:0; overflow:hidden; white-space:pre; font-size:14px; line-height:1.5; font-weight:700; letter-spacing:-.04em; color:var(--white); }
.sec-footer__framer strong{ font-weight:700; }
.sec-footer__framer-ico{ display:flex; align-items:center; justify-content:center; flex:none; width:24px; height:24px; border-radius:6px; background:var(--black); color:var(--white); mix-blend-mode:difference; aspect-ratio:1/1; }
.sec-footer__framer-ico svg{ display:block; width:8px; height:12px; overflow:visible; }
/* col 3 — legal links */
.sec-footer__legal-col{ position:relative; place-self:center start; display:flex; align-items:center; justify-content:flex-end; gap:25px; width:100%; height:24px; }
.sec-footer__legal{ margin:0; white-space:pre; font-size:12px; font-weight:500; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white-30); font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-footer__legal a{ color:var(--white-30); text-decoration:none; transition:color .4s cubic-bezier(.44,0,.56,1); }
.sec-footer__legal a:hover{ color:var(--red); }
.sec-footer__legal-sep{ display:block; flex:none; width:1px; height:17px; background:var(--white-20); }
/* OpenType features per Framer text preset (css_rules): the 12px label presets (nav links, NAVIGATION, EST, legal) and the 14px/600
preset (Сreated / Forde®) carry "ss07" on — set above; the 14px/400, 14px/700, "15" counter and script presets omit it (DM Sans digits differ) */
.sec-footer__link-count,.sec-footer__rights-text,.sec-footer__framer,.sec-footer__created-dim,.sec-footer__script{
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on;
}
/* ==========================================================================
Responsive (secondary)
========================================================================== */
@media (min-width:1620px){
.sec-footer__width{ max-width:var(--container-max); padding:0; }
.sec-footer__cols{ left:50%; transform:translateX(-50%); max-width:var(--container-max); padding:0; }
.sec-footer__brand{ padding-top:100px; }
.sec-footer__est{ top:131px; right:190px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-footer__cols,.sec-footer__grid,.sec-footer__copyright{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-footer__col--3{ display:none; }
.sec-footer__width{ gap:0; overflow:visible; }
.sec-footer__grid{ gap:1px; }
.sec-footer__brand{ grid-column:span 1; }
.sec-footer__est{ top:80px; right:60px; }
.sec-footer__legal-col{ grid-column:span 2; justify-content:flex-start; }
}
@media (max-width:809.98px){
.sec-footer__cols{ grid-template-columns:repeat(1,minmax(50px,1fr)); padding:0 20px; }
.sec-footer__col--2,.sec-footer__col--3{ display:none; }
.sec-footer__width{ overflow:visible; }
.sec-footer__grid{ grid-template-columns:repeat(1,minmax(50px,1fr)); grid-template-rows:repeat(1,min-content); grid-auto-rows:min-content; gap:1px; padding:80px 20px 40px; }
.sec-footer__brand{ grid-column:span 1; padding-top:0; }
.sec-footer__est{ top:-20px; right:3px; }
.sec-footer__script-wrap{ justify-content:flex-end; width:100%; bottom:-10px; }
.sec-footer__script{ font-size:44px; line-height:40px; }
.sec-footer__copyright{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:40px 20px 20px; }
.sec-footer__rights-col,.sec-footer__legal-col{ justify-content:center; place-self:auto; }
.sec-footer__rights{ flex-wrap:wrap; justify-content:center; }
}
/* ==== css/sections/20-about-title.css ==== */
/* ===== 20 — About us: page title (0 → 752.8px) — measured on neiden.framer.media/about-us at 1440×900 =====
section: padding-top 44px (header) · inner (white, z2): padding-top 300 · gap 150 · [wrapper 218.8] · [badge row 40]
wrapper: padding 0 40px, gap 40 → counter row 14 + title row 80 + lead row 44.8
3 hairline columns absolutely positioned behind (top 0 → bottom of the badge row). */
.sec-about-title{ position:relative; width:100%; padding-top:var(--header-h); overflow:clip; display:flex; justify-content:center; align-items:center; gap:10px; color:var(--black); font-family:var(--font-sans); }
.sec-about-title__inner{ position:relative; z-index:2; width:100%; background:var(--white); overflow:clip; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:150px; padding:300px 0 0; }
/* hairline columns */
.sec-about-title__cols{ position:absolute; top:0; left:0; z-index:0; width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad); display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); overflow:clip; pointer-events:none; }
@media (min-width:1620px){ .sec-about-title__cols{ left:calc(50% - min(var(--container-max),100%)/2); } }
.sec-about-title__col{ height:100%; border-right:1px solid var(--line-light); }
.sec-about-title__col:first-child{ border-left:1px solid var(--line-light); }
/* wrapper */
.sec-about-title__wrap{ position:relative; z-index:1; width:100%; padding:0 var(--page-pad); display:flex; flex-direction:column; align-items:flex-start; gap:40px; }
.sec-about-title__row{ position:relative; width:100%; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; }
.sec-about-title__spacer{ position:relative; min-height:14px; overflow:clip; }
/* counter label (same component as the home "Hello" counter) */
.sec-about-title__counter{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:14px; }
.sec-about-title__counter-box{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); will-change:transform,opacity; }
.sec-about-title__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-about-title__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-about-title__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-about-title__label-part{ display:block; white-space:pre; font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black); font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-about-title__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-about-title__label-part--link{ cursor:pointer; }
/* title */
.sec-about-title__title-wrap{ position:relative; grid-column:span 2; width:100%; }
.sec-about-title__title{ margin:0; color:var(--black); white-space:pre-wrap; word-break:break-word; }
.sec-about-title__word{ display:inline-block; will-change:transform,opacity; }
/* lead paragraph */
.sec-about-title__lead-wrap{ position:relative; grid-column:2; width:100%; will-change:transform,opacity; }
.sec-about-title__lead{ margin:0; color:var(--black-70); text-align:left; white-space:pre-wrap; word-break:break-word; }
/* badge row */
.sec-about-title__badge-row{ position:relative; z-index:1; width:100%; max-width:var(--container-max); padding:0 var(--page-pad); display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; overflow:clip; }
.sec-about-title__badge{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:40px; background:var(--grey-f2); }
.sec-about-title__badge-spacer{ height:25px; }
.sec-about-title__badge-text{ margin:0; white-space:pre; color:var(--black); }
/* ---- responsive (secondary) ---- */
@media (max-width:1199.98px){
.sec-about-title__inner{ gap:100px; padding:150px var(--page-pad) 0; }
.sec-about-title__wrap{ padding:0; gap:30px; }
.sec-about-title__row,.sec-about-title__cols,.sec-about-title__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-about-title__cols{ padding:0 var(--page-pad); }
.sec-about-title__col:nth-child(3),.sec-about-title__spacer,.sec-about-title__badge-spacer:nth-child(3){ display:none; }
.sec-about-title__counter{ grid-column:1; }
.sec-about-title__title-wrap{ grid-column:span 2; }
.sec-about-title__title{ font-size:80px; }
.sec-about-title__lead-wrap{ grid-column:span 2; }
.sec-about-title__badge-row{ padding:0; }
}
@media (max-width:809.98px){
.sec-about-title__inner{ gap:70px; padding:150px var(--page-pad) 0; }
.sec-about-title__row,.sec-about-title__cols,.sec-about-title__badge-row{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-about-title__col:nth-child(2),.sec-about-title__badge-spacer{ display:none; }
.sec-about-title__title-wrap{ grid-column:1; }
.sec-about-title__title{ font-size:60px; }
.sec-about-title__lead{ font-size:15px; }
}
/* ==== css/sections/21-about-hello.css ==== */
/* ==========================================================================
21 — About us: "Hello" block ("Neiden Studio started in 2019…")
Measured on neiden.framer.media/about-us at 1440×900 (breakpoint 1200–1619).
Block = 150px padding + [subtitle 14 + 50 + quote 275 + 50 + paragraphs 89.6] + 150px = 778.6px, bg #f2f2f2
========================================================================== */
.sec-about-hello{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:200px;
width:100%; padding:150px var(--page-pad);
background:var(--grey-f2); color:var(--black);
overflow:clip;
font-family:var(--font-sans);
}
/* ---- hairline column grid (behind everything) ---- */
.sec-about-hello__cols{
position:absolute; inset:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%;
padding:0 var(--page-pad); pointer-events:none;
}
.sec-about-hello__col{ position:relative; height:100%; }
.sec-about-hello__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-about-hello__col--1::after{ border-left-width:1px; }
/* ---- Hello wrapper / quote group ---- */
.sec-about-hello__wrap{
position:relative; z-index:2; width:100%;
display:flex; justify-content:center; align-items:center;
mix-blend-mode:multiply;
}
.sec-about-hello__quote{
position:relative; z-index:2; width:100%;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:50px;
background:var(--white);
mix-blend-mode:difference;
}
.sec-about-hello__spacer{ position:relative; height:1px; overflow:clip; }
.sec-about-hello__spacer--tall{ height:100%; }
/* ---- Subtitle label ---- */
.sec-about-hello__subtitle{
position:relative; z-index:2; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:14px;
justify-content:center; height:14px;
}
.sec-about-hello__label-wrap{ position:relative; width:100%; height:14px; align-self:start; }
.sec-about-hello__label-box{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); }
.sec-about-hello__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-about-hello__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-about-hello__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-about-hello__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-about-hello__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-about-hello__label-part--link{ cursor:pointer; }
/* ---- Big quote ---- */
.sec-about-hello__text{
position:relative; z-index:1; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr);
justify-content:center;
}
.sec-about-hello__title-wrap{ position:relative; grid-column:span 2; width:100%; align-self:start; }
.sec-about-hello__title{
display:block; margin:0; text-align:left;
font-family:var(--font-sans); font-size:50px; font-weight:700; line-height:55px; letter-spacing:-.05em;
color:var(--black);
}
.sec-about-hello__w{ display:inline; opacity:.08; }
.sec-about-hello__title.is-static .sec-about-hello__w{ opacity:1; }
/* ---- Images ---- */
.sec-about-hello__images{
position:absolute; top:50%; left:0; right:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:450px; justify-content:center;
transform:translateY(-50%); pointer-events:none;
}
.sec-about-hello__imgcell{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:450px; }
.sec-about-hello__imgcell--2{ min-height:0; height:315px; z-index:0; }
.sec-about-hello__img{ position:absolute; left:0; bottom:-60px; width:300px; height:370px; z-index:0; will-change:transform; }
.sec-about-hello__img-fill{ position:absolute; inset:0; }
.sec-about-hello__img-fill img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-about-hello__script{
position:absolute; right:-40px; bottom:-20px; z-index:1;
margin:0; white-space:pre;
font-family:var(--font-script); font-size:40px; font-weight:400; line-height:40px; letter-spacing:0;
color:var(--red);
}
/* ---- Two paragraphs ---- */
.sec-about-hello__author{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center;
}
.sec-about-hello__column{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:50px; width:100%; align-self:start; }
.sec-about-hello__column--1{ padding-right:40px; }
.sec-about-hello__column--2{ padding-right:50px; }
.sec-about-hello__para{ width:100%; white-space:pre-wrap; word-break:break-word; text-align:left; color:var(--black-70); }
/* ---- Facts (corner labels) ---- */
.sec-about-hello__facts{ position:absolute; top:.0381947%; left:0; width:100%; height:100%; z-index:1; overflow:clip; pointer-events:none; } /* top offset as on the live site (0.3px → labels at y 736.9) */
.sec-about-hello__fact{ position:absolute; bottom:30px; display:flex; align-items:center; justify-content:center; gap:10px; overflow:clip; mix-blend-mode:difference; z-index:1; }
.sec-about-hello__fact--l{ left:var(--page-pad); }
.sec-about-hello__fact--r{ right:var(--page-pad); }
.sec-about-hello__fact p{
white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-about-hello{ padding:200px 0; }
.sec-about-hello__wrap{ max-width:var(--container-max); }
.sec-about-hello__cols,.sec-about-hello__facts{ right:auto; left:50%; width:100%; max-width:var(--container-max); transform:translateX(-50%); }
.sec-about-hello__cols{ padding:0; }
.sec-about-hello__fact--l{ left:0; }
.sec-about-hello__fact--r{ right:0; }
.sec-about-hello__img{ width:370px; height:450px; bottom:-110px; }
.sec-about-hello__script{ right:-50px; bottom:-10px; }
.sec-about-hello__imgcell--2{ height:450px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-about-hello{ padding:100px 40px; }
.sec-about-hello__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-about-hello__col--3{ display:none; }
.sec-about-hello__subtitle,.sec-about-hello__text,.sec-about-hello__author{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-about-hello__title-wrap{ grid-column:auto; }
.sec-about-hello__column--1{ gap:40px; z-index:1; }
.sec-about-hello__column--2{ display:none; }
.sec-about-hello__images{ right:auto; width:100%; grid-template-rows:260px; }
.sec-about-hello__imgcell{ min-height:0; height:260px; }
.sec-about-hello__imgcell--3{ display:none; }
.sec-about-hello__img{ width:240px; height:300px; bottom:-57px; }
.sec-about-hello__title{ font-size:40px; line-height:44px; }
}
@media (max-width:809.98px){
.sec-about-hello{ padding:100px 20px; }
.sec-about-hello__cols{ grid-template-columns:1fr; padding:0 20px; }
.sec-about-hello__col--2,.sec-about-hello__col--3{ display:none; }
.sec-about-hello__quote{ gap:30px; }
.sec-about-hello__subtitle{ display:flex; flex-direction:column; align-items:flex-start; height:auto; }
.sec-about-hello__label-wrap{ width:auto; }
.sec-about-hello__text,.sec-about-hello__author{ display:flex; flex-direction:column; }
.sec-about-hello__spacer{ display:none; }
.sec-about-hello__images{ position:relative; top:auto; left:auto; right:auto; transform:none; display:flex; align-items:center; width:100%; }
.sec-about-hello__imgcell--2,.sec-about-hello__imgcell--3{ display:none; }
.sec-about-hello__imgcell--1{ min-height:0; height:382px; }
.sec-about-hello__img{ position:relative; bottom:auto; left:auto; width:100%; height:382px; }
.sec-about-hello__script{ right:auto; left:1px; bottom:-18px; }
.sec-about-hello__column--1,.sec-about-hello__column--2{ padding-right:0; gap:30px; align-items:center; }
.sec-about-hello__title{ font-size:30px; line-height:33px; }
.sec-about-hello__fact--l{ left:50%; bottom:20px; transform:translateX(-50%); }
.sec-about-hello__fact--r{ display:none; }
}
/* ==== css/sections/21b-about-info.css ==== */
/* ==========================================================================
21b — About us · short info (about-us page): "Life at Neiden" photo stack + facts,
"One Studio." features, "Our awards" list + logo ticker.
Measured on neiden.framer.media/about-us at 1440×900 (breakpoint 1200–1619):
photos grid 2050 (150 + 1500 + 400, facts card row absolute at 1760) ·
features 1699 (title 338.8 + 3×403.4 + 150) · awards 798 (150 + 498 + 150) = 4547px.
========================================================================== */
.sec-about-info{
position:relative; width:100%; display:flex; flex-direction:column; align-items:center;
background:var(--white); color:var(--black); font-family:var(--font-sans);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on;
}
/* ---- hairline columns of the parent "Content" grid (x 40 / 493 / 946 / 1400) ---- */
.sec-about-info__cols{
position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr));
padding:0 var(--page-pad); pointer-events:none;
}
.sec-about-info__col{ position:relative; height:100%; }
.sec-about-info__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-about-info__col--1::after{ border-left-width:1px; }
/* ---- shared: "[ ND® ‒ … / 日本語 ]" label ---- */
.sec-about-info__label{ display:flex; align-items:center; gap:15px; height:14px; }
.sec-about-info__marks{ display:flex; align-items:center; flex:none; width:40px; height:14px; }
.sec-about-info__marks svg{ display:block; flex:none; }
.sec-about-info__label-text{ display:flex; align-items:flex-end; gap:2px; height:14px; white-space:pre; }
.sec-about-info__label-item{ display:block; font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black); }
.sec-about-info__label-item--link{ cursor:pointer; }
.sec-about-info__label-item--dash{ position:relative; width:7.625px; color:transparent; }
.sec-about-info__label-item--dash::after{ content:""; position:absolute; left:0; width:8.5px; top:7px; height:2px; background:var(--black); }
.sec-about-info__label-item--jp{ font-weight:500; color:var(--black-40); }
/* live presets 1x9173r (14/600 labels, award names), 1l3oc22 (14/500 years, JP), h3n2e3 (fact titles/sub-lines) all carry "ss07" (measured: "26©" 25.6, "24©" 26.3, "+6 This Year" 73.6, "Since 2019" 66.9) */
.sec-about-info__label-item,
.sec-about-info__aw-name p,
.sec-about-info__aw-year,
.sec-about-info__ft-jp,
.sec-about-info__fact-title,
.sec-about-info__fact-sub p{ font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
/* ---- shared: heading block (label + h3 + lead), 244.8px ---- */
.sec-about-info__heading{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; width:100%; }
.sec-about-info__h3{ width:100%; font-size:70px; font-weight:600; line-height:63px; letter-spacing:-.06em; color:var(--black); white-space:pre-wrap; }
.sec-about-info__h3-group{ display:flex; flex-direction:column; width:100%; }
.sec-about-info__lead{ display:flex; flex-direction:column; width:100%; }
.sec-about-info__lead p,
.sec-about-info__ft-lead{ width:100%; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left; white-space:pre-wrap; }
.sec-about-info__ch-word{ display:inline-block; white-space:nowrap; }
.sec-about-info__lt,
.sec-about-info__ln,
.sec-about-info__wd{ display:inline-block; will-change:transform,opacity; }
/* ==========================================================================
A · Photos section
========================================================================== */
.sec-about-info__photos{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:1500px; justify-content:center;
padding:150px var(--page-pad) 400px; overflow:clip; will-change:transform,opacity;
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-about-info__photos{ max-width:none; } }
.sec-about-info__photos-col{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:1500px; overflow:clip; }
.sec-about-info__photos-col .sec-about-info__heading{ position:sticky; top:150px; }
.sec-about-info__images{ position:relative; grid-column:span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; height:1500px; overflow:clip; }
.sec-about-info__images-inner{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:100%; height:1500px; overflow:clip; }
.sec-about-info__img{ position:sticky; top:150px; width:100%; height:500px; will-change:transform; }
.sec-about-info__img--1{ z-index:1; }
.sec-about-info__img--2{ z-index:2; }
.sec-about-info__img--3{ z-index:3; }
.sec-about-info__img-fill{ position:absolute; inset:0; }
.sec-about-info__img-fill img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* Short summary · facts (absolute row at grid y 1760, 290px tall) */
.sec-about-info__facts{ position:absolute; top:1760px; left:0; right:0; z-index:2; height:290px; padding:0 var(--page-pad); overflow:hidden; }
.sec-about-info__facts-row{ display:flex; justify-content:center; align-items:center; width:100%; height:290px; }
.sec-about-info__fact{
position:relative; flex:1 0 0; width:1px; height:290px;
display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
padding:40px 40px 20px; background:var(--grey-19); color:var(--white);
}
.sec-about-info__fact-head{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; overflow:clip; }
.sec-about-info__dots{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:26px; height:8px; overflow:clip; }
.sec-about-info__dots > span{ display:flex; justify-content:center; align-items:center; gap:4px; width:26px; height:2px; overflow:clip; }
.sec-about-info__dots i{ display:block; width:2px; height:2px; background:var(--white-20); }
.sec-about-info__fact-title{ font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; color:var(--white); white-space:pre; }
.sec-about-info__fact-title strong,
.sec-about-info__fact-sub strong{ font-family:var(--font-inter); font-weight:700; }
.sec-about-info__fact-counter{ display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; width:100%; overflow:clip; }
.sec-about-info__fact-sub{ display:flex; justify-content:center; align-items:center; gap:10px; min-height:19.6px; overflow:clip; } /* 20.6px on the Inter card, as live */
.sec-about-info__fact-sub p{ font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; color:var(--white-30); white-space:pre; }
.sec-about-info__arrow{
flex:none; width:16px; height:16px; background:var(--white);
-webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6.75 15 L 6.75 0 M 6.75 0 L 0 6.75 M 6.75 0 L 13.5 6.75' fill='transparent' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' stroke='black' transform='translate(5.25 4.5)'/%3E%3C/svg%3E") alpha no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 6.75 15 L 6.75 0 M 6.75 0 L 0 6.75 M 6.75 0 L 13.5 6.75' fill='transparent' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' stroke='black' transform='translate(5.25 4.5)'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* odometer: 70px/700 digits in 0.62em × 1.2em windows (43.4 × 84 px), strip 0…n rolls 84px per digit */
.sec-about-info__num{
position:relative; display:inline-flex; align-items:flex-start; height:87px;
font-size:70px; font-weight:700; line-height:56px; color:var(--white); white-space:pre; font-variant-numeric:tabular-nums;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-about-info__digits{ display:inline-flex; align-items:center; height:84px; }
.sec-about-info__dw{ position:relative; display:inline-flex; justify-content:center; width:.62em; height:1.2em; overflow:hidden; }
.sec-about-info__dw--multi{ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%); }
.sec-about-info__strip{ position:absolute; top:0; right:0; display:block; width:100%; will-change:transform; }
.sec-about-info__strip span{ display:flex; justify-content:center; align-items:center; height:1.2em; line-height:1em; }
.sec-about-info__suffix{ display:block; height:70px; margin:7px 0 0 5.6px; line-height:70px; align-self:flex-start; }
/* ==========================================================================
B · Features ("One Studio.")
========================================================================== */
.sec-about-info__features{
position:relative; z-index:1; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;
padding:0 var(--page-pad); background:var(--black-05); overflow:clip;
}
.sec-about-info__ft-title{
position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end;
width:100%; max-width:var(--container-max); padding:150px 0 100px;
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-about-info__ft-title{ max-width:none; } }
.sec-about-info__ft-sub{ position:relative; z-index:1; display:flex; flex:1 0 0; width:1px; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:30px; will-change:transform,opacity; }
.sec-about-info__ft-heading{ position:relative; z-index:1; display:flex; flex:2 0 0; width:1px; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:23px; }
.sec-about-info__h2{ font-size:100px; font-weight:600; line-height:80px; letter-spacing:-.08em; white-space:pre; color:var(--black); }
.sec-about-info__ft-rate{ position:absolute; top:30px; right:40px; z-index:1; display:flex; justify-content:center; align-items:center; gap:10px; height:12px; overflow:clip; mix-blend-mode:difference; }
.sec-about-info__ft-rate p{ font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black-50); white-space:pre; font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-about-info__ft-rate span{ color:var(--black); }
.sec-about-info__ft-content{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; max-width:var(--container-max); padding:0 0 150px; }
.sec-about-info__ft-row{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); justify-content:center; width:100%; }
.sec-about-info__ft-row--1,
.sec-about-info__ft-row--2{ position:sticky; top:200px; }
.sec-about-info__ft-spacer{ position:relative; overflow:clip; }
.sec-about-info__ft-spacer--2{ grid-column:span 2; }
.sec-about-info__feature{ position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; width:100%; }
.sec-about-info__ft-img{ position:relative; display:flex; justify-content:center; align-items:center; gap:10px; width:100%; height:350px; overflow:clip; }
.sec-about-info__ft-par{ position:absolute; inset:0; z-index:1; will-change:transform; }
.sec-about-info__ft-par-in{ position:relative; width:100%; height:100%; overflow:hidden; }
.sec-about-info__ft-par-img{ position:absolute; top:-150px; left:0; width:100%; height:calc(100% + 300px); object-fit:cover; object-position:center; will-change:transform; }
.sec-about-info__ft-mask{ position:absolute; inset:0; z-index:1; background:var(--black-20); }
.sec-about-info__grain{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.sec-about-info__grain i{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.15; mix-blend-mode:overlay; will-change:transform;
animation:sec-about-info-grain 1.2s steps(1) infinite;
}
@keyframes sec-about-info-grain{
0%{ transform:scale(1.2) translate(9.25%,-9.25%); } 12.5%{ transform:scale(1.2) translate(6.75%,-6.75%); } 25%{ transform:scale(1.2) translate(-3.25%,3.25%); }
37.5%{ transform:scale(1.2) translate(-11%,11%); } 50%{ transform:scale(1.2) translate(2.5%,-2.5%); } 62.5%{ transform:scale(1.2) translate(12%,-12%); }
75%{ transform:scale(1.2) translate(-7.5%,7.5%); } 87.5%{ transform:scale(1.2) translate(-1%,1%); } 100%{ transform:scale(1.2) translate(9.25%,-9.25%); }
}
.sec-about-info.is-static .sec-about-info__grain i{ animation-play-state:paused; }
.sec-about-info__ft-counter{ position:absolute; left:30px; bottom:30px; z-index:2; display:flex; justify-content:center; align-items:flex-start; gap:10px; height:14px; will-change:transform,opacity; }
.sec-about-info__ft-count{ display:flex; justify-content:center; align-items:center; gap:3px; height:14px; }
.sec-about-info__ft-count p{ font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--white); white-space:pre; font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-about-info__ft-jp{ font-size:14px; font-weight:500; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--white-50); white-space:pre; }
.sec-about-info__ft-name{ display:flex; justify-content:center; align-items:center; gap:3px; width:100%; }
.sec-about-info__ft-name p{ width:100%; font-size:18px; font-weight:700; line-height:23.4px; letter-spacing:-.04em; color:var(--black); white-space:pre-wrap; will-change:transform,opacity; }
/* ==========================================================================
C · Awards ("Our awards")
========================================================================== */
.sec-about-info__awards{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:498px; justify-content:center;
padding:150px var(--page-pad); overflow:clip; will-change:transform,opacity;
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-about-info__awards{ max-width:none; } }
.sec-about-info__aw-title{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:498px; overflow:clip; }
/* "VIEW OUR WORK" button: 330×40 clip window over a 60px link, rgb(33,33,33) → red on hover */
.sec-about-info__btn-wrap{ position:relative; display:flex; justify-content:space-between; align-items:center; width:330px; height:40px; overflow:clip; cursor:pointer; }
.sec-about-info__btn{
position:relative; display:flex; flex:1 0 0; min-width:0; flex-direction:column; justify-content:center; align-items:center; gap:10px;
height:60px; background:rgb(33,33,33); color:var(--white); text-decoration:none;
transition:background-color .74s cubic-bezier(.25,.5,.24,1);
}
.sec-about-info__btn-label{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:center; height:12px; overflow:clip; pointer-events:none; user-select:none; }
.sec-about-info__btn-label p{ white-space:pre; font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-about-info__w{ white-space:nowrap; }
.sec-about-info__btn .sec-about-info__ch{ display:inline-block; will-change:transform; }
.sec-about-info__plus{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; aspect-ratio:1; pointer-events:none; user-select:none; background:var(--white);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 7.5 0 L 7.5 15 M 15 7.5 L 0 7.5' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(4.5 4.5)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 7.5 0 L 7.5 15 M 15 7.5 L 0 7.5' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(4.5 4.5)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
transition:transform .51s cubic-bezier(.3,.86,.33,1);
}
.sec-about-info__btn-wrap:hover .sec-about-info__btn{ background:var(--red); transition:background-color .44s cubic-bezier(.2,.98,.49,1); }
.sec-about-info__btn-wrap:hover .sec-about-info__plus{ transform:rotate(-180deg); transition:transform .48s cubic-bezier(.29,.66,.25,1); }
@keyframes sec-about-info-ch-in{ from{ transform:translateY(-15px); } to{ transform:translateY(0); } }
@keyframes sec-about-info-ch-out{ from{ transform:translateY(15px); } to{ transform:translateY(0); } }
.sec-about-info__btn-wrap--in .sec-about-info__ch{ animation:sec-about-info-ch-in .12s ease both; animation-delay:calc(45ms + var(--i) * 30ms); }
.sec-about-info__btn-wrap--out .sec-about-info__ch{ animation:sec-about-info-ch-out .12s ease both; animation-delay:calc(var(--i) * 30ms); }
/* awards table (2 columns of 453.33): headings 42px, rows 51px with 1px bottom rules */
.sec-about-info__aw-list{ position:relative; grid-column:span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:498px; }
.sec-about-info__aw-head{ display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); width:100%; padding:15px 0; overflow:clip; will-change:transform,opacity; }
.sec-about-info__aw-head p{ font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black-30); white-space:pre; font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-about-info__aw-head-r{ display:flex; justify-content:space-between; align-items:center; overflow:clip; }
.sec-about-info__aw-rows{ width:100%; }
.sec-about-info__aw-row{
position:relative; display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); grid-template-rows:21px; justify-content:center;
width:100%; padding:15px 0; cursor:pointer; will-change:transform,opacity;
}
.sec-about-info__aw-row::after{ content:""; position:absolute; inset:0; border-bottom:1px solid var(--line-light); pointer-events:none; }
.sec-about-info__aw-name{ position:relative; align-self:center; justify-self:start; height:14px; overflow:clip; }
.sec-about-info__aw-name-in{ display:block; transform:translateY(-13px); transition:transform .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995); }
.sec-about-info__aw-name p:first-child{ margin-bottom:-1px; }
.sec-about-info__aw-name p:last-child{ transition:transform .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995); } /* live: visible copy 0 → 14px, incoming copy -13 → 0 */
.sec-about-info__aw-name p{ font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black); white-space:pre; }
.sec-about-info__aw-r{ display:flex; justify-content:space-between; align-items:center; width:100%; height:21px; overflow:clip; }
.sec-about-info__aw-what{ font-size:14px; font-weight:400; line-height:21px; letter-spacing:-.04em; color:var(--black); white-space:pre; }
.sec-about-info__aw-year{ font-size:14px; font-weight:500; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black-50); white-space:pre; }
/* hover preview: 200×200 window at left 250 rising from bottom -120 → -80; the 200×250 photo slides top 0 → -45 and fades in */
.sec-about-info__aw-pic{
position:absolute; left:250px; bottom:-120px; z-index:2; display:flex; justify-content:center; align-items:center; gap:10px;
width:200px; height:200px; overflow:clip; pointer-events:none;
transition:bottom .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995);
}
.sec-about-info__aw-pic-in{ position:absolute; top:0; left:0; width:200px; height:250px; opacity:0; overflow:clip; transition:top .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995), opacity .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995); }
.sec-about-info__aw-pic-in img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* hover in = hover out = 0.7s spring, bounce 0 (sampled on the live row: 29%@76ms, 59%@139, 80%@203, 89%@265, 95%@328, 98%@390), emulated with linear() stops */
.sec-about-info__aw-row:hover .sec-about-info__aw-pic{ bottom:-80px; transition:bottom .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995); }
.sec-about-info__aw-row:hover .sec-about-info__aw-pic-in{ top:-45px; opacity:1; transition:top .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995), opacity .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995) 60ms; } /* live: the fade lags the slide by ~60ms on hover-in only */
.sec-about-info__aw-row:hover .sec-about-info__aw-name-in{ transform:translateY(0); transition:transform .7s linear(0, 0.0905, 0.265, 0.4432, 0.5951, 0.7137, 0.8017, 0.8648, 0.909, 0.9393, 0.9599, 0.9737, 0.9828, 0.9889, 0.9928, 0.9954, 0.997, 0.9981, 0.9988, 0.9992, 0.9995); }
.sec-about-info__aw-row:hover .sec-about-info__aw-name p:last-child{ transform:translateY(1px); }
.sec-about-info__aw-row:hover{ z-index:3; }
/* logo ticker: 906×50 window, 11 black client logos, 130px gaps, 30px/s to the left */
.sec-about-info__ticker{ position:relative; z-index:1; display:flex; justify-content:flex-start; align-items:center; width:100%; height:150px; padding:100px 0 0; }
.sec-about-info__ticker-inner{ position:relative; display:flex; justify-content:center; align-items:center; gap:10px; width:100%; height:50px; overflow:clip; opacity:0; transition:opacity .25s ease; }
.sec-about-info__ticker-inner.is-in{ opacity:1; }
.sec-about-info__ticker-track{ width:100%; overflow:clip; }
.sec-about-info__ticker-track ul{ display:flex; justify-content:flex-start; align-items:center; gap:130px; width:max-content; }
.sec-about-info__ticker-track li{ flex:none; display:flex; align-items:center; }
.sec-about-info__ticker-track li > span{ display:block; }
/* ---- responsive (secondary) ---- */
@media (min-width:1620px){
.sec-about-info__photos,.sec-about-info__awards{ padding-left:0; padding-right:0; }
.sec-about-info__cols{ padding:0; left:50%; right:auto; width:100%; max-width:var(--container-max); transform:translateX(-50%); }
.sec-about-info__facts{ padding:0; left:50%; right:auto; width:100%; max-width:var(--container-max); transform:translateX(-50%); }
.sec-about-info__features{ padding:0; }
.sec-about-info__ft-rate{ right:0; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-about-info__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-about-info__cols .sec-about-info__col:last-child{ display:none; }
.sec-about-info__photos{ grid-template-columns:repeat(2,minmax(50px,1fr)); grid-template-rows:auto auto; padding:100px var(--page-pad) 300px; }
.sec-about-info__photos-col{ grid-column:span 2; height:auto; }
.sec-about-info__photos-col .sec-about-info__heading{ position:relative; top:auto; }
.sec-about-info__images,.sec-about-info__images-inner{ height:auto; }
.sec-about-info__img{ position:relative; top:auto; height:420px; }
.sec-about-info__facts{ position:relative; top:auto; height:auto; }
.sec-about-info__facts-row{ flex-direction:column; height:auto; }
.sec-about-info__fact{ flex:none; width:100%; }
.sec-about-info__ft-title{ flex-direction:column; align-items:flex-start; gap:30px; padding:100px 0 50px; }
.sec-about-info__ft-sub,.sec-about-info__ft-heading{ flex:none; width:100%; }
.sec-about-info__h2{ font-size:70px; line-height:60px; }
.sec-about-info__ft-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-about-info__ft-spacer--2{ grid-column:span 1; }
.sec-about-info__awards{ grid-template-columns:repeat(2,minmax(50px,1fr)); grid-template-rows:auto auto; padding:100px var(--page-pad); gap:50px; }
.sec-about-info__aw-title,.sec-about-info__aw-list{ grid-column:span 2; height:auto; gap:40px; }
}
@media (max-width:809.98px){
.sec-about-info__cols{ grid-template-columns:1fr; }
.sec-about-info__cols .sec-about-info__col:not(:first-child){ display:none; }
.sec-about-info__photos{ display:flex; flex-direction:column; padding:100px var(--page-pad) 200px; }
.sec-about-info__photos-col{ height:auto; }
.sec-about-info__photos-col .sec-about-info__heading{ position:relative; top:auto; }
.sec-about-info__h3{ font-size:50px; line-height:45px; }
.sec-about-info__images,.sec-about-info__images-inner{ height:auto; }
.sec-about-info__img{ position:relative; top:auto; height:260px; }
.sec-about-info__facts{ position:relative; top:auto; height:auto; padding:0; }
.sec-about-info__facts-row{ flex-direction:column; height:auto; }
.sec-about-info__fact{ flex:none; width:100%; padding:30px 20px 20px; }
.sec-about-info__ft-title{ flex-direction:column; align-items:flex-start; gap:20px; padding:100px 0 50px; }
.sec-about-info__ft-sub,.sec-about-info__ft-heading{ flex:none; width:100%; }
.sec-about-info__h2{ font-size:50px; line-height:45px; white-space:normal; }
.sec-about-info__ft-row{ display:flex; flex-direction:column; position:relative; top:auto; }
.sec-about-info__ft-spacer{ display:none; }
.sec-about-info__feature{ margin-bottom:40px; }
.sec-about-info__awards{ display:flex; flex-direction:column; gap:50px; padding:100px var(--page-pad); }
.sec-about-info__aw-title,.sec-about-info__aw-list{ height:auto; gap:40px; }
.sec-about-info__aw-pic{ display:none; }
}
/* MASK client logos (dark PNG) in the awards ticker */
.sec-about-info__client{ display:block; height:28px; width:auto; max-width:150px; object-fit:contain; }
html[lang="fr"] .sec-about-info__suffix--word{ margin-left:18px; }
/* ==== css/sections/22-projects-title.css ==== */
/* ==========================================================================
22 — Projects page: Title block (measured on neiden.framer.media/projects at 1440)
Wrapper: flex column, padding-top 300, gap 150, white, overflow clip, z 2 → 708.8px tall
Inner (y300, h218.8): 3-col grid rows — counter 14 / gap 40 / title 80 / gap 40 / description 44.8
Tools row (y668.8, h40): "All categories" dropdown (col 1, #f2f2f2) + search input (col 3)
========================================================================== */
.sec-projects-title{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:150px;
width:100%; padding:300px 0 0;
background:var(--white); color:var(--black); font-family:var(--font-sans);
overflow:clip;
}
/* ---- hairline column grid (absolute) ---- */
.sec-projects-title__cols{
position:absolute; top:0; left:calc(50% - min(var(--container-max),100%)/2); z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); justify-content:center;
width:100%; max-width:var(--container-max); height:100%; padding:0;
overflow:clip; pointer-events:none;
}
.sec-projects-title__col{ position:relative; height:100%; border-right:1px solid var(--line-light); }
.sec-projects-title__col--first{ border-left:1px solid var(--line-light); }
/* ---- inner content ---- */
.sec-projects-title__inner{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:50px;
width:100%; max-width:var(--container-max); padding:0;
}
.sec-projects-title__row{
position:relative; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr);
justify-content:center; gap:0; width:100%;
}
.sec-projects-title__spacer{ position:relative; min-height:14px; overflow:clip; }
/* counter label: 5 red flags (40px) + gap 15 + "[ ND® ‒ PORTFOLIO / 制作実績 ]" */
.sec-projects-title__counter{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:14px; }
.sec-projects-title__counter-box{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); }
.sec-projects-title__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-projects-title__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-projects-title__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-projects-title__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-projects-title__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-projects-title__label-part--link{ cursor:pointer; }
/* title: DM Sans 100/80 600 -8px, spans 2 columns from column 2 */
.sec-projects-title__h{
position:relative; grid-column:span 2; place-self:start; width:100%;
color:var(--black); white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word;
}
.sec-projects-title__word{ display:inline-block; will-change:transform,opacity; }
/* description: DM Sans 16/22.4 400 -0.8px rgba(0,0,0,.7), column 2 */
.sec-projects-title__desc{ position:relative; place-self:start; width:100%; color:var(--black-70); white-space:normal; text-align:left; }
.sec-projects-title__desc-line{ display:none; white-space:pre-wrap; word-break:break-word; }
.sec-projects-title__desc-line--desk{ display:block; }
/* ---- tools row: dropdown + search ---- */
.sec-projects-title__tools{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr);
justify-content:center; gap:0; width:100%; max-width:var(--container-max); height:min-content; padding:0;
overflow:visible;
}
.sec-projects-title__sorter,.sec-projects-title__search-block{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
width:100%; height:40px;
}
.sec-projects-title__tools-spacer{ position:relative; height:25px; }
/* dropdown ("All categories") */
.sec-projects-title__dropdown-wrap{ position:relative; width:100%; height:100%; }
.sec-projects-title__dropdown{
position:relative; display:flex; align-items:center; justify-content:space-between;
width:100%; height:40px; padding:0 30px 0 40px; margin:0;
background:var(--grey-f2); color:var(--black); cursor:pointer; border:0; border-radius:0; text-align:left;
-webkit-appearance:none; appearance:none;
}
.sec-projects-title__dropdown:focus-visible{ outline:1px solid var(--black-40); outline-offset:-1px; }
.sec-projects-title__dropdown-text{ display:block; white-space:pre; color:var(--black); }
.sec-projects-title__chevron{ display:block; flex:none; width:22px; height:22px; color:var(--black); } /* no rotation on the live site */
/* category panel (live: portal, 517×288 white panel flush on top of the trigger, shadow 0 10px 20px rgba(0,0,0,.05),
fades in over ~.2s, closes instantly when the pointer leaves; rows 36px, 12px/600 uppercase, hover #f2f2f2) */
.sec-projects-title__menu{
position:absolute; bottom:100%; left:0; z-index:11; display:none; flex-direction:column; gap:0;
width:517px; max-width:calc(100vw - 2*var(--page-pad)); margin:0; padding:0;
background:var(--white); box-shadow:rgba(0,0,0,.05) 0 10px 20px 0; overflow:clip;
}
.sec-projects-title.is-open .sec-projects-title__menu{ display:flex; animation:sec-projects-title-fade .2s ease-out both; }
@keyframes sec-projects-title-fade{ from{ opacity:0; } to{ opacity:1; } }
.sec-projects-title__menu-group{ display:flex; flex-direction:column; gap:0; }
.sec-projects-title__menu-item{
display:block; width:100%; height:36px; margin:0; padding:10px 20px; border:0; border-radius:0;
background:var(--white); color:var(--black); cursor:pointer; user-select:none; white-space:nowrap; text-align:start;
font-family:var(--font-sans); font-size:12px; font-weight:600; font-style:normal; line-height:16px; letter-spacing:normal; text-transform:uppercase;
font-feature-settings:normal; transition:background .2s; -webkit-appearance:none; appearance:none;
}
.sec-projects-title__menu-item:hover{ background:var(--grey-f2); }
.sec-projects-title__menu-item:focus-visible{ outline:1px solid var(--black-40); outline-offset:-1px; }
/* search */
.sec-projects-title__search{
display:flex; align-items:center; justify-content:space-between; flex:1 0 0;
width:100%; height:100%; padding:0 40px; margin:0; overflow:visible;
}
.sec-projects-title__search-field{
position:relative; display:flex; align-items:center; justify-content:center; flex:1 0 0; width:1px; height:100%;
}
.sec-projects-title__input{
display:flex; align-items:center; width:100%; height:100%; padding:0; margin:0;
font-family:var(--font-sans); font-size:12px; font-weight:600; font-style:normal; letter-spacing:-.02em; line-height:normal; font-feature-settings:normal;
color:var(--black); background:var(--white); border:0; border-radius:0; outline:none; box-shadow:none; overflow:clip;
-webkit-appearance:none; appearance:none; cursor:text;
}
.sec-projects-title__input::placeholder{ color:var(--black); opacity:1; }
/* live: the 28px right padding (room for the ✕) is only set once the field has a value */
.sec-projects-title__search-field.has-value .sec-projects-title__input{ padding-right:28px; }
.sec-projects-title__input::-webkit-search-decoration,.sec-projects-title__input::-webkit-search-cancel-button{ display:none; }
.sec-projects-title__search-icon{
position:absolute; top:0; bottom:0; right:0; z-index:1; display:flex; align-items:center; justify-content:center;
width:15px; height:15px; margin:auto 0; color:var(--black); pointer-events:none;
}
.sec-projects-title__search-icon svg{ display:block; width:15px; height:15px; overflow:hidden; }
/* "✕" clear button: appears once the field has a value (live: absolute, right 20px, padding 0 4px, opacity .6) */
.sec-projects-title__clear{
position:absolute; top:0; bottom:0; right:20px; z-index:1; display:flex; align-items:center; justify-content:center;
margin:auto 0; padding:0 4px; border:0; background:none; color:var(--black); opacity:.6; cursor:pointer;
font-family:sans-serif; font-size:12px; line-height:normal; -webkit-appearance:none; appearance:none;
}
.sec-projects-title__clear[hidden]{ display:none; }
/* ---- breakpoints ---- */
/* 1200–1619 (the measured desktop): full-width container with 40px side padding, inner gap 40 */
@media (max-width:1619.98px){
.sec-projects-title__cols{ left:0; max-width:none; padding:0 var(--page-pad); }
.sec-projects-title__inner{ gap:40px; padding:0 var(--page-pad); }
.sec-projects-title__tools{ max-width:none; padding:0 var(--page-pad); }
}
@media (min-width:1620px){
.sec-projects-title__desc-line--desk{ display:none; }
.sec-projects-title__desc-line--wide{ display:block; }
}
/* tablet 810–1199: 2 columns, spacer columns hidden, title/description full width */
@media (max-width:1199.98px){
.sec-projects-title{ gap:100px; padding:150px 0 0; }
.sec-projects-title__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-projects-title__col:last-child{ display:none; }
.sec-projects-title__inner{ gap:30px; }
.sec-projects-title__row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-projects-title__row--title,.sec-projects-title__row--sub{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-projects-title__spacer{ display:none; }
.sec-projects-title__h{ grid-column:span 1; font-size:80px; line-height:.8; }
.sec-projects-title__desc-line--desk{ display:none; }
.sec-projects-title__desc-line--small{ display:block; }
.sec-projects-title__tools{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-projects-title__tools-spacer{ display:none; }
.sec-projects-title__search{ padding:0 30px; }
}
/* phone <810: 1 column */
@media (max-width:809.98px){
.sec-projects-title{ gap:70px; padding:150px 0 0; }
.sec-projects-title__cols{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-projects-title__col:nth-child(2){ display:none; }
.sec-projects-title__row,.sec-projects-title__tools{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-projects-title__h{ font-size:60px; }
.sec-projects-title__tools{ height:auto; }
.sec-projects-title__dropdown{ padding:0 20px; }
.sec-projects-title__search-block{ display:none; }
}
/* ---- list / grid view toggle (middle column of the tools row) ---- */
.sec-projects-title__view{ position:relative; display:flex; align-items:center; justify-content:center; gap:1px; height:40px; }
.sec-projects-title__view-btn{
display:flex; align-items:center; justify-content:center; width:56px; height:40px; padding:0; margin:0; border:0; border-radius:0;
background:var(--grey-f2); color:var(--black-50); cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .2s ease, color .2s ease;
}
.sec-projects-title__view-btn:hover{ color:var(--black); }
.sec-projects-title__view-btn.is-active{ background:var(--black); color:#fff; }
.sec-projects-title__view-btn:focus-visible{ outline:1px solid var(--black-40); outline-offset:-1px; }
@media (max-width:1199.98px){ .sec-projects-title__view{ grid-column:1 / -1; justify-content:flex-start; } }
/* ==== css/sections/22b-projects-grid.css ==== */
/* ==========================================================================
22b — /projects "Portfolio" block: 9 full-viewport project cards over a sticky blurred, cross-fading background.
Measured on neiden.framer.media/projects at 1440×900 (block top 708.8, height 8100 = 9 × 100vh, bg rgba(0,0,0,.9)).
Same component as the home "Case studies" list (05-portfolio-a), re-measured for this page.
========================================================================== */
.sec-projects-grid{
position:relative; z-index:2; width:100%;
display:flex; flex-direction:column; align-items:center;
background:var(--black-90); color:var(--white);
overflow:clip;
}
/* ---- sticky background: 9 stacked blurred layers (blur 10px, scale 1.2, 30% black shade; layer 1 also carries the grain) ---- */
.sec-projects-grid__bg{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:clip; pointer-events:none; }
.sec-projects-grid__bg-sticky{ position:sticky; top:0; z-index:1; width:100%; height:100vh; overflow:clip; }
.sec-projects-grid__bg-layer{
position:absolute; top:0; left:0; width:100%; height:100%; overflow:clip;
opacity:0; will-change:opacity; /* layer 1 is always on; layers 2–9 fade in OVER the previous ones (spring 1s, bounce 0, driven in JS) once their slot reaches the viewport top */
}
.sec-projects-grid__bg-layer:first-child{ opacity:1; }
.sec-projects-grid__bg-img{
position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; overflow:clip;
transform:scale(1.2); /* pre-blurred 160px variants (assets/images/mask/blur): no runtime blur filter */
}
.sec-projects-grid__bg-img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-projects-grid__bg-shade{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background:var(--black-30); }
.sec-projects-grid__grain{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; overflow:hidden; }
.sec-projects-grid__grain i{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.15; mix-blend-mode:overlay; will-change:transform;
animation:sec-projects-grid-grain 1.2s steps(1) infinite;
}
@keyframes sec-projects-grid-grain{
0%{ transform:translate(9.25%,-9.25%); } 12.5%{ transform:translate(6.75%,-6.75%); } 25%{ transform:translate(-3.25%,3.25%); }
37.5%{ transform:translate(-11%,11%); } 50%{ transform:translate(2.5%,-2.5%); } 62.5%{ transform:translate(12%,-12%); }
75%{ transform:translate(-7.5%,7.5%); } 87.5%{ transform:translate(-1%,1%); } 100%{ transform:translate(9.25%,-9.25%); }
}
/* ---- slots: one per viewport height, with the 3-column hairline grid ---- */
.sec-projects-grid__list{ position:relative; width:100%; display:flex; flex-direction:column; align-items:flex-start; }
.sec-projects-grid__slot{
position:relative; z-index:1; width:100%; height:100vh;
display:flex; justify-content:center; align-items:center; gap:10px; overflow:clip;
}
.sec-projects-grid__lines{
position:absolute; top:0; left:0; z-index:0; width:100%; height:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr));
padding:0 var(--page-pad); pointer-events:none; overflow:clip;
}
@media (min-width:1620px){ .sec-projects-grid__lines{ left:calc(50% - min(1550px,100%)/2); max-width:1550px; padding:0; } }
.sec-projects-grid__lines i{ display:block; height:100%; border-right:1px solid var(--line-dark); }
.sec-projects-grid__lines i:first-child{ border-left:1px solid var(--line-dark); }
.sec-projects-grid__item{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:flex; justify-content:center; align-items:center; padding:0; overflow:clip;
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-projects-grid__item{ max-width:none; padding:0 40px; } }
.sec-projects-grid__link{
position:relative; z-index:3; display:flex; flex-direction:column; align-items:center;
width:100%; max-width:100%; cursor:pointer; color:inherit; text-decoration:none;
}
/* meta row (01. / year / client) — 12px/12 500, 20px bottom padding → 32px */
.sec-projects-grid__meta{
position:relative; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr);
justify-content:center; width:100%; padding:0 0 20px;
}
.sec-projects-grid__meta > div{ position:relative; z-index:3; display:flex; align-items:center; gap:5px; height:min-content; overflow:clip; }
.sec-projects-grid__lbl,.sec-projects-grid__val{
display:inline-block; font-size:12px; font-weight:500; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; white-space:pre;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; /* live presets 9enybc/4zq9bz/1x9173r all carry ss07 ("01." measures 14.7px, not 14.1) */
}
.sec-projects-grid__lbl{ color:var(--white-30); }
.sec-projects-grid__val{ color:var(--white); }
/* image: 65vh box, inner scale 1.1 → 1 on hover, parallax img (±150px) */
.sec-projects-grid__image{
position:relative; width:100%; height:calc(100vh * .65);
display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:clip;
}
.sec-projects-grid__image-scale{
width:100%; height:100%; transform:scale(1.1); transform-origin:50% 50%;
transition:transform .7s cubic-bezier(.8,.05,.3,.9); will-change:transform; /* live hover-in (logo opacity = same curve): .096@300ms .256@400 .686@500 .906@600 .995@800; un-hover starts ~80ms sooner */
}
.sec-projects-grid__link:hover .sec-projects-grid__image-scale{ transform:scale(1); transition-delay:.08s; }
.sec-projects-grid__image-zoom{ position:relative; width:100%; height:100%; transform-origin:50% 50%; }
.sec-projects-grid__image-clip{ position:relative; width:100%; height:100%; overflow:hidden; }
.sec-projects-grid__image-clip img{
position:absolute; left:0; top:-150px; width:100%; height:calc(100% + 300px);
object-fit:cover; object-position:center; will-change:transform;
}
.sec-projects-grid__shade{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:var(--black); opacity:0; }
/* client logo: 79×22 (aspect 3.59091), difference blend, appears on hover (opacity 0→1, scale 1.3→1, same curve as the image) */
.sec-projects-grid__logo{
position:absolute; top:50%; left:50%; z-index:4; width:79px; height:auto; aspect-ratio:3.59091;
mix-blend-mode:difference; opacity:0; transform:translate(-50%,-50%) scale(1.3); transform-origin:50% 50%;
transition:transform .7s cubic-bezier(.8,.05,.3,.9), opacity .7s cubic-bezier(.8,.05,.3,.9); pointer-events:none;
}
.sec-projects-grid__logo svg{ display:block; width:100%; height:100%; }
.sec-projects-grid__link:hover .sec-projects-grid__logo{ opacity:1; transform:translate(-50%,-50%) scale(1); transition-delay:.08s; }
/* caption row (spacer / title / tags) — 20px vertical padding, row height = tallest column (22px spacer min) */
.sec-projects-grid__caption{
position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr);
justify-content:center; width:100%; padding:20px 0;
}
.sec-projects-grid__cap-spacer{ min-height:22px; }
.sec-projects-grid__ttl-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%; }
.sec-projects-grid__ttl{
width:min-content; overflow:clip; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--white);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-projects-grid__ttl span{ display:inline-block; }
.sec-projects-grid__tags{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; height:100%; }
.sec-projects-grid__tags ul{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:min-content; }
.sec-projects-grid__tags li{
display:block; width:min-content; /* words of a tag are separated by a literal space (2.7px), not a flex gap */
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; white-space:pre; color:var(--white-30);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-projects-grid__tags li span{ display:inline-block; }
/* ---- smaller breakpoints (kept sane, not pixel-matched; follow the live Tablet/Phone variants: 2 columns,
no "01." cell, tags before the title, wrapping title) ---- */
@media (max-width:1199.98px){
.sec-projects-grid__meta,.sec-projects-grid__caption{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-projects-grid__meta > div:first-child,.sec-projects-grid__cap-spacer{ display:none; }
.sec-projects-grid__tags{ order:1; }
.sec-projects-grid__ttl-wrap{ order:2; }
.sec-projects-grid__ttl{ width:auto; white-space:normal; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-projects-grid__lines{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-projects-grid__item{ max-width:none; padding:0 40px; }
}
@media (max-width:809.98px){
.sec-projects-grid__lines{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-projects-grid__slot{ height:auto; padding:70px 0; }
.sec-projects-grid__item{ max-width:none; padding:0 20px; }
.sec-projects-grid__image{ height:calc(100vh * .45); }
}
/* MASK projects: client logos are raster images */
.sec-projects-grid__logo{ width:120px; aspect-ratio:auto; height:40px; }
.sec-projects-grid__logo img{ display:block; width:100%; height:100%; object-fit:contain; }
/* client logos in true colours (no difference blend), size set per logo inline (+20% vs mask-agency.com) */
.sec-projects-grid__logo{ width:auto; height:auto; aspect-ratio:auto; mix-blend-mode:normal; }
.sec-projects-grid__logo img{ width:auto; }
/* category filter / search */
.sec-projects-grid__slot[hidden]{ display:none !important; }
.sec-projects-grid__empty{ width:100%; min-height:60vh; display:flex; align-items:center; justify-content:center; margin:0; color:#fff; font:500 18px/1.4 'DM Sans',sans-serif; position:relative; z-index:2; }
.sec-projects-grid__empty[hidden]{ display:none; }
/* performance: layers that cannot be seen are not painted (toggled by the grid script) */
.sec-projects-grid__bg-layer.is-off{ visibility:hidden; }
.sec-projects-grid__bg-layer.is-off .sec-projects-grid__grain i{ animation:none; }
/* phones: one meta cell per line, long sector names wrap instead of being cut */
@media (max-width:809.98px){
.sec-projects-grid__meta{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.sec-projects-grid__meta > div:first-child{ display:none; }
.sec-projects-grid__meta > div{ align-items:flex-start; max-width:100%; }
.sec-projects-grid__val{ white-space:normal; }
}
/* touch screens have no hover: show the client logo permanently */
@media (hover:none), (pointer:coarse){
.sec-projects-grid__logo{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* touch screens: lighter scrolling
- the sticky background is blurred at quarter resolution then scaled up (same look, ~16× less blur work per frame)
- the grain overlay stays still instead of re-rendering the whole screen every 100ms
- card images appear in place (the slide/zoom reveal looked like a jump during fast flings) */
@media (hover:none), (pointer:coarse){
.sec-projects-grid__grain i{ animation:none; }
.sec-projects-grid__image, .sec-projects-grid__image-zoom{ transform:none !important; opacity:1 !important; }
}
/* ===================== grid view (toggle in the title tools row): 3 cards per row, blog-list art direction ===================== */
.sec-projects-grid.is-grid{ background:#fff; color:var(--black); }
.sec-projects-grid.is-grid .sec-projects-grid__bg, .sec-projects-grid.is-grid .sec-projects-grid__lines, .sec-projects-grid.is-grid .sec-projects-grid__empty{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__empty[hidden]{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__empty:not([hidden]){ display:flex; color:var(--black); min-height:40vh; }
.sec-projects-grid.is-grid .sec-projects-grid__list{
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:min-content; gap:0; align-items:start;
max-width:var(--container-max); margin:0 auto; padding:0 var(--page-pad) 100px;
}
.sec-projects-grid.is-grid .sec-projects-grid__slot{ position:relative; height:auto; min-height:0; padding:0; margin:0; width:auto; display:block; }
.sec-projects-grid.is-grid .sec-projects-grid__slot::after{ content:""; position:absolute; inset:0; border:1px solid var(--line-light); pointer-events:none; }
.sec-projects-grid.is-grid .sec-projects-grid__item{ position:static; width:100%; max-width:none; height:auto; padding:0; margin:0; transform:none; }
.sec-projects-grid.is-grid .sec-projects-grid__link{ display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; height:auto; color:var(--black); }
/* image on top, no parallax / reveal transforms */
.sec-projects-grid.is-grid .sec-projects-grid__image{ order:1; position:relative; width:100%; height:350px; margin:0; transform:none !important; opacity:1 !important; overflow:hidden; }
.sec-projects-grid.is-grid .sec-projects-grid__image-scale, .sec-projects-grid.is-grid .sec-projects-grid__image-zoom{ transform:none !important; opacity:1 !important; transition:transform .7s cubic-bezier(.8,.05,.3,.9); }
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__image-scale{ transform:scale(1.06) !important; }
.sec-projects-grid.is-grid .sec-projects-grid__image-clip img{ top:0; height:100%; transform:none !important; }
.sec-projects-grid.is-grid .sec-projects-grid__shade{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__logo{ display:none; }
/* card body: meta row (year · sector) + title + tags, on the grey box */
.sec-projects-grid.is-grid .sec-projects-grid__meta{
order:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px; width:100%; height:auto; padding:30px 30px 0; background:var(--grey-f2);
}
.sec-projects-grid.is-grid .sec-projects-grid__meta > div:first-child, .sec-projects-grid.is-grid .sec-projects-grid__meta .sec-projects-grid__lbl{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__meta > div{ display:flex; align-items:center; gap:10px; overflow:visible; }
.sec-projects-grid.is-grid .sec-projects-grid__meta > div:nth-child(3)::before{ content:""; display:block; flex:none; width:4px; height:4px; border-radius:7px; background:var(--black-30); }
.sec-projects-grid.is-grid .sec-projects-grid__val{ color:var(--black); opacity:1 !important; transform:none !important; white-space:normal; }
.sec-projects-grid.is-grid .sec-projects-grid__meta > div:nth-child(2) .sec-projects-grid__val{ color:var(--black-50); }
.sec-projects-grid.is-grid .sec-projects-grid__caption{ order:3; position:static; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; height:auto; padding:20px 30px 40px; background:var(--grey-f2); }
.sec-projects-grid.is-grid .sec-projects-grid__cap-spacer{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__ttl-wrap{ order:1; width:100%; }
.sec-projects-grid.is-grid .sec-projects-grid__ttl{ width:100%; white-space:normal; font-size:16px; font-weight:700; line-height:1.3em; letter-spacing:-.05em; color:var(--black); text-transform:none; }
.sec-projects-grid.is-grid .sec-projects-grid__ttl span{ display:inline; opacity:1 !important; transform:none !important; }
.sec-projects-grid.is-grid .sec-projects-grid__tags{ order:2; width:100%; }
.sec-projects-grid.is-grid .sec-projects-grid__tags ul{ display:flex; flex-wrap:wrap; gap:6px 14px; }
.sec-projects-grid.is-grid .sec-projects-grid__tags li{ width:auto; color:var(--black-50); }
.sec-projects-grid.is-grid .sec-projects-grid__tags li span{ opacity:1 !important; transform:none !important; }
@media (min-width:810px) and (max-width:1199.98px){ .sec-projects-grid.is-grid .sec-projects-grid__list{ grid-template-columns:repeat(2,minmax(50px,1fr)); } }
@media (max-width:809.98px){ .sec-projects-grid.is-grid .sec-projects-grid__list{ grid-template-columns:minmax(50px,1fr); } .sec-projects-grid.is-grid .sec-projects-grid__image{ height:260px; } }
@media (max-width:809.98px){ .sec-projects-grid.is-grid .sec-projects-grid__meta{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:24px 20px 0; } .sec-projects-grid.is-grid .sec-projects-grid__caption{ padding:16px 20px 30px; } }
/* grid view · hover (pointer devices): the image box shrinks, the text rises and a one-line project description fades in */
.sec-projects-grid__desc{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__desc{
display:block; order:3; width:100%; margin:0; max-height:0; opacity:0; filter:blur(4px); transform:translateY(6px); overflow:hidden;
font-size:14px; font-weight:400; line-height:1.4em; letter-spacing:-.04em; color:var(--black-70);
transition:max-height .57s cubic-bezier(.7,.1,.15,1), opacity .4s cubic-bezier(.7,.1,.15,1), filter .4s cubic-bezier(.7,.1,.15,1), transform .57s cubic-bezier(.7,.1,.15,1);
}
.sec-projects-grid.is-grid .sec-projects-grid__image{ transition:height .57s cubic-bezier(.7,.1,.15,1); }
@media (hover:hover) and (pointer:fine){
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__image{ height:300px; }
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__desc{ max-height:80px; opacity:1; filter:blur(0); transform:none; }
}
/* grid view · fixed card height: the hover only redistributes space (image shrinks, text rises, description appears),
so neighbouring cards never move; vertical hairlines between columns like the article grid */
.sec-projects-grid.is-grid .sec-projects-grid__slot::after{ display:none; }
.sec-projects-grid.is-grid .sec-projects-grid__slot{ border-left:1px solid var(--line-light); border-top:1px solid var(--line-light); }
.sec-projects-grid.is-grid .sec-projects-grid__slot:nth-child(3n){ border-right:1px solid var(--line-light); }
.sec-projects-grid.is-grid .sec-projects-grid__list{ border-bottom:1px solid var(--line-light); }
.sec-projects-grid.is-grid .sec-projects-grid__link{ height:620px; overflow:hidden; }
.sec-projects-grid.is-grid .sec-projects-grid__image{ flex:none; }
.sec-projects-grid.is-grid .sec-projects-grid__meta, .sec-projects-grid.is-grid .sec-projects-grid__caption{ flex:none; }
.sec-projects-grid.is-grid .sec-projects-grid__caption{ flex:1 1 auto; }
@media (hover:hover) and (pointer:fine){
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__image{ height:280px; }
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__desc{ max-height:90px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-projects-grid.is-grid .sec-projects-grid__slot:nth-child(3n){ border-right:0; }
.sec-projects-grid.is-grid .sec-projects-grid__slot:nth-child(2n){ border-right:1px solid var(--line-light); }
}
@media (max-width:809.98px){
.sec-projects-grid.is-grid .sec-projects-grid__slot{ border-right:1px solid var(--line-light); }
.sec-projects-grid.is-grid .sec-projects-grid__link{ height:auto; }
}
.sec-projects-grid.is-grid .sec-projects-grid__caption{ justify-content:flex-start; }
.sec-projects-grid.is-grid .sec-projects-grid__tags{ height:auto; flex:none; justify-content:flex-start; }
/* grid view · tighter grey body (≈ 40 % shorter): 350px image + 170px body; hover frees 80px for the description */
.sec-projects-grid.is-grid .sec-projects-grid__link{ height:520px; }
.sec-projects-grid.is-grid .sec-projects-grid__meta{ padding:24px 30px 0; }
.sec-projects-grid.is-grid .sec-projects-grid__caption{ padding:16px 30px 24px; gap:8px; }
.sec-projects-grid.is-grid .sec-projects-grid__desc{ transition-duration:.5s; }
@media (hover:hover) and (pointer:fine){
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__image{ height:270px; }
.sec-projects-grid.is-grid .sec-projects-grid__link:hover .sec-projects-grid__desc{ max-height:72px; }
}
/* ==== css/sections/23-projects-faq.css ==== */
/* ==========================================================================
23 — Projects page FAQ ("[ND® ‒ FAQ / 質問と理解]" — "Quick answers." + 6-item accordion with tags)
Measured on neiden.framer.media/projects at 1440×900 (breakpoint 1200–1619).
Section = 100 + content 980.6 + 150 = 1230.6px
Content = flex row: sticky heading (1/3 = 453.3px, top:100px, gap 100, title padding-top 50) | accordion (2/3 = 906.7px)
Accordion items: open 520.6px (40 + 32 + 30 + 89.6 + 30 + 259 + 40), closed 92px (30 + 32 + 30) × 5
Differences from the home FAQ (15): section padding, heading gap, title padding, CTA title 18px/700, tags on 02 + 05
========================================================================== */
.sec-projects-faq{
position:relative; z-index:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; padding:100px var(--page-pad) 150px;
/* live: the FAQ is the last child of the page's nested "Section" wrapper, whose flex gap (10px) separates it from the
contact form below (contact form top = 10049.4 = FAQ bottom 10039.4 + 10). Kept outside the section box as a margin. */
margin:0 0 10px;
background:var(--white); color:var(--black);
font-family:var(--font-sans);
}
/* ---- hairline column grid (col 1: left + right, cols 2/3: right) ---- */
.sec-projects-faq__cols{
position:absolute; inset:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%;
padding:0 var(--page-pad); pointer-events:none; overflow:clip;
}
.sec-projects-faq__col{ position:relative; height:100%; overflow:clip; }
.sec-projects-faq__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-projects-faq__col--1::after{ border-left-width:1px; }
/* ---- content row ---- */
.sec-projects-faq__content{
position:relative; z-index:1; width:100%;
display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:0;
}
/* ---- left: sticky heading ---- */
.sec-projects-faq__heading{
position:sticky; top:100px; z-index:1;
flex:1 0 0; width:1px; min-width:0;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:100px;
border-radius:10px;
}
.sec-projects-faq__intro{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; padding-top:50px; }
.sec-projects-faq__label-wrap{ position:relative; width:max-content; height:14px; }
.sec-projects-faq__label{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); cursor:pointer; text-decoration:none; }
.sec-projects-faq__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-projects-faq__icon-bar{ display:block; height:14px; flex:none; overflow:visible; }
.sec-projects-faq__label-text{ display:flex; align-items:flex-end; justify-content:center; gap:2px; height:14px; }
.sec-projects-faq__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
}
.sec-projects-faq__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-projects-faq__title{
display:block; margin:0; white-space:pre; word-break:break-word;
font-family:var(--font-sans); font-size:70px; font-weight:600; line-height:63px; letter-spacing:-.06em; color:var(--black);
}
.sec-projects-faq__title .split-word{ white-space:nowrap; display:inline-block; }
.sec-projects-faq__title .split-char{ display:inline-block; }
.sec-projects-faq__lead{ position:relative; width:max-content; max-width:100%; }
.sec-projects-faq__lead p{ white-space:pre; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left; }
/* CTA block */
.sec-projects-faq__cta{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; }
.sec-projects-faq__cta-text{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; width:100%; }
.sec-projects-faq__cta-title{ white-space:pre; font-size:18px; font-weight:700; line-height:23.4px; letter-spacing:-.04em; color:var(--black); }
.sec-projects-faq__cta-sub{ white-space:pre; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left; }
/* black CTA button 300×60 (Framer "Default button": red on hover, letters slide, plus spins) */
.sec-projects-faq__btn-wrap{ position:relative; width:300px; height:60px; }
.sec-projects-faq__btn{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:300px; height:60px;
background:var(--black); color:var(--white); cursor:pointer; overflow:clip; text-decoration:none;
/* measured on the live button: variant switch = over-damped spring — fast on hover-in (≈0.35s), slower on hover-out (≈0.7s) */
transition:background-color .7s cubic-bezier(.3,.3,.2,.9);
}
.sec-projects-faq__btn:hover{ background:var(--red); transition-duration:.35s; transition-timing-function:cubic-bezier(.2,.35,.1,.9); }
.sec-projects-faq__btn-txt{ position:relative; z-index:1; display:block; height:12px; overflow:clip; }
.sec-projects-faq__btn-line{
display:block; height:12px; font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
color:var(--white); white-space:pre;
}
.sec-projects-faq__btn-line--b{ position:absolute; left:0; top:0; }
/* Live text effect (measured): on hover every letter jumps 15px up out of the clip instantly, then drops back into place
one letter at a time (≈0.15s ease-out, 30ms stagger); on hover-out they jump 15px below and rise back the same way.
Copy "a" plays the hover-out entrance (from below), copy "b" the hover-in entrance (from above); the other copy jumps. */
.sec-projects-faq__btn-line .c{ display:inline-block; transition:transform .16s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * .03s); }
.sec-projects-faq__btn-line--b .c{ transform:translateY(-15px); transition:none; }
.sec-projects-faq__btn:hover .sec-projects-faq__btn-line--a .c{ transform:translateY(15px); transition:none; }
.sec-projects-faq__btn:hover .sec-projects-faq__btn-line--b .c{ transform:translateY(0); transition:transform .16s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * .03s); }
.sec-projects-faq__btn-icon{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; background:var(--white); pointer-events:none;
-webkit-mask:url("data:image/svg+xml,") no-repeat center/100% 100%;
mask:url("data:image/svg+xml,") no-repeat center/100% 100%;
transition:transform .425s cubic-bezier(.3,.4,.2,.95); /* live: one spring both ways (15% @40ms, 65% @140ms, settled ≈0.45s) */
}
/* live: the plus spins counter-clockwise (−180°) */
.sec-projects-faq__btn:hover .sec-projects-faq__btn-icon{ transform:rotate(-180deg); }
/* ---- right: accordion ---- */
.sec-projects-faq__list{
position:relative; z-index:1;
flex:2 0 0; width:1px; min-width:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:var(--white); list-style:none; margin:0; padding:0;
}
.sec-projects-faq__list::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; border-right-width:1px; pointer-events:none; }
.sec-projects-faq__item{
position:relative; z-index:1; width:100%; list-style:none;
cursor:pointer; overflow:hidden;
}
.sec-projects-faq__item::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-bottom-width:1px; pointer-events:none; z-index:3; }
.sec-projects-faq__item-inner{
position:relative; display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:0;
width:100%; padding:0 46px 0 30px; /* 30 + 16px icon column + 30 */
}
.sec-projects-faq__main{ position:relative; flex:1 0 0; width:1px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:30px 0; }
.sec-projects-faq__item.is-open .sec-projects-faq__main{ padding:40px 0; }
/* block = heading row + body: the unit Framer projects into place when a variant switches */
.sec-projects-faq__block{ position:relative; z-index:2; width:100%; transform-origin:50% 0; }
.sec-projects-faq__head.sec-projects-faq__head--ghost{ position:absolute; top:30px; left:30px; right:46px; width:auto; z-index:3; pointer-events:none; } /* live: heading z 1 above the content (z −1) */
/* opening: the live renders the dropping row in the "Active" variant's closed-heading style from the first frame (measured: question
18px/500 lh 0.9em sentence-case in a 16.2px box, number h3 14px/500 lh 0.8em in a 10px-rounded 32×32 box, tag = 20px pill,
DM Sans 12px lh 1.4em ls −.05em with a DM Sans 700 bold run) */
.sec-projects-faq__head--ghost-open .sec-projects-faq__q{ font-size:18px; font-weight:500; line-height:16.2px; letter-spacing:-.04em; text-transform:none; }
.sec-projects-faq__head--ghost-open .sec-projects-faq__num{ border-radius:10px; overflow:visible; }
.sec-projects-faq__head--ghost-open .sec-projects-faq__num-txt{ font-size:14px; font-weight:500; line-height:11.2px; letter-spacing:-.04em; }
.sec-projects-faq__head--ghost-open .sec-projects-faq__num-txt--b{ display:none; }
.sec-projects-faq__head--ghost-open .sec-projects-faq__tag{ border-radius:20px; font-weight:400; line-height:16.8px; letter-spacing:-.05em; }
.sec-projects-faq__head--ghost-open .sec-projects-faq__tag strong{ font-family:var(--font-sans); font-weight:700; }
/* heading row: number box + question + (empty) tag */
.sec-projects-faq__head{
position:relative; z-index:1; display:flex; flex-direction:row; align-items:center; justify-content:space-between;
width:100%; height:32px; padding:0 10px 0 0; margin:0; border:0; background:none; color:inherit; cursor:pointer; text-align:left; font:inherit;
}
.sec-projects-faq__num{
position:relative; flex:none; display:flex; align-items:center; justify-content:center;
width:32px; height:32px; background:var(--black-05); overflow:clip;
}
.sec-projects-faq__num-txt{
display:block; white-space:pre;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
/* live layout spring, rAF-measured from the hover (both ways, ≈45ms event latency excluded): 0.7% @13ms, 5.7% @63, 19% @113,
51% @163, 80% @213, 93% @263, done ≈360ms → sampled linear() curve */
transition:transform .36s linear(0, .007 3.6%, .057 17.5%, .19 31.4%, .507 45.3%, .8 59.2%, .927 73%, .98 86%, 1);
}
.sec-projects-faq__num-txt--b{ position:absolute; top:-20px; left:50%; transform:translate(-50%,0); }
/* Framer "hover" variant of the closed item: visible number drops to bottom:-20px, the duplicate comes in from top:-20px (both +30px) */
.sec-projects-faq__item:not(.is-open):hover .sec-projects-faq__num-txt--a{ transform:translateY(30px); }
.sec-projects-faq__item:not(.is-open):hover .sec-projects-faq__num-txt--b{ transform:translate(-50%,30px); }
.sec-projects-faq__q{
flex:1 0 0; width:1px; min-width:0; margin-left:15px;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
white-space:pre-wrap; word-break:break-word;
}
/* tag pill (square corners): empty 30×12 box, or "Frequently asked" (black-05) / "Important" (red) — 12px/600 lh 13.2 ls -.06em, bold run in Inter 700 */
.sec-projects-faq__tag{
position:relative; z-index:1; flex:none; display:flex; align-items:center; justify-content:center; gap:10px;
width:max-content; min-width:30px; padding:6px 15px; overflow:hidden; /* empty tag = 30×12 box (padding only), like the live */
font-size:12px; font-weight:600; line-height:13.2px; letter-spacing:-.06em; color:var(--black-90); white-space:pre; text-transform:none;
}
.sec-projects-faq__tag-txt{ display:block; white-space:pre; }
.sec-projects-faq__tag strong{ display:inline; font-family:var(--font-inter); font-weight:700; } /* live: the bold run is Inter 700 inside a DM Sans line (line box 14.2px) */
.sec-projects-faq__tag--grey{ background:var(--black-05); }
.sec-projects-faq__tag--red{ background:var(--red); color:var(--white); }
/* body (answer + media) */
.sec-projects-faq__body{ display:none; width:100%; padding-top:30px; }
.sec-projects-faq__item.is-open .sec-projects-faq__body{ display:block; }
.sec-projects-faq__answer{
width:100%; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70); text-align:left;
white-space:pre-wrap; word-break:break-word;
}
.sec-projects-faq__media{ position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0; width:100%; margin-top:30px; overflow:hidden; }
.sec-projects-faq__img{ position:relative; flex:1 0 0; width:1px; height:259px; overflow:hidden; }
.sec-projects-faq__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-projects-faq__corner{
position:absolute; top:-1px; left:-1px; z-index:2; width:63px; height:63px; pointer-events:none;
background:url("data:image/svg+xml,") 0 0/100% 100% no-repeat;
transform:rotate(-90deg); transform-origin:50% 50%;
}
/* toggle icon (+ → × when open): 16×16 at right:30px; y = 38 closed (centred in 92) / 40 open */
.sec-projects-faq__toggle{ position:absolute; top:38px; right:30px; z-index:2; display:flex; align-items:center; justify-content:center; width:16px; height:16px; overflow:hidden;
transition:top .4s cubic-bezier(.22,1,.36,1), transform .36s linear(0, .007 3.6%, .057 17.5%, .19 31.4%, .507 45.3%, .8 59.2%, .927 73%, .98 86%, 1); }
/* QA (rAF-measured on the live): hovering a CLOSED item spins the whole 16px icon container +180° (clockwise: 1.5° @60ms, 16° @127,
68° @193, 130° @242, 162° @293, 180° @≈400) on the same hover spring as the number slide, and back (−180°) on mouse-out.
Clicking the hovered item open un-spins it on the accordion's open spring — driven by Motion in 23-projects-faq.js (inline
transform, transition:none) so it shares the height's clock; closing while hovered re-spins it on the hover curve above. */
.sec-projects-faq__item:not(.is-open):hover .sec-projects-faq__toggle{ transform:rotate(180deg); }
.sec-projects-faq__item.is-open .sec-projects-faq__toggle{ top:40px; }
/* live: the + rotates to × on a pure exponential (τ≈250ms, 1° @22ms, 13° @105ms, 24° @205ms, 36° @404ms), starting at the click
together with the height spring, and back the same way → one transition both ways */
.sec-projects-faq__plus{ display:block; width:16px; height:16px; color:var(--black); transform:rotate(0deg); transition:transform 1.46s cubic-bezier(.16,.96,.36,.98) .03s; } /* QA: live's × → + starts ≈30ms after the click (39° @66ms vs the clone's 39° @34ms) */
.sec-projects-faq__plus svg{ display:block; width:16px; height:16px; overflow:hidden; }
.sec-projects-faq__item.is-open .sec-projects-faq__plus{ transform:rotate(45deg); transition-delay:0s; }
.sec-projects-faq.is-static .sec-projects-faq__toggle, .sec-projects-faq.is-static .sec-projects-faq__plus, .sec-projects-faq.is-static .sec-projects-faq__num-txt, .sec-projects-faq.is-static .sec-projects-faq__btn, .sec-projects-faq.is-static .sec-projects-faq__btn-icon, .sec-projects-faq.is-static .sec-projects-faq__btn-line .c{ transition:none; }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-projects-faq{ padding:200px 0; }
.sec-projects-faq__content{ max-width:var(--container-max); margin:0 auto; }
.sec-projects-faq__cols{ right:auto; left:50%; width:100%; max-width:var(--container-max); transform:translateX(-50%); padding:0; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-projects-faq{ padding:100px 40px; }
.sec-projects-faq__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-projects-faq__col--3{ display:none; }
.sec-projects-faq__content{ flex-direction:column; gap:50px; }
.sec-projects-faq__heading{ position:relative; top:auto; flex:none; flex-direction:row; gap:0; width:100%; }
.sec-projects-faq__intro{ flex:1 0 0; width:1px; }
.sec-projects-faq__cta{ flex:1 0 0; width:1px; }
.sec-projects-faq__list{ flex:none; width:100%; }
.sec-projects-faq__list::after{ border-left-width:1px; }
.sec-projects-faq__cta-text{ gap:0; }
}
@media (max-width:809.98px){
.sec-projects-faq{ padding:50px 20px 100px; }
.sec-projects-faq__cols{ grid-template-columns:1fr; padding:0 20px; }
.sec-projects-faq__col--2,.sec-projects-faq__col--3{ display:none; }
.sec-projects-faq__content{ flex-direction:column; gap:70px; }
.sec-projects-faq__heading{ position:relative; top:auto; flex:none; gap:50px; width:100%; }
.sec-projects-faq__list{ flex:none; width:100%; }
.sec-projects-faq__list::after{ border-left-width:1px; }
.sec-projects-faq__title{ font-size:50px; line-height:45px; }
.sec-projects-faq__lead p,.sec-projects-faq__cta-sub{ white-space:pre-wrap; }
.sec-projects-faq__btn-wrap,.sec-projects-faq__btn{ width:100%; }
.sec-projects-faq__item-inner{ padding:0 20px; }
.sec-projects-faq__toggle{ right:20px; }
.sec-projects-faq__media{ flex-direction:column; align-items:flex-start; }
.sec-projects-faq__img{ flex:none; width:100%; height:150px; }
.sec-projects-faq__cta-text{ gap:0; }
}
/* ==== css/sections/24-blog-list.css ==== */
/* ==========================================================================
24 — Blog index ("Blog Insights" title + 7 post cards) 2396px @1440
Measured from neiden.framer.media/blog (dom.json):
Title (white, z2): padding-top 300, label (14) + 40 + h2 100/.8 (80) + 40 + desc 2×22.4, then 150px gap,
"All categories" / "Search on site" row 40px → 708.8. Content (z2, grey rgba(0,0,0,.05)): padding 100/40,
grid 3 cols (453.3) with 1px top rule: featured 1360×500 (image span 2, content col 3, padding 40/40/60),
then 6 cards 453.3×493.6 (image 350 + content 30/30/40). Hairline columns behind everything.
========================================================================== */
.sec-blog-list{
--bl-ease: cubic-bezier(.7,.1,.15,1); /* hover-in curve fitted on live rAF samples (layout + fades together, 0.57s, max err <0.01) */
--bl-dur: .57s;
--bl-fade: .57s;
--bl-ease-out: cubic-bezier(.7,.1,.15,1); /* hover-out: same curve, 0.55-0.60s on the live site */
--bl-dur-out: .57s;
position:relative; z-index:1; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:var(--black-05); color:var(--black); font-family:var(--font-sans);
overflow:hidden;
}
/* ---- hairline columns (section-wide + inside the white title block) ---- */
.sec-blog-list__cols{
position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; max-width:var(--container-max); padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center; overflow:clip; pointer-events:none;
}
@media (min-width:1620px){ .sec-blog-list__cols{ left:calc(50% - var(--container-max)/2); padding:0; } }
.sec-blog-list__col{ position:relative; height:100%; overflow:clip; }
.sec-blog-list__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-blog-list__col--1::after{ border-left-width:1px; }
/* ---- Title block ---- */
.sec-blog-list__title{
position:relative; z-index:2; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:150px;
padding:300px 0 0; background:var(--white); overflow:clip;
}
.sec-blog-list__tinner{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:flex; flex-direction:column; align-items:flex-start; gap:40px; padding:0 var(--page-pad);
}
.sec-blog-list__row{ position:relative; width:100%; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); gap:0; }
.sec-blog-list__spacer{ position:relative; min-height:14px; overflow:clip; }
.sec-blog-list__counter{ display:flex; align-items:center; gap:10px; width:100%; min-width:0; }
.sec-blog-list__tag{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); }
.sec-blog-list__icons{ display:flex; align-items:center; flex:none; width:40px; height:14px; color:var(--red); }
.sec-blog-list__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-blog-list__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-blog-list__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-blog-list__label-part--btn{ cursor:pointer; }
.sec-blog-list__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-blog-list__htext{ grid-column:2 / span 2; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; }
.sec-blog-list__h2{ width:100%; white-space:pre-wrap; word-break:break-word; color:var(--black); }
.sec-blog-list__word{ display:inline-block; }
.sec-blog-list__desc{ grid-column:2; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; width:100%; }
.sec-blog-list__desc p{ width:100%; white-space:pre; text-align:left; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70); }
/* categories + search row */
.sec-blog-list__tools{
position:relative; z-index:1; width:100%; max-width:var(--container-max); height:40px; padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); gap:0; overflow:clip;
}
.sec-blog-list__sorter{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:40px; background:var(--grey-f2); }
.sec-blog-list__sorter-btn{
display:flex; align-items:center; justify-content:space-between; width:100%; height:40px; padding:0 30px 0 40px;
background:var(--grey-f2); color:var(--black); cursor:pointer; text-align:left;
}
.sec-blog-list__sorter-label{ display:block; white-space:pre; color:var(--black); }
.sec-blog-list__chevron{ display:block; flex:none; width:22px; height:22px; color:var(--black); }
.sec-blog-list__spacer--tools{ min-height:0; height:25px; align-self:start; }
.sec-blog-list__search{ position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; height:40px; padding:0 30px; }
.sec-blog-list__search-in{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:40px; margin:0; }
.sec-blog-list__search-input{
display:block; width:100%; height:100%; padding:0 28px 0 0; margin:0; outline:none; border:0; border-radius:0;
background:var(--white); color:var(--black);
font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:-.02em; line-height:normal;
}
.sec-blog-list__search-input::placeholder{ color:var(--black); opacity:1; }
.sec-blog-list__search-ico{ position:absolute; top:0; bottom:0; right:0; z-index:1; display:flex; align-items:center; justify-content:center; width:15px; height:15px; margin:auto 0; color:var(--black); pointer-events:none; }
.sec-blog-list__search-ico svg{ display:block; width:15px; height:15px; }
/* "✕" clear button: appears once the field has a value (live: absolute, right 20px, padding 0 4px, opacity .6, 12px sans-serif) */
.sec-blog-list__search-clear{
position:absolute; top:0; bottom:0; right:20px; z-index:1; display:flex; align-items:center; justify-content:center;
margin:auto 0; padding:0 4px; border:0; background:none; color:var(--black); opacity:.6; cursor:pointer;
font-family:sans-serif; font-size:12px; line-height:normal; -webkit-appearance:none; appearance:none;
}
.sec-blog-list__search-clear[hidden]{ display:none; }
/* ---- category panel (anchored between the title block and the content, above both: z 11).
Live: fades in (~.2s ease-out, sampled 0.08→1 on the panel root) flush under the trigger, or flush ABOVE it (bottom edge on the
trigger top, y 416.8 at scroll 0) when 252px do not fit below in the viewport — the JS toggles .is-up; the shadow always points down. ---- */
.sec-blog-list__menu-anchor{ position:relative; z-index:11; width:100%; max-width:var(--container-max); height:0; overflow:visible; }
.sec-blog-list__menu{
position:absolute; top:0; left:var(--page-pad); z-index:11; display:none; flex-direction:column; gap:0;
width:517px; max-width:calc(100% - 2*var(--page-pad)); margin:0; padding:0;
background:var(--white); box-shadow:rgba(0,0,0,.05) 0 10px 20px 0; overflow:clip;
}
.sec-blog-list.is-open .sec-blog-list__menu{ display:flex; animation:sec-blog-list-fade .2s ease-out both; }
@keyframes sec-blog-list-fade{ from{ opacity:0; } to{ opacity:1; } }
.sec-blog-list__menu.is-up{ top:auto; bottom:40px; }
.sec-blog-list__menu-group{ display:flex; flex-direction:column; gap:0; }
.sec-blog-list__menu-item{
display:block; width:100%; height:36px; margin:0; padding:10px 20px; border:0; border-radius:0;
background:var(--white); color:var(--black); cursor:pointer; user-select:none; white-space:nowrap; text-align:start;
font-family:var(--font-sans); font-size:12px; font-weight:600; font-style:normal; line-height:normal; letter-spacing:normal; text-transform:uppercase;
font-feature-settings:normal; transition:background .2s; -webkit-appearance:none; appearance:none;
}
.sec-blog-list__menu-item:hover{ background:var(--grey-f2); }
.sec-blog-list__menu-item:focus-visible{ outline:1px solid var(--black-40); outline-offset:-1px; }
.sec-blog-list__sorter-btn:focus-visible{ outline:1px solid var(--black-40); outline-offset:-1px; }
/* ---- Content ---- */
.sec-blog-list__content{
position:relative; z-index:2; width:100%; max-width:var(--container-max);
display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:100px var(--page-pad);
}
.sec-blog-list__grid{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:min-content; justify-content:center; gap:0;
}
.sec-blog-list__grid::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; pointer-events:none; }
/* ---- Card (link) ---- */
.sec-blog-list__card{
position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:30px;
width:100%; min-width:0; color:var(--black); cursor:pointer; text-decoration:none;
}
.sec-blog-list__card--featured{ grid-column:span 3; align-items:flex-start; align-content:flex-start; justify-self:center; gap:0; }
/* category list of the CMS item: sits behind the image on the live site (z-index -1), never visible */
.sec-blog-list__tags{ position:absolute; top:0; left:0; z-index:-1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; visibility:hidden; pointer-events:none; }
.sec-blog-list__tags li{ white-space:pre; font-size:16px; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70); }
.sec-blog-list__post{ position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; width:100%; overflow:hidden; }
.sec-blog-list__media{ position:relative; display:flex; align-items:flex-start; justify-content:flex-start; gap:10px; width:100%; }
.sec-blog-list__imgbox{
position:relative; z-index:2; flex:1 0 0; min-width:0; height:350px; overflow:hidden;
display:flex; align-items:flex-start; justify-content:center;
transition:height var(--bl-dur-out) var(--bl-ease-out);
}
.sec-blog-list__img{ position:absolute; z-index:1; top:calc(50% - 175px); left:0; width:100%; height:350px; overflow:hidden; }
.sec-blog-list__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-blog-list__body{
position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
width:100%; padding:30px 30px 40px; border-radius:10px; overflow:hidden;
}
.sec-blog-list__inner{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; }
/* meta row is absolutely placed (like the hover variant) and the 32px it occupies is padding that collapses on hover */
.sec-blog-list__main{
position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; width:100%; padding-top:32px;
transition:padding-top var(--bl-dur-out) var(--bl-ease-out);
}
.sec-blog-list__meta{
position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; gap:10px; width:100%; height:12px;
transition:top var(--bl-dur-out) var(--bl-ease-out), opacity var(--bl-dur-out) var(--bl-ease-out);
}
.sec-blog-list__date,.sec-blog-list__read{
white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-blog-list__date{ color:var(--black-50); }
.sec-blog-list__read{ color:var(--black); }
.sec-blog-list__dot{ display:block; flex:none; width:4px; height:4px; border-radius:7px; background:var(--black-30); }
.sec-blog-list__ttl{ display:flex; align-items:flex-start; gap:10px; width:70%; overflow:hidden; }
.sec-blog-list__ttl p{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:100%; overflow:clip;
white-space:pre-line; word-break:break-word; overflow-wrap:break-word;
font-size:16px; font-weight:700; line-height:1.3em; letter-spacing:-.05em; color:var(--black);
}
.sec-blog-list__more-wrap{ display:grid; grid-template-rows:0fr; width:100%; padding-top:0; transition:grid-template-rows var(--bl-dur-out) var(--bl-ease-out), padding-top var(--bl-dur-out) var(--bl-ease-out); }
.sec-blog-list__more{
position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; min-height:0;
opacity:0; filter:blur(8px);
transition:opacity var(--bl-dur-out) var(--bl-ease-out), filter var(--bl-dur-out) var(--bl-ease-out);
}
.sec-blog-list__excerpt{ display:flex; flex-direction:column; align-items:flex-start; gap:70px; width:100%; overflow:hidden; }
.sec-blog-list__excerpt p{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:100%; overflow:clip;
white-space:pre-line; word-break:break-word; overflow-wrap:break-word; text-align:left;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70);
}
.sec-blog-list__author{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.sec-blog-list__by{ display:flex; align-items:center; gap:10px; }
.sec-blog-list__avatar{ position:relative; flex:none; width:40px; height:40px; aspect-ratio:1; border-radius:25px; overflow:hidden; }
.sec-blog-list__avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.sec-blog-list__who{ display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; }
.sec-blog-list__kind{ display:flex; align-items:center; justify-content:center; gap:3px; }
.sec-blog-list__kind p{ white-space:pre; font-size:14px; font-weight:400; line-height:1.5em; letter-spacing:-.04em; color:var(--black); }
.sec-blog-list__kind-dim{ color:var(--black-50) !important; }
.sec-blog-list__name{
white-space:pre; font-size:14px; font-weight:600; line-height:1.4em; letter-spacing:-.04em; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
/* hover (small cards): image box collapses to 247px, meta fades out while sliding 20px above the title (no blur on the live site),
excerpt + author fade/unblur in; every property runs on the same curve with no delay (measured on live rAF samples) */
.sec-blog-list__card:not(.sec-blog-list__card--featured):hover .sec-blog-list__imgbox{ height:247px; transition:height var(--bl-dur) var(--bl-ease); }
.sec-blog-list__card:not(.sec-blog-list__card--featured):hover .sec-blog-list__main{ padding-top:0; transition:padding-top var(--bl-dur) var(--bl-ease); }
.sec-blog-list__card:not(.sec-blog-list__card--featured):hover .sec-blog-list__meta{
top:-20px; opacity:0;
transition:top var(--bl-dur) var(--bl-ease), opacity var(--bl-fade) var(--bl-ease);
}
.sec-blog-list__card:not(.sec-blog-list__card--featured):hover .sec-blog-list__more-wrap{ grid-template-rows:1fr; padding-top:20px; transition:grid-template-rows var(--bl-dur) var(--bl-ease), padding-top var(--bl-dur) var(--bl-ease); }
.sec-blog-list__card:not(.sec-blog-list__card--featured):hover .sec-blog-list__more{
z-index:1; opacity:1; filter:blur(0);
transition:opacity var(--bl-fade) var(--bl-ease), filter var(--bl-fade) var(--bl-ease);
}
/* filtered out by the category panel / search */
.sec-blog-list__card[hidden]{ display:none; }
/* ---- Featured card (image spans 2 columns, content in column 3, everything visible, no hover change) ---- */
.sec-blog-list__card--featured .sec-blog-list__post{
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr);
justify-content:center; align-items:stretch; width:100%; height:500px; overflow:hidden;
}
.sec-blog-list__card--featured .sec-blog-list__media{ grid-column:span 2; align-self:start; align-items:center; justify-content:center; gap:0; height:500px; overflow:hidden; }
.sec-blog-list__card--featured .sec-blog-list__imgbox{ height:100%; transition:none; }
.sec-blog-list__card--featured .sec-blog-list__img{ top:0; bottom:0; height:auto; }
/* featured hover: the image scales to 1.1 (measured: 1 → 1.1 in ~0.6s, same curve as the small-card hover) */
.sec-blog-list__card--featured .sec-blog-list__img img{ transition:transform var(--bl-dur-out) var(--bl-ease-out); will-change:transform; }
.sec-blog-list__card--featured:hover .sec-blog-list__img img{ transform:scale(1.1); transition:transform var(--bl-dur) var(--bl-ease); }
.sec-blog-list__card--featured .sec-blog-list__body{ flex-direction:row; align-self:start; height:100%; padding:40px 40px 60px; }
.sec-blog-list__card--featured .sec-blog-list__inner{ justify-content:space-between; height:100%; }
.sec-blog-list__card--featured .sec-blog-list__main{ gap:20px; padding-top:0; transition:none; }
.sec-blog-list__card--featured .sec-blog-list__meta{ position:relative; transition:none; }
.sec-blog-list__card--featured .sec-blog-list__ttl{ width:100%; }
.sec-blog-list__card--featured .sec-blog-list__ttl p{ font-size:30px; font-weight:600; line-height:1.2em; letter-spacing:-.04em; }
.sec-blog-list__card--featured .sec-blog-list__more-wrap{ display:block; padding-top:0; transition:none; }
.sec-blog-list__card--featured .sec-blog-list__more{ z-index:1; align-items:flex-start; justify-content:flex-start; opacity:1; filter:none; transition:none; }
.sec-blog-list__card--featured .sec-blog-list__excerpt p{ display:block; white-space:pre-wrap; -webkit-line-clamp:unset; }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-blog-list__tinner,.sec-blog-list__tools{ padding:0; }
.sec-blog-list__menu{ left:0; max-width:100%; }
.sec-blog-list__content{ padding:100px 0 0; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-blog-list__title{ gap:100px; padding:150px 0 0; }
.sec-blog-list__tinner{ gap:30px; }
.sec-blog-list__row,.sec-blog-list__tools,.sec-blog-list__grid,.sec-blog-list__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-blog-list__col:nth-child(3),.sec-blog-list__spacer--tools{ display:none; }
.sec-blog-list__htext{ grid-column:2; }
.sec-blog-list__desc{ grid-column:2; }
.sec-blog-list__search{ padding:0 30px; }
.sec-blog-list__content{ padding:100px var(--page-pad) 50px; }
.sec-blog-list__card--featured{ grid-column:span 2; }
.sec-blog-list__card--featured .sec-blog-list__post{ display:flex; flex-direction:column; height:auto; }
.sec-blog-list__card--featured .sec-blog-list__media{ height:400px; }
.sec-blog-list__card--featured .sec-blog-list__body{ height:auto; }
}
@media (max-width:809.98px){
.sec-blog-list__title{ gap:70px; padding:150px 0 0; }
.sec-blog-list__tinner{ gap:30px; }
.sec-blog-list__row{ display:flex; flex-direction:column; }
.sec-blog-list__spacer{ display:none; }
.sec-blog-list__h2{ font-size:60px; white-space:pre; }
.sec-blog-list__desc p{ white-space:pre-wrap; }
.sec-blog-list__tools{ display:flex; align-items:center; }
.sec-blog-list__search,.sec-blog-list__spacer--tools{ display:none; }
.sec-blog-list__sorter-btn{ padding:0 20px; }
.sec-blog-list__cols,.sec-blog-list__grid{ grid-template-columns:minmax(50px,1fr); }
.sec-blog-list__col:nth-child(2),.sec-blog-list__col:nth-child(3){ display:none; }
.sec-blog-list__content{ padding:100px var(--page-pad) 50px; }
.sec-blog-list__card--featured{ grid-column:span 1; }
.sec-blog-list__card--featured .sec-blog-list__post{ display:flex; flex-direction:column; height:auto; }
.sec-blog-list__card--featured .sec-blog-list__media{ height:250px; }
.sec-blog-list__card--featured .sec-blog-list__body{ height:auto; padding:20px 20px 50px; }
}
/* ==== css/sections/25-career-title.css ==== */
/* ==========================================================================
25 — Career page: Title block ("[ ND® ‒ CAREER / 採用情報 ]" · "Careers at Neiden" · subtitle · "5 open vacancies")
Measured on neiden.framer.media/career at 1440×900 (breakpoint 1200–1619).
Section = 300px top padding + title wrapper (14 + 40 + 80 + 40 + 44.8 = 218.8) + 150px gap + 40px badge = 708.8px
========================================================================== */
.sec-career-title{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; padding:300px 0 0; gap:150px;
background:var(--white); color:var(--black);
overflow:clip;
font-family:var(--font-sans);
}
/* ---- hairline column grid (absolute, full height) ---- */
.sec-career-title__cols{
position:absolute; top:0; left:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center;
width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad);
overflow:clip; pointer-events:none;
}
.sec-career-title__col{ position:relative; height:100%; border:0 solid var(--line-light); border-right-width:1px; }
.sec-career-title__col--1{ border-left-width:1px; }
/* ---- Title wrapper ---- */
.sec-career-title__wrap{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:flex-start; gap:40px;
width:100%; padding:0 var(--page-pad);
}
.sec-career-title__row{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center;
}
.sec-career-title__spacer{ position:relative; display:flex; align-items:center; justify-content:center; min-height:14px; overflow:clip; align-self:start; }
/* counter label */
.sec-career-title__counter{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:14px; align-self:start; }
.sec-career-title__counter-inner{ position:relative; display:flex; align-items:center; gap:15px; width:max-content; height:14px; }
.sec-career-title__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-career-title__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-career-title__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-career-title__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-career-title__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-career-title__label-part--ptr{ cursor:pointer; } /* live: cursor:pointer, no hover state, no link */
/* big title (h2, 100px/0.8, -0.08em) — spans columns 2–3, words revealed one by one */
.sec-career-title__title{
grid-column:span 2; align-self:start;
width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:100px; font-weight:600; line-height:.8em; letter-spacing:-.08em; color:var(--black);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-career-title__word{ display:inline-block; will-change:transform,opacity; }
/* subtitle (16px/1.4, -0.05em, 70% black) — column 2 only at 1200–1619 */
.sec-career-title__sub{ position:relative; width:100%; align-self:start; }
.sec-career-title__sub-line{
display:block; margin:0; white-space:pre;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; text-align:left; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-career-title__sub-line--wide,.sec-career-title__sub-line--narrow{ display:none; }
/* ---- Badge row ---- */
.sec-career-title__badge-row{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center;
padding:0 var(--page-pad); overflow:clip;
}
.sec-career-title__badge{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
width:100%; height:40px; align-self:start; background:var(--grey-f2);
}
.sec-career-title__badge-text{
position:relative; z-index:1; white-space:pre; margin:0;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-career-title__wrap{ max-width:var(--container-max); padding:0; gap:50px; }
.sec-career-title__cols,.sec-career-title__badge-row{ padding:0; }
.sec-career-title__cols{ left:50%; transform:translateX(-50%); }
.sec-career-title__sub{ grid-column:span 2; word-break:break-word; } /* pre-wrap only on the visible (container newlines must not render) */
.sec-career-title__sub-line--desktop,.sec-career-title__sub-line--narrow{ display:none; }
.sec-career-title__sub-line--wide{ display:block; white-space:pre-wrap; }
.sec-career-title__title{ font-size:130px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-career-title{ gap:100px; padding:150px var(--page-pad) 0; }
.sec-career-title__wrap{ gap:30px; padding:0; }
.sec-career-title__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-career-title__col:nth-child(3){ display:none; }
.sec-career-title__row,.sec-career-title__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-career-title__badge-row{ padding:0; }
.sec-career-title__spacer{ display:none; } /* live: column-1 spacers hidden on tablet + phone → content starts in column 1 */
.sec-career-title__title{ font-size:80px; }
.sec-career-title__sub-line{ font-size:15px; } /* live preset: 15px at 810–1199 */
.sec-career-title__sub{ grid-column:span 2; word-break:break-word; } /* pre-wrap only on the visible (container newlines must not render) */
.sec-career-title__sub-line--desktop,.sec-career-title__sub-line--narrow{ display:none; }
.sec-career-title__sub-line--wide{ display:block; white-space:pre-wrap; }
}
@media (max-width:809.98px){
.sec-career-title{ gap:70px; padding:150px var(--page-pad) 0; }
.sec-career-title__wrap{ gap:30px; padding:0; }
.sec-career-title__cols{ grid-template-columns:1fr; }
.sec-career-title__col:nth-child(2),.sec-career-title__col:nth-child(3){ display:none; }
.sec-career-title__row,.sec-career-title__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-career-title__badge-row{ grid-template-columns:1fr; padding:0; }
.sec-career-title__spacer{ display:none; }
.sec-career-title__title{ grid-column:span 2; font-size:60px; }
.sec-career-title__sub-line{ font-size:15px; } /* live preset: 15px below 810 */
.sec-career-title__sub{ grid-column:span 2; word-break:break-word; } /* pre-wrap only on the visible (container newlines must not render) */
.sec-career-title__sub-line--desktop,.sec-career-title__sub-line--wide{ display:none; }
.sec-career-title__sub-line--narrow{ display:block; white-space:pre-wrap; }
}
/* ==== css/sections/26-career-jobs.css ==== */
/* ==========================================================================
26 — Career page: "Career" section ("[ ND® ‒ STEPS / 構想から公開へ ]" · "Current Openings" · 4 open positions)
Measured on neiden.framer.media/career at 1440×900 (breakpoint 1200–1619).
Section = 150 top padding + 4 rows × 440 (= 1760) + 150 bottom padding = 2060px, bg rgba(0,0,0,.05)
Grid: 3 columns (453.33px) — column 1 = sticky heading block (top:150px), columns 2–3 = job rows
Row = 2-column grid: media cell 460px tall (overlaps/clipped by the next row → 440 visible) | text cell padding 40
========================================================================== */
.sec-career-jobs{
position:relative; z-index:0;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
width:100%; padding:0 var(--page-pad);
background:var(--black-05); color:var(--black);
font-family:var(--font-sans);
}
/* ---- hairline column grid (absolute, full height; col 1: left + right lines, cols 2/3: right line) ---- */
.sec-career-jobs__cols{
position:absolute; top:0; left:calc(50% - min(var(--container-max),100%) / 2); z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center;
width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad);
overflow:clip; pointer-events:none;
}
.sec-career-jobs__col{ position:relative; height:100%; border:0 solid var(--line-light); border-right-width:1px; }
.sec-career-jobs__col--1{ border-left-width:1px; }
/* ---- content grid ---- */
.sec-career-jobs__grid{
position:relative; z-index:1;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:repeat(1,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr);
justify-content:center; gap:0;
width:100%; max-width:var(--container-max); padding:150px 0;
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-career-jobs__grid{ max-width:none; } }
/* ---- Heading block (column 1) ---- */
.sec-career-jobs__head{
position:relative; place-self:start; width:100%; height:100%;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start; align-content:center; gap:10px;
overflow:clip;
}
.sec-career-jobs__sticky{
position:sticky; top:150px; z-index:1;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px;
width:100%;
}
/* counter label: 5 red bars (40×14) + [ ND® ‒ STEPS / 構想から公開へ ] (14px/14 600 −.04em; jp 500 40% black) */
.sec-career-jobs__label{ position:relative; display:flex; align-items:center; gap:15px; width:max-content; height:14px; will-change:transform,opacity; }
.sec-career-jobs__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-career-jobs__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-career-jobs__label-text{ display:flex; align-items:flex-end; justify-content:center; gap:2px; height:14px; }
.sec-career-jobs__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-career-jobs__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-career-jobs__label-part--ptr{ cursor:pointer; } /* live: cursor:pointer, no hover state, no link */
/* title h3 70px/63px 600 −.06em — two words revealed one after the other (y 20 → 0, spring .6s, delay 1.2 / 1.4) */
.sec-career-jobs__title{
position:relative; width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:70px; font-weight:600; line-height:63px; letter-spacing:-.06em; color:var(--black);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-career-jobs__word{ display:inline-block; will-change:transform,opacity; }
.sec-career-jobs__ch{ display:inline-block; } /* live: every letter is its own inline-block (no kerning) */
/* subtitle 16px/22.4 400 −.05em 70% black (y 30 → 0, spring 1s, delay 1.3) */
.sec-career-jobs__sub{ position:relative; width:100%; will-change:transform,opacity; }
.sec-career-jobs__sub-text{
margin:0; white-space:pre-wrap; word-break:break-word; text-align:left;
font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
/* ---- Career items (columns 2–3) ---- */
.sec-career-jobs__list{
position:relative; grid-column:span 2; place-self:start;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0;
width:100%; overflow:clip;
}
.sec-career-jobs__item{ position:relative; width:100%; height:440px; }
.sec-career-jobs__card{
position:relative; width:100%; height:100%;
display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); grid-template-rows:repeat(1,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr);
justify-content:center; gap:0;
}
/* 1px top + bottom rules (Framer data-border ::after) */
.sec-career-jobs__card::after{
content:""; position:absolute; top:0; left:0; width:100%; height:100%;
border:0 solid var(--line-light); border-top-width:1px; border-bottom-width:1px;
box-sizing:border-box; pointer-events:none;
}
/* media cell: 460px tall, clipped; image/video scale 1.7 → 1 on enter (1.5s), 20% black shade, animated grain */
.sec-career-jobs__media{ position:relative; place-self:start; width:100%; height:460px; padding:0 40px; overflow:clip; }
.sec-career-jobs__img,.sec-career-jobs__video{
position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:clip; will-change:transform;
}
.sec-career-jobs__img img,.sec-career-jobs__video video{ display:block; width:100%; height:100%; object-fit:cover; }
.sec-career-jobs__shade{ position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:var(--black-20); overflow:clip; pointer-events:none; }
.sec-career-jobs__grain{ position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.sec-career-jobs__grain i{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.15; mix-blend-mode:overlay; will-change:transform;
animation:sec-career-jobs-grain .6s steps(1) infinite; /* live: the grain jumps to a random offset (±10%) every ~60ms, scale 1.2 */
}
@keyframes sec-career-jobs-grain{
0%{ transform:translate(9%,-9.1%) scale(1.2); } 12.5%{ transform:translate(6%,-6.1%) scale(1.2); } 25%{ transform:translate(-1.25%,1.25%) scale(1.2); }
37.5%{ transform:translate(-8.75%,8.9%) scale(1.2); } 50%{ transform:translate(2%,-2%) scale(1.2); } 62.5%{ transform:translate(9.5%,-9.6%) scale(1.2); }
75%{ transform:translate(-6.25%,6.35%) scale(1.2); } 87.5%{ transform:translate(-4%,4.05%) scale(1.2); } 100%{ transform:translate(9%,-9.1%) scale(1.2); }
}
/* cut corner (row 1 only): 63×63 triangle in the section grey */
.sec-career-jobs__corner{ position:absolute; top:0; left:0; z-index:2; display:flex; align-items:center; justify-content:center; width:63px; height:63px; overflow:clip; pointer-events:none; }
.sec-career-jobs__corner svg{ display:block; width:63px; height:63px; }
/* text cell */
.sec-career-jobs__body{
position:relative; place-self:start; width:100%; height:100%; padding:40px;
display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
}
.sec-career-jobs__info{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; }
.sec-career-jobs__meta{ position:relative; display:flex; align-items:center; justify-content:center; gap:3px; width:max-content; height:14px; overflow:clip; will-change:transform,opacity; }
.sec-career-jobs__num{ display:flex; align-items:center; justify-content:center; gap:3px; width:max-content; }
.sec-career-jobs__num-part,.sec-career-jobs__jp{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-career-jobs__jp{ font-weight:500; color:var(--black-40); }
.sec-career-jobs__text{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; width:100%; }
.sec-career-jobs__role{
position:relative; width:100%; margin:0; white-space:pre-wrap; word-break:break-word; will-change:transform,opacity;
font-size:20px; font-weight:700; line-height:22px; letter-spacing:-.07em; color:var(--black);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-career-jobs__desc{
position:relative; width:100%; margin:0; white-space:pre-wrap; word-break:break-word; text-align:left; will-change:transform,opacity;
font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.05em; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-career-jobs__foot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; width:100%; }
.sec-career-jobs__loc{
position:relative; width:100%; margin:0; white-space:pre-wrap; word-break:break-word; will-change:transform,opacity;
font-size:12px; font-weight:500; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
/* "Apply for role" — Framer "Default button" (60px link clipped to a 40px slot, white → red on hover) */
.sec-career-jobs__btn-wrap{ position:relative; display:flex; align-items:center; width:100%; height:40px; overflow:clip; will-change:transform,opacity; }
.sec-career-jobs__btn{
position:relative; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
width:100%; height:60px; background:var(--white); color:var(--black); cursor:pointer; text-decoration:none; overflow:visible;
/* measured on the live button (rAF-sampled, bezier fitted rms<.006): hover-in white→red .575s, hover-out red→white .425s */
transition:background-color .425s cubic-bezier(.2,.975,.525,.975);
}
.sec-career-jobs__btn:hover{ background:var(--red); transition:background-color .575s cubic-bezier(.35,.65,.325,.975); }
.sec-career-jobs__btn-txt{ position:relative; z-index:1; display:block; height:12px; overflow:clip; }
.sec-career-jobs__btn-line{
display:block; height:12px; white-space:pre;
font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-career-jobs__btn-line--b{ position:absolute; left:0; top:0; color:var(--white); visibility:hidden; }
/* Live (measured): the variant swap replaces the black text with a white copy whose letters drop in from −15px
(80ms per letter, 70% done after 16ms, 30ms stagger); on hover-out the black copy comes back rising from +15px the same way. */
.sec-career-jobs__btn-line .c{ display:inline-block; transition:transform .08s cubic-bezier(.275,.925,.05,.8); transition-delay:calc(var(--i,0) * .03s); }
.sec-career-jobs__btn-line--b .c{ transform:translateY(-15px); transition:none; }
.sec-career-jobs__btn:hover .sec-career-jobs__btn-line--a{ visibility:hidden; }
.sec-career-jobs__btn:hover .sec-career-jobs__btn-line--a .c{ transform:translateY(15px); transition:none; }
.sec-career-jobs__btn:hover .sec-career-jobs__btn-line--b{ visibility:visible; }
.sec-career-jobs__btn:hover .sec-career-jobs__btn-line--b .c{ transform:translateY(0); transition:transform .08s cubic-bezier(.275,.925,.05,.8); transition-delay:calc(var(--i,0) * .03s); }
/* plus icon 20×20 (mask), black → white and spins −180° on hover (measured: rotation .475s both ways, colour .4s in / .7s out) */
.sec-career-jobs__btn-icon{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; background:var(--black); pointer-events:none;
-webkit-mask:url("data:image/svg+xml,") no-repeat center/100% 100%;
mask:url("data:image/svg+xml,") no-repeat center/100% 100%;
transition:transform .475s cubic-bezier(.275,.6,.25,1), background-color .7s cubic-bezier(.225,.35,.225,.95);
}
.sec-career-jobs__btn:hover .sec-career-jobs__btn-icon{ transform:rotate(-180deg); background:var(--white); transition:transform .475s cubic-bezier(.275,.6,.25,1), background-color .4s cubic-bezier(.1,.975,.65,.975); }
/* ---- "EST. 2019" (bottom centre of the section) ---- */
.sec-career-jobs__est{
position:absolute; bottom:30px; left:50%; z-index:1; transform:translateX(-50%); margin:0; white-space:pre;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-career-jobs__est-l{ color:var(--black-50); }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-career-jobs{ padding:0; }
.sec-career-jobs__cols{ padding:0; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-career-jobs__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-career-jobs__col:nth-child(3){ display:none; }
.sec-career-jobs__grid{ display:flex; flex-direction:column; align-items:center; gap:50px; padding:100px 0; }
.sec-career-jobs__head{ height:auto; }
.sec-career-jobs__sticky{ position:relative; top:auto; gap:30px; }
.sec-career-jobs__item{ height:auto; }
.sec-career-jobs__card{ grid-template-columns:repeat(1,minmax(50px,1fr)); grid-template-rows:repeat(1,min-content); grid-auto-rows:min-content; }
.sec-career-jobs__media{ height:270px; }
.sec-career-jobs__body{ height:auto; justify-content:center; gap:50px; padding:30px; }
}
@media (max-width:809.98px){
.sec-career-jobs__cols{ grid-template-columns:1fr; }
.sec-career-jobs__col:nth-child(2),.sec-career-jobs__col:nth-child(3){ display:none; }
.sec-career-jobs__grid{ display:flex; flex-direction:column; align-items:center; gap:50px; padding:100px 0; }
.sec-career-jobs__head{ height:auto; }
.sec-career-jobs__sticky{ position:relative; top:auto; gap:20px; }
.sec-career-jobs__title{ font-size:50px; line-height:45px; }
.sec-career-jobs__item{ height:auto; }
.sec-career-jobs__card{ grid-template-columns:repeat(1,minmax(50px,1fr)); grid-template-rows:repeat(1,min-content); grid-auto-rows:min-content; }
.sec-career-jobs__media{ height:270px; }
.sec-career-jobs__body{ height:auto; justify-content:center; gap:50px; padding:30px; }
}
/* ==== css/sections/27-career-timeline.css ==== */
/* ==========================================================================
27 — Career page: Timeline ("The Hiring Process") — measured on neiden.framer.media/career
at 1440×900 (1200–1619 breakpoint). Dark (#191919) section, 3-column lined grid;
column 1 = heading block (label / 70px title / lead + quote), columns 2–3 = sticky
photo card (413×300, top:150) + 4 hiring steps (315.6px each) with a light (#f2f2f2)
progress line that grows 25% per step as its scroll anchor passes the viewport centre.
Section = 150px top padding + 4 × 315.625 = 1412.5px.
========================================================================== */
.sec-career-timeline{
position:relative; display:flex; justify-content:center; align-items:center; gap:10px;
width:100%; padding:0 var(--page-pad); background:var(--grey-19); color:var(--white);
font-family:var(--font-sans); overflow:clip;
}
.sec-career-timeline__inner{
position:relative; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr));
grid-template-rows:repeat(1,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; gap:0;
width:100%; max-width:var(--container-max); padding:150px 0 0; overflow:clip;
}
/* ---- lined grid ---- */
.sec-career-timeline__grid{
position:absolute; top:0; left:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); gap:0;
width:100%; max-width:1550px; height:100%; overflow:clip; pointer-events:none;
}
.sec-career-timeline__col{ height:100%; border-right:1px solid var(--line-dark); }
.sec-career-timeline__col--first{ border-left:1px solid var(--line-dark); }
/* ---- heading block (column 1): title (14 + 30 + 126 + 30 + 44.8) + 150 gap + quote (35 + 40 + 93.6 + 40 + 60.2) ---- */
.sec-career-timeline__heading{
position:relative; z-index:1; grid-column:1; place-self:start;
display:flex; flex-direction:column; align-items:flex-start; gap:150px; width:100%;
}
.sec-career-timeline__title{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:100%; }
/* label "[ ND® ‒ TIMELINE / 歩みの記録 ]" */
.sec-career-timeline__label{ display:flex; align-items:center; gap:15px; height:14px; }
.sec-career-timeline__label-icons{ display:flex; align-items:center; height:14px; }
.sec-career-timeline__label-icons svg{ display:block; height:14px; flex:none; overflow:visible; }
.sec-career-timeline__label-icons path{ fill:var(--red); }
.sec-career-timeline__label-text{
display:flex; align-items:flex-end; gap:2px;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.56px; text-transform:uppercase; white-space:pre; color:var(--white);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; /* presets 16x0xso / 1x9173r / 1l3oc22 */
}
.sec-career-timeline__label-link{ cursor:pointer; } /* live: plain texts with cursor:pointer, no anchors */
.sec-career-timeline__label-jp{ font-weight:500; color:var(--white-30); }
/* "The Hiring / Process" — preset 1bpv0zn: 70px / 63px / -4.2px, 600 */
.sec-career-timeline__h2{
width:100%; font-size:70px; font-weight:600; line-height:63px; letter-spacing:-4.2px;
color:var(--white); white-space:pre-wrap;
}
.sec-career-timeline__tline{ display:inline-block; } /* title lines: one reveal per line (letters of a line move together on the live site) */
.sec-career-timeline__word{ white-space:nowrap; }
.sec-career-timeline__ch{ display:inline-block; will-change:transform; } /* live split-text letters: separate composited inline-block spans → glyph origins snap to whole pixels ("Hiring" starts at 165.2px: rendered at 165; measured pixel-identical only with this structure) */
.sec-career-timeline__lead{ font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.8px; color:var(--white-30); white-space:pre; }
/* quote */
.sec-career-timeline__quote{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; width:100%; }
.sec-career-timeline__qsym{ display:flex; justify-content:center; align-items:center; gap:10px; height:35px; padding:0 0 0 80px; }
.sec-career-timeline__qsym svg{ display:block; width:44px; height:35px; overflow:visible; }
.sec-career-timeline__qtext{
width:81%; margin:0; font-size:18px; font-weight:700; line-height:23.4px; letter-spacing:-.72px;
color:var(--white); white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word;
}
.sec-career-timeline__author{ position:relative; z-index:1; display:flex; align-items:center; gap:20px; overflow:hidden; }
.sec-career-timeline__avatar{ position:relative; flex:none; width:60px; height:60px; border-radius:60px; overflow:hidden; }
.sec-career-timeline__avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.sec-career-timeline__author-text{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.sec-career-timeline__author-name{ font-size:14px; font-weight:600; line-height:19.6px; letter-spacing:-.56px; color:var(--white); white-space:pre; font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; }
.sec-career-timeline__author-role{ display:flex; align-items:center; gap:3px; font-size:14px; font-weight:400; line-height:21px; letter-spacing:-.56px; color:var(--white-50); white-space:pre; }
/* ---- timeline content (columns 2–3) ---- */
.sec-career-timeline__content{
position:relative; z-index:1; grid-column:span 2; place-self:start;
display:flex; justify-content:center; align-items:center; gap:10px; width:100%; overflow:clip;
}
.sec-career-timeline__anchor{ position:absolute; left:0; z-index:-1; width:100%; height:100px; overflow:clip; pointer-events:none; }
.sec-career-timeline__anchor[data-anchor="1"]{ top:0; }
.sec-career-timeline__anchor[data-anchor="2"]{ top:340px; }
.sec-career-timeline__anchor[data-anchor="3"]{ top:680px; }
.sec-career-timeline__anchor[data-anchor="4"]{ top:1020px; }
.sec-career-timeline__big{
position:relative; flex:1 0 0; width:1px; display:grid; grid-template-columns:repeat(2,minmax(50px,1fr));
grid-template-rows:repeat(1,min-content); grid-auto-rows:min-content; justify-content:center; gap:0; overflow:clip;
}
/* sticky photo card */
.sec-career-timeline__photo-col{
position:relative; z-index:2; place-self:start; display:flex; align-items:flex-start;
width:100%; max-width:1550px; height:100%; padding:0 40px 0 0; overflow:clip;
}
.sec-career-timeline__sticky{ position:sticky; top:150px; width:100%; max-width:100%; }
.sec-career-timeline__photos{ position:relative; display:flex; align-items:center; gap:10px; width:100%; }
.sec-career-timeline__photo{
position:absolute; top:0; left:0; z-index:1; width:380px; max-width:100%; aspect-ratio:1.26667;
overflow:clip; opacity:0; will-change:opacity;
}
.sec-career-timeline__photo:first-child{ position:relative; }
.sec-career-timeline__photo.is-on{ opacity:1; }
.sec-career-timeline__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
/* 63×63 corner cut (dark triangle, rotated -90° like the original) */
.sec-career-timeline__photo::after{
content:""; position:absolute; top:0; left:0; width:63px; height:63px;
background:url("data:image/svg+xml,") 0 0 / 100% 100% no-repeat;
transform:rotate(-90deg);
}
/* hiring steps */
.sec-career-timeline__list{
position:relative; z-index:2; place-self:start; display:flex; flex-direction:column; align-items:flex-start;
gap:0; width:100%; max-width:1550px;
}
.sec-career-timeline__line{ position:absolute; top:0; left:-1px; z-index:1; width:2px; height:1px; background:var(--grey-f2); overflow:clip; }
.sec-career-timeline__item{
position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:40px;
width:100%; padding:0 40px 150px;
}
.sec-career-timeline__dot{ position:absolute; top:0; left:-4px; z-index:1; display:block; width:8px; height:8px; background:var(--grey-f2); }
.sec-career-timeline__date-row{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; overflow:clip; }
.sec-career-timeline__date{
font-size:14px; font-weight:500; line-height:14px; letter-spacing:-.56px; text-transform:uppercase; white-space:pre;
color:var(--white-20); font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; /* preset 1l3oc22 */
}
.sec-career-timeline__body{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; overflow:clip; }
.sec-career-timeline__h3{
width:100%; font-size:18px; font-weight:700; line-height:23.4px; letter-spacing:-.72px;
white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; color:var(--white-20);
}
.sec-career-timeline__desc{
width:100%; font-size:16px; font-weight:400; line-height:22.4px; letter-spacing:-.8px; text-align:left;
white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; color:var(--white-20);
}
/* active step (variant "Active": white / white / white 50%) — colours switch instantly on the live site */
.sec-career-timeline__item.is-active .sec-career-timeline__date,
.sec-career-timeline__item.is-active .sec-career-timeline__h3{ color:var(--white); }
.sec-career-timeline__item.is-active .sec-career-timeline__desc{ color:var(--white-50); }
/* ---- responsive (secondary) ---- */
@media (max-width:1199.98px){
.sec-career-timeline__inner{ display:flex; flex-direction:column; align-items:center; gap:100px; padding:100px 0 0; }
.sec-career-timeline__grid{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-career-timeline__col:last-child{ display:none; }
.sec-career-timeline__heading{ flex-direction:row; gap:0; }
.sec-career-timeline__title,.sec-career-timeline__quote{ flex:1 0 0; width:1px; gap:30px; }
.sec-career-timeline__qtext{ width:100%; }
.sec-career-timeline__qsym svg{ width:38px; height:30px; }
.sec-career-timeline__anchor[data-anchor="2"]{ top:320px; }
.sec-career-timeline__anchor[data-anchor="3"]{ top:640px; }
.sec-career-timeline__anchor[data-anchor="4"]{ top:980px; }
}
@media (max-width:809.98px){
.sec-career-timeline{ flex-direction:column; }
.sec-career-timeline__inner{ overflow:visible; }
.sec-career-timeline__grid{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-career-timeline__col:nth-child(2){ display:none; }
.sec-career-timeline__heading{ flex-direction:column; gap:40px; }
.sec-career-timeline__title,.sec-career-timeline__quote{ flex:none; width:100%; gap:20px; }
.sec-career-timeline__h2{ font-size:50px; line-height:45px; letter-spacing:-3px; }
.sec-career-timeline__content{ overflow:visible; }
.sec-career-timeline__big{ grid-template-columns:repeat(1,minmax(50px,1fr)); overflow:visible; }
.sec-career-timeline__photo-col{ height:auto; padding:0 0 40px; }
.sec-career-timeline__sticky{ position:relative; top:auto; }
.sec-career-timeline__item{ padding:0 20px 100px; }
.sec-career-timeline__anchor[data-anchor="2"]{ top:350px; }
.sec-career-timeline__anchor[data-anchor="3"]{ top:680px; }
.sec-career-timeline__anchor[data-anchor="4"]{ top:1010px; }
}
/* ==== css/sections/29-contacts-page.css ==== */
/* ==========================================================================
29 — Contacts page: "Start With A Conversation" (video hero + form), 0 → 1107px at 1440×900
Measured on neiden.framer.media/contacts (breakpoint 1200–1619):
section = 44 (header) + Title block 1063.02 = padding 200 + head 218.8 + gap 50 + form 444.2 + padding 150
========================================================================== */
.sec-contacts-page{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
width:100%; padding:var(--header-h) 0 0;
background:var(--black-05); color:var(--black); font-family:var(--font-sans);
}
/* No flash before the runtime applies the entrance states (live: SSR ships opacity 0 / translateY inline; main.js adds html.js before revealing) */
html:not(.js) .sec-contacts-page [data-reveal]{ opacity:0; }
html:not(.js) .sec-contacts-page__video-zoom{ transform:scale(1.5); }
/* ---- Title block (white, clipped; everything absolute lives inside it) ---- */
.sec-contacts-page__title{
position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:50px;
width:100%; padding:200px 0 150px; background:var(--white); overflow:clip;
}
/* video: 110% tall, anchored to the bottom (top = -10%), z 0 */
.sec-contacts-page__video-wrap{ position:absolute; left:0; bottom:0; z-index:0; width:100%; height:110%; will-change:transform; }
.sec-contacts-page__video-zoom{ width:100%; height:100%; will-change:transform; }
.sec-contacts-page__video{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; background:transparent; }
/* black mask + grain (z 1) */
.sec-contacts-page__mask{ position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:#0f0f0f; opacity:.7; overflow:clip; pointer-events:none; }
.sec-contacts-page__grain{ position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.sec-contacts-page__grain-tile{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.15; mix-blend-mode:overlay; transform:translate(-7.75%,7.75%) scale(1.2); will-change:transform; backface-visibility:hidden;
}
/* hairline columns (z 1) */
.sec-contacts-page__cols{
position:absolute; top:0; left:0; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center;
width:100%; height:100%; padding:0 var(--page-pad); overflow:clip; pointer-events:none;
}
.sec-contacts-page__col{ position:relative; height:100%; border:0 solid var(--line-dark); border-right-width:1px; }
.sec-contacts-page__col--1{ border-left-width:1px; }
/* ---- Head: counter / title / subtitle (z 2) ---- */
.sec-contacts-page__head{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:40px; width:100%; padding:0 var(--page-pad); }
.sec-contacts-page__row{ position:relative; width:100%; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; }
.sec-contacts-page__spacer{ position:relative; display:flex; align-items:center; justify-content:center; min-height:14px; overflow:clip; align-self:start; }
.sec-contacts-page__counter{ position:relative; grid-column:span 2; display:flex; align-items:center; gap:10px; width:100%; height:14px; align-self:start; }
.sec-contacts-page__counter-box{ position:relative; display:flex; align-items:center; gap:15px; width:max-content; height:14px; }
.sec-contacts-page__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-contacts-page__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-contacts-page__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-contacts-page__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--white);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-contacts-page__label-part--jp{ font-weight:500; color:var(--white-50); }
.sec-contacts-page__label-part--ptr{ cursor:pointer; } /* live: cursor pointer, no hover state, no link */
.sec-contacts-page__h2{
grid-column:1 / -1; align-self:start; width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
color:var(--white); font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-contacts-page__word{ display:inline-block; will-change:transform,opacity; }
.sec-contacts-page__sub{ position:relative; width:100%; align-self:start; }
.sec-contacts-page__sub-line{ display:block; margin:0; white-space:pre; color:var(--white); text-align:left; font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on; }
/* ---- Form block (z 1): 3 columns, form in columns 2–3 ---- */
.sec-contacts-page__form-block{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; width:100%; padding:0 var(--page-pad); }
.sec-contacts-page__spacer--1px{ min-height:0; height:1px; }
.sec-contacts-page__form{ position:relative; grid-column:span 2; align-self:start; display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%; margin:0; overflow:hidden; }
.sec-contacts-page__fields{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%; }
.sec-contacts-page__top{ display:flex; align-items:center; width:100%; }
.sec-contacts-page__top .sec-contacts-page__field{ flex:1 0 0; width:1px; }
.sec-contacts-page__field{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; cursor:text; }
.sec-contacts-page__field-head{ display:flex; justify-content:flex-end; align-items:center; width:100%; height:12px; overflow:hidden; }
.sec-contacts-page__field-label{ display:block; white-space:pre; color:var(--white); }
.sec-contacts-page__corner{ position:absolute; top:22px; right:0; z-index:3; width:12px; height:12px; color:var(--red); overflow:clip; pointer-events:none; }
.sec-contacts-page__corner svg{ display:block; width:12px; height:12px; overflow:visible; }
.sec-contacts-page__input-wrap{ position:relative; display:flex; align-items:center; width:100%; height:60px; padding:20px; overflow:hidden; background:transparent; }
.sec-contacts-page__input-wrap::after{
content:""; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; pointer-events:none;
border:1px solid var(--line-dark);
transition:border-color .5s cubic-bezier(.44,0,.56,1);
}
.sec-contacts-page__input-wrap--phone::after{ border-left-width:0; transition-duration:.6s; } /* live: PHONE has no left border and a .6s focus transition */
.sec-contacts-page__input-wrap:focus-within::after,.sec-contacts-page__input-wrap.is-invalid::after{ border-color:var(--red); }
.sec-contacts-page__input{
flex:1; width:auto; min-width:0; height:20px; padding:0; margin:0; border:0; outline:none; background:transparent; border-radius:0;
font-family:var(--font-sans); font-size:14px; font-weight:500; line-height:1.2; letter-spacing:-.04em; color:var(--white);
text-overflow:ellipsis; white-space:nowrap; overflow:hidden; appearance:none; -webkit-appearance:none;
}
.sec-contacts-page__input::placeholder{ color:var(--white-50); opacity:1; }
.sec-contacts-page__input:-webkit-autofill{ -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 100px #262626 inset; }
.sec-contacts-page__input-wrap--area{ height:auto; min-height:100px; padding:0; }
.sec-contacts-page__textarea{
display:block; width:100%; height:100px; min-height:100px; padding:20px; resize:vertical; overflow-y:auto; white-space:break-spaces; text-overflow:clip;
}
.sec-contacts-page__textarea::-webkit-resizer{
background:url("data:image/svg+xml,") no-repeat;
}
/* submit row: [button + agreement] | [working times] */
.sec-contacts-page__submit{ display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; width:100%; }
.sec-contacts-page__btn-block{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:20px; width:100%; align-self:start; }
.sec-contacts-page__btn{
position:relative; display:flex; justify-content:space-between; align-items:center; width:100%; height:60px; padding:0; margin:0;
border:0; border-radius:0; background:transparent; cursor:pointer; overflow:clip; text-align:center; -webkit-appearance:none; appearance:none;
}
.sec-contacts-page__btn-in{
position:relative; display:flex; flex:1 0 0; width:1px; height:60px; flex-direction:column; justify-content:center; align-items:center; gap:10px;
background:var(--white);
} /* hover: white → red (sqrt-mixed like Framer Motion), spring .6s — driven by JS */
.sec-contacts-page__btn-txt{ position:relative; z-index:1; display:block; height:12px; overflow:clip; white-space:pre; color:var(--black); pointer-events:none; user-select:none; }
.sec-contacts-page__btn-txt--2{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--white); visibility:hidden; }
.sec-contacts-page__btn:hover .sec-contacts-page__btn-txt--1{ visibility:hidden; }
.sec-contacts-page__btn:hover .sec-contacts-page__btn-txt--2{ visibility:visible; }
.sec-contacts-page__btn-w{ white-space:nowrap; }
.sec-contacts-page__btn-txt i{ display:inline-block; font-style:normal; will-change:transform; } /* letter slides are JS springs (.12s, .03s stagger) */
.sec-contacts-page__btn-plus{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; color:var(--black); pointer-events:none; overflow:visible; will-change:transform;
} /* hover: rotate(-180deg) + black → white, spring .6s — driven by JS */
.sec-contacts-page__agree{ width:100%; margin:0; font-size:13px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; color:var(--white-30); white-space:pre-wrap; word-break:break-word; }
.sec-contacts-page__agree a{ color:var(--white); transition:color .4s cubic-bezier(.44,0,.56,1); }
.sec-contacts-page__agree a:hover{ color:var(--red); }
.sec-contacts-page__hours{ display:flex; align-items:flex-start; gap:7px; width:100%; padding:10px 50px 0; align-self:start; }
.sec-contacts-page__hours-in{ display:flex; flex:1 0 0; width:1px; flex-direction:column; align-items:flex-start; gap:10px; }
.sec-contacts-page__hours-title{ margin:0; white-space:pre; color:var(--white); }
.sec-contacts-page__hours-txt{ margin:0; white-space:pre; color:var(--white); }
.sec-contacts-page__dim{ color:var(--white-30); }
/* success state */
.sec-contacts-page__thanks[hidden]{ display:none; }
.sec-contacts-page__thanks{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; width:100%; min-height:200px; padding:20px; border:1px solid var(--line-dark); color:var(--white); }
.sec-contacts-page__thanks-title{ margin:0; font-size:30px; font-weight:500; line-height:1; letter-spacing:-.04em; }
.sec-contacts-page__thanks-txt{ margin:0; color:var(--white-70); }
.sec-contacts-page__form.is-sent .sec-contacts-page__fields{ display:none; }
/* ---- Badge row (absolute, bottom of the block, column 1) ---- */
.sec-contacts-page__badge-row{
position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:1;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center;
width:100%; padding:0 var(--page-pad); overflow:clip; pointer-events:none; user-select:none;
}
.sec-contacts-page__badge{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; width:100%; height:40px; background:var(--grey-f2); align-self:start; }
.sec-contacts-page__badge-spacer{ height:25px; align-self:start; }
.sec-contacts-page__badge-spacer--2{ padding-left:30px; }
.sec-contacts-page__left{ display:flex; align-items:center; gap:10px; height:12px; }
.sec-contacts-page__left-txt{ display:flex; align-items:center; gap:3px; }
.sec-contacts-page__left-num{ display:flex; align-items:center; gap:4px; }
.sec-contacts-page__left-p{ position:relative; z-index:1; margin:0; white-space:pre; color:var(--black); }
.sec-contacts-page__dim-b{ color:var(--black-40); }
.sec-contacts-page__bars{ display:flex; align-items:center; gap:3px; height:12px; overflow:clip; }
.sec-contacts-page__bar{ display:block; flex:none; width:3px; height:12px; background:var(--black-10); overflow:clip; }
.sec-contacts-page__bar--red{ background:var(--red); }
.sec-contacts-page__bar--blink{ background:var(--red); } /* JS cycles it rgba(0,0,0,.1) ↔ red every 2s */
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-contacts-page__head{ max-width:var(--container-max); padding:0; gap:50px; }
.sec-contacts-page__cols,.sec-contacts-page__form-block,.sec-contacts-page__badge-row{ max-width:var(--container-max); padding:0; }
.sec-contacts-page__cols{ left:50%; transform:translateX(-50%); }
.sec-contacts-page__h2{ font-size:130px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-contacts-page__title{ padding:200px var(--page-pad) 150px; }
.sec-contacts-page__head{ padding:0; }
.sec-contacts-page__row,.sec-contacts-page__cols,.sec-contacts-page__form-block,.sec-contacts-page__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-contacts-page__col:nth-child(3),.sec-contacts-page__spacer,.sec-contacts-page__badge-spacer:nth-child(3){ display:none; }
.sec-contacts-page__form-block,.sec-contacts-page__badge-row{ padding:0; }
.sec-contacts-page__counter,.sec-contacts-page__sub{ grid-column:1 / -1; }
.sec-contacts-page__sub-line{ white-space:pre-wrap; }
.sec-contacts-page__h2{ font-size:80px; }
.sec-contacts-page__form{ grid-column:1 / -1; }
.sec-contacts-page__top{ flex-direction:column; align-items:flex-start; gap:20px; }
.sec-contacts-page__top .sec-contacts-page__field{ flex:none; width:100%; }
.sec-contacts-page__input-wrap--phone::after{ border-left-width:1px; }
}
@media (max-width:809.98px){
.sec-contacts-page__title{ padding:150px var(--page-pad) 0; gap:30px; }
.sec-contacts-page__head{ padding:0; gap:30px; }
.sec-contacts-page__row,.sec-contacts-page__cols,.sec-contacts-page__form-block{ grid-template-columns:1fr; }
.sec-contacts-page__col:nth-child(2),.sec-contacts-page__col:nth-child(3),.sec-contacts-page__spacer,.sec-contacts-page__badge-spacer{ display:none; }
.sec-contacts-page__form-block{ padding:0; }
.sec-contacts-page__counter,.sec-contacts-page__sub,.sec-contacts-page__form{ grid-column:1 / -1; }
.sec-contacts-page__sub-line{ white-space:pre-wrap; font-size:15px; }
.sec-contacts-page__h2{ font-size:60px; }
.sec-contacts-page__top{ flex-direction:column; align-items:flex-start; gap:20px; }
.sec-contacts-page__top .sec-contacts-page__field{ flex:none; width:100%; }
.sec-contacts-page__input-wrap--phone::after{ border-left-width:1px; }
.sec-contacts-page__submit{ display:flex; flex-direction:column; align-items:flex-start; gap:50px; }
.sec-contacts-page__hours{ padding:0; }
.sec-contacts-page__badge-row{ position:relative; bottom:auto; left:auto; transform:none; grid-template-columns:1fr; width:111%; padding:40px var(--page-pad) 0; }
}
/* ==== css/sections/29b-contact-details.css ==== */
/* ==========================================================================
29b — Contacts page: "Contact details + quotes" (light panel rgba(0,0,0,.05))
Measured at 1440: section 720 = wrapper pad 50/0 + grid (pad 100/80, one 440px row).
Hairline columns at x 40 / 493.3 / 946.7 / 1400 span the full 720px.
========================================================================== */
.sec-contact-details{
position:relative; z-index:1; width:100%; height:720px; overflow:clip;
display:flex; justify-content:center; align-items:center; padding:50px 0;
background:var(--black-05); color:var(--black); font-family:var(--font-sans);
}
/* ---- hairline columns (behind content) ---- */
.sec-contact-details__cols{
position:absolute; top:0; left:0; z-index:0; width:100%; height:100%; padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; pointer-events:none; overflow:clip;
}
.sec-contact-details__col{ position:relative; height:100%; border:0 solid var(--line-light); border-right-width:1px; }
.sec-contact-details__col--1{ border-left-width:1px; }
/* ---- content grid ---- */
.sec-contact-details__grid{
position:relative; z-index:1; flex:1 1 auto; width:auto; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:440px;
margin:0 var(--page-pad); padding:100px 0 80px; overflow:clip;
}
/* ---- column 1: contact details (top + bottom hairline) ---- */
.sec-contact-details__info{
position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:70px;
width:100%; height:100%; padding:40px;
}
.sec-contact-details__info::after{
content:""; position:absolute; inset:0; pointer-events:none;
border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
}
.sec-contact-details__contacts{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; width:100%; }
.sec-contact-details__label{
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; white-space:pre; color:var(--black);
}
.sec-contact-details__label--dim{ color:var(--black-40); }
.sec-contact-details__details{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:100%; }
.sec-contact-details__phone{ display:flex; align-items:center; height:45px; width:max-content; overflow:clip; text-decoration:none; }
.sec-contact-details__phone-txt{ display:block; font-size:30px; font-weight:500; line-height:45px; letter-spacing:-.04em; color:var(--black); white-space:pre; }
.sec-contact-details__phone:hover .sec-contact-details__phone-txt{ color:var(--red); } /* live: instant colour flip */
.sec-contact-details__mail{ display:block; position:relative; height:30px; width:max-content; overflow:clip; text-decoration:none; }
.sec-contact-details__mail-stack{ display:block; position:relative; will-change:transform; } /* hover slide driven by JS */
.sec-contact-details__mail-txt{ display:block; font-size:20px; font-weight:500; line-height:30px; letter-spacing:-.04em; color:var(--black); white-space:pre; }
.sec-contact-details__mail-txt--alt{ position:absolute; top:-29px; left:0; opacity:0; }
.sec-contact-details__address{ width:100%; padding-top:20px; }
.sec-contact-details__address p{ font-size:14px; font-weight:400; line-height:21px; letter-spacing:-.04em; color:var(--black-60); white-space:pre-wrap; }
.sec-contact-details__social{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:100%; }
.sec-contact-details__socials{ display:flex; align-items:center; gap:20px; height:21px; }
.sec-contact-details__soc{ display:flex; align-items:center; justify-content:center; width:21px; height:21px; color:rgb(64,64,64); }
.sec-contact-details__soc svg{ display:block; width:21px; height:21px; overflow:visible; transition:color .5s cubic-bezier(.25,.1,.25,1); will-change:transform; }
.sec-contact-details__soc:hover svg{ color:rgb(235,24,93); }
.sec-contact-details__time{ display:flex; align-items:center; gap:5px; height:12px; }
/* ---- columns 2–3: review cards over photos ---- */
.sec-contact-details__card{ position:relative; width:100%; height:100%; overflow:clip; }
.sec-contact-details__zoom,
.sec-contact-details__shade,
.sec-contact-details__grain{ position:absolute; top:-.47px; left:0; width:100%; height:100%; z-index:1; overflow:clip; pointer-events:none; }
.sec-contact-details__zoom img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-contact-details__shade{ background:var(--black-20); }
.sec-contact-details__grain{ overflow:hidden; }
.sec-contact-details__grain-tile{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.15; mix-blend-mode:overlay; transform:scale(1.2); will-change:transform; backface-visibility:hidden;
}
.sec-contact-details__review{
position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
width:100%; height:100%; padding:30px; color:var(--white);
}
.sec-contact-details__top{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.sec-contact-details__logo{ display:block; flex:none; width:61px; height:auto; overflow:visible; }
.sec-contact-details__logo--www{ aspect-ratio:54/13; }
.sec-contact-details__logo--fwd{ aspect-ratio:65/19; }
.sec-contact-details__stars{ display:flex; align-items:center; gap:2px; }
.sec-contact-details__stars i{ display:block; width:10px; height:10px; }
.sec-contact-details__stars svg{ display:block; width:100%; height:100%; overflow:visible; }
.sec-contact-details__body{ display:flex; flex-direction:column; align-items:flex-start; gap:50px; width:100%; overflow:hidden; }
.sec-contact-details__quote{ width:100%; font-size:16px; font-weight:600; line-height:22.4px; letter-spacing:-.04em; color:var(--white); white-space:pre-wrap; }
.sec-contact-details__author{ display:flex; flex-direction:column; align-items:flex-start; }
.sec-contact-details__name{ font-size:14px; font-weight:600; line-height:19.6px; letter-spacing:-.04em; color:var(--white); white-space:pre; }
.sec-contact-details__role{ display:flex; align-items:center; gap:5px; font-size:14px; font-weight:400; line-height:21px; letter-spacing:-.04em; color:var(--white-70); white-space:pre; }
/* ---- tablet / phone: stack ---- */
@media (max-width:1199.98px){
.sec-contact-details{ height:auto; }
.sec-contact-details__cols{ grid-template-columns:1fr; }
.sec-contact-details__col:not(.sec-contact-details__col--1){ display:none; }
.sec-contact-details__grid{ grid-template-columns:1fr; grid-template-rows:auto; grid-auto-rows:440px; padding:60px 0; }
.sec-contact-details__info{ height:auto; gap:60px; padding:30px; }
}
/* MASK client logos (white PNG) */
img.sec-contact-details__logo{ width:auto; height:22px; max-width:110px; aspect-ratio:auto; object-fit:contain; object-position:left center; }
/* client without a logo file: name set in the label preset */
.sec-contact-details__logo--txt{ display:block; width:auto; height:auto; font-size:12px; font-weight:700; line-height:1; letter-spacing:-.02em; text-transform:uppercase; color:#fff; }
/* ==== css/sections/30-404.css ==== */
/* ==========================================================================
30 — 404 page: "404 content" block ("[ ND® ‒ 404 / ページなし ]" · "Page not found" · subtitle · "Go back home" · "404 Error")
Measured on neiden.framer.media/404 at 1440×900 (breakpoint 1200–1619).
Section = 300px top padding + title wrapper (14 + 40 + 80 + 40 + 44.8 = 218.8) + 150px gap + 40px badge row = 708.8px
========================================================================== */
.sec-404{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
width:100%; padding:300px 0 0; gap:150px;
background:var(--white); color:var(--black);
overflow:clip;
font-family:var(--font-sans);
}
/* ---- hairline column grid (absolute, full height; col 1 has left+right rules, cols 2–3 right rule) ---- */
.sec-404__cols{
position:absolute; top:0; left:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center;
width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad);
overflow:clip; pointer-events:none;
}
.sec-404__col{ position:relative; height:100%; border:0 solid var(--line-light); border-right-width:1px; }
.sec-404__col--1{ border-left-width:1px; }
/* ---- Title wrapper ---- */
.sec-404__wrap{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:flex-start; gap:40px;
width:100%; padding:0 var(--page-pad);
}
.sec-404__row{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center;
}
.sec-404__spacer{ position:relative; display:flex; align-items:center; justify-content:center; min-height:14px; overflow:clip; align-self:start; }
/* counter label "[ ND® ‒ 404 / ページなし ]" (same component as the other page titles) */
.sec-404__counter{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:14px; align-self:start; }
.sec-404__counter-inner{ position:relative; display:flex; align-items:center; gap:15px; width:max-content; height:14px; will-change:transform,opacity; }
.sec-404__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-404__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-404__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-404__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-404__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-404__label-part--ptr{ cursor:pointer; } /* live: cursor:pointer, no hover state, no link */
/* big title (h2, 100px/0.8, -0.08em) — spans columns 2–3, words revealed one by one (opacity .001 + y 20 → 0) */
.sec-404__title{
grid-column:span 2; align-self:start;
width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:100px; font-weight:600; line-height:.8em; letter-spacing:-.08em; color:var(--black);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-404__word{ display:inline-block; will-change:transform,opacity; }
/* subtitle (16px/1.4, -0.05em, 70% black) — column 2 only at 1200–1619 */
.sec-404__sub{ position:relative; width:100%; align-self:start; will-change:transform,opacity; }
.sec-404__sub-line{
display:block; margin:0; white-space:pre;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; text-align:left; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-404__sub-line--wide,.sec-404__sub-line--narrow{ display:none; }
/* ---- Badge row: [ button | spacer 25px | badge ] ---- */
.sec-404__badge-row{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center;
padding:0 var(--page-pad); overflow:clip;
}
.sec-404__badge-spacer{ height:25px; align-self:start; }
.sec-404__badge{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
width:100%; height:40px; align-self:start;
}
.sec-404__badge-text{
position:relative; white-space:pre; margin:0;
font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
/* "Go back home": a 60px-tall dark link clipped to the 40px cell (live: Default button component inside a 40px frame).
Letters slide in on load (y 15 → 0); on hover the copy is swapped and the new letters slide in (-15 → 0 in, 15 → 0 out),
the background springs to red — all driven by js/sections/30-404.js. */
.sec-404__btn-cell{ position:relative; width:100%; height:40px; align-self:start; background:var(--grey-f2); overflow:clip; cursor:pointer; }
.sec-404__btn{
position:absolute; left:0; top:-10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
width:100%; height:60px; background:rgb(36,36,36); color:var(--white); cursor:pointer; text-decoration:none;
}
.sec-404__btn-txt{
position:relative; z-index:1; display:block; height:12px; overflow:clip; white-space:pre; pointer-events:none; user-select:none;
font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-404__btn-txt--2{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); visibility:hidden; }
.sec-404__btn.is-hover .sec-404__btn-txt--1{ visibility:hidden; }
.sec-404__btn.is-hover .sec-404__btn-txt--2{ visibility:visible; }
.sec-404__btn-w{ white-space:nowrap; }
.sec-404__btn-txt i{ display:inline-block; font-style:normal; will-change:transform; }
.sec-404__btn-icon{ position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; color:var(--white); pointer-events:none; user-select:none; overflow:visible; }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-404__wrap{ max-width:var(--container-max); padding:0; gap:50px; }
.sec-404__cols,.sec-404__badge-row{ padding:0; }
.sec-404__cols{ left:50%; transform:translateX(-50%); }
.sec-404__sub{ grid-column:span 2; word-break:break-word; }
.sec-404__sub-line--desktop,.sec-404__sub-line--narrow{ display:none; }
.sec-404__sub-line--wide{ display:block; white-space:pre-wrap; }
.sec-404__title{ font-size:130px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-404{ gap:100px; padding:150px var(--page-pad) 0; }
.sec-404__wrap{ gap:30px; padding:0; }
.sec-404__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-404__col:nth-child(3){ display:none; }
.sec-404__row,.sec-404__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-404__badge-row{ padding:0; }
.sec-404__spacer,.sec-404__badge-spacer{ display:none; }
.sec-404__title{ font-size:80px; }
.sec-404__sub{ grid-column:span 2; word-break:break-word; }
.sec-404__sub-line--desktop,.sec-404__sub-line--narrow{ display:none; }
.sec-404__sub-line--wide{ display:block; white-space:pre-wrap; }
}
@media (max-width:809.98px){
.sec-404{ gap:70px; padding:150px var(--page-pad) 0; }
.sec-404__wrap{ gap:30px; padding:0; }
.sec-404__cols{ grid-template-columns:1fr; }
.sec-404__col:nth-child(2),.sec-404__col:nth-child(3){ display:none; }
.sec-404__row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-404__badge-row{ grid-template-columns:1fr; padding:0; }
.sec-404__spacer,.sec-404__badge-spacer,.sec-404__badge{ display:none; }
.sec-404__btn-cell{ grid-column:span 3; }
.sec-404__title{ grid-column:span 2; font-size:60px; }
.sec-404__sub{ grid-column:span 2; word-break:break-word; }
.sec-404__sub-line--desktop,.sec-404__sub-line--wide{ display:none; }
.sec-404__sub-line--narrow{ display:block; white-space:pre-wrap; }
}
/* ==== css/sections/31-terms.css ==== */
/* ==========================================================================
31 — Terms of services page (section "Content", 3541.3px at 1440×900, breakpoint 1200–1619)
Measured on neiden.framer.media/terms-of-services:
section (bg rgba(0,0,0,.05), flex column, gap 1px)
├ title block 708.8 (white, z2): pad-top 300 · inner 218.8 (counter 14 + 40 + h2 80 + 40 + subtitle 44.8) · gap 150 · badge row 40
└ boxed container 2831.4: pad 0 40px 50px · [info 1/3 sticky, empty] · [content 2/3: pad-top 100, gap 50]
content: intro 180 · 50 · description 112 · 50 · rich text 1937 · 50 · subscribe 228.4 · 50 · socials 24
3 hairline columns (rgba(0,0,0,.1)) run behind both blocks.
========================================================================== */
.sec-terms{
position:relative; width:100%;
display:flex; flex-direction:column; align-items:center; gap:1px;
background:var(--black-05); color:var(--black);
font-family:var(--font-sans);
}
/* ---- hairline column grid (absolute, behind everything) ---- */
.sec-terms__cols{
position:absolute; top:0; left:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center;
width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad);
overflow:clip; pointer-events:none;
}
.sec-terms__col{ position:relative; height:100%; border:0 solid var(--line-light); border-right-width:1px; }
.sec-terms__col--1{ border-left-width:1px; }
/* ======================= Title block ======================= */
.sec-terms__title-block{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; gap:150px;
width:100%; padding:300px 0 0;
background:var(--white); overflow:clip;
}
.sec-terms__inner{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:flex-start; gap:40px;
width:100%; padding:0 var(--page-pad);
}
.sec-terms__row{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center;
}
.sec-terms__spacer{ position:relative; min-height:14px; overflow:clip; align-self:start; }
/* counter label "[ ND® ‒ TERMS / 利用条件 ]" (same component as the home "Hello" counter) */
.sec-terms__counter{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:14px; align-self:start; }
.sec-terms__counter-inner{ position:relative; display:flex; align-items:center; gap:15px; width:max-content; height:14px; will-change:transform,opacity; }
.sec-terms__icons{ display:flex; align-items:center; flex:none; width:40px; height:14px; color:var(--red); }
.sec-terms__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-terms__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-terms__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-terms__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-terms__label-part--ptr{ cursor:pointer; } /* live: cursor:pointer, no hover state, no link */
/* big title (h2, 100px/0.8em, -0.08em) — spans columns 2–3, words revealed one by one on load */
.sec-terms__h2{
grid-column:span 2; align-self:start;
width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:100px; font-weight:600; line-height:.8em; letter-spacing:-.08em; color:var(--black);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-terms__word{ display:inline-block; will-change:transform,opacity; }
/* subtitle (16px/1.4, -0.05em, 70% black) — column 2 only at 1200–1619 (two , white-space:pre) */
.sec-terms__sub{ position:relative; width:100%; align-self:start; will-change:transform,opacity; }
.sec-terms__sub-line{
display:block; margin:0; white-space:pre;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; text-align:left; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-terms__sub-line--wide,.sec-terms__sub-line--narrow{ display:none; }
/* badge row: light band in column 1 with the "Back to Home" link */
.sec-terms__badge-row{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center;
padding:0 var(--page-pad); overflow:clip;
}
.sec-terms__badge{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
width:100%; height:40px; align-self:start; background:var(--grey-f2);
}
.sec-terms__back{
position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; height:17px; padding:0 40px; color:var(--black); cursor:pointer; text-decoration:none;
}
.sec-terms__back-icon{ display:block; flex:none; width:17px; height:17px; overflow:hidden; }
.sec-terms__back-clip{ position:relative; display:flex; align-items:center; height:12px; overflow:clip; }
.sec-terms__back-text{
display:block; white-space:pre; margin:0;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
transition:transform .28s cubic-bezier(.3,1.15,.5,1); /* live: layout spring ≈.25s, ~2% overshoot */
}
.sec-terms__back-text--a{ position:relative; }
.sec-terms__back-text--b{ position:absolute; top:-12px; left:0; z-index:1; }
.sec-terms__back-word{ display:inline-block; will-change:transform,opacity; }
/* hover: both copies roll down 12px (the copy parked above the clip window takes the place of the visible one) */
.sec-terms__back:hover .sec-terms__back-text{ transform:translateY(12px); }
html.static .sec-terms__back-text{ transition:none; }
/* ======================= Boxed content container ======================= */
.sec-terms__box{
position:relative; width:100%; max-width:var(--container-max);
display:flex; align-items:flex-start; padding:0 var(--page-pad) 50px;
}
.sec-terms__info{ position:sticky; top:0; z-index:2; flex:1 0 0; width:1px; min-height:317px; padding:200px 0 100px; will-change:transform,opacity; }
.sec-terms__content{
position:relative; z-index:2; flex:2 0 0; width:1px;
display:flex; flex-direction:column; align-items:flex-start; gap:50px; padding:100px 0 0;
}
.sec-terms__body{ display:flex; flex-direction:column; align-items:flex-start; gap:50px; width:100%; will-change:transform,opacity; }
/* intro paragraph: 30px/1.2em 600 -0.06em, words brighten with scroll (JS) */
.sec-terms__intro{
width:100%; margin:0; padding:0; white-space:pre-wrap; word-break:break-word;
font-size:30px; font-weight:600; line-height:1.2em; letter-spacing:-.06em; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on;
}
.sec-terms__w{ display:inline-block; will-change:opacity; }
.sec-terms__sp{ display:inline-block; width:.25em; }
/* description: two half columns (padding-right 50), vertically centred row */
.sec-terms__desc{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; overflow:clip; }
.sec-terms__desc-col{
position:relative; flex:1 0 0; width:1px;
display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 50px 0 0; overflow:clip;
will-change:transform,opacity;
}
.sec-terms__desc-col--left{ align-items:flex-start; }
.sec-terms__desc-col--right{ align-items:center; }
.sec-terms__desc-p{
width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
/* rich text (Framer rich-text presets: h6 18px/1.2 600 -0.02em, paragraph spacing 40 · p 16px/1.4 -0.05em 70% · "•" lists at 2ch) */
/* NB: white-space:pre-wrap only on the leaf text blocks — on the container it would render the
newlines/indentation between the block tags of the partial as blank lines (rich 5129px instead of 1937px). */
.sec-terms__rich{ position:relative; width:100%; white-space:normal; word-break:break-word; will-change:transform,opacity; }
.sec-terms__rich h6{
margin:40px 0 0; padding:0; white-space:pre-wrap;
font-size:18px; font-weight:600; line-height:1.2em; letter-spacing:-.02em; color:var(--black);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-terms__rich h6:first-child{ margin-top:0; }
.sec-terms__rich p,.sec-terms__rich ul{
margin:0; padding:0;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-terms__rich p{ white-space:pre-wrap; }
.sec-terms__rich ul{ position:relative; list-style:none; }
.sec-terms__rich li{ display:list-item; list-style:none; padding-inline-start:2ch; }
.sec-terms__rich li::before{ content:"•"; position:absolute; inset-inline-start:0; }
.sec-terms__rich li p{ margin:0; }
/* ---- subscribe block: 2 columns, hairline top/bottom, padding 40 ---- */
.sec-terms__subscribe{
position:relative; z-index:2; width:100%; max-width:var(--container-max);
display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center;
padding:40px; overflow:clip;
box-shadow:inset 0 1px 0 var(--line-light), inset 0 -1px 0 var(--line-light);
}
.sec-terms__sub-heading{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:100%; align-self:start; }
.sec-terms__counter-inner--sub{ width:100%; }
.sec-terms__sub-desc{ width:100%; word-break:break-word; will-change:transform,opacity; }
.sec-terms__sub-desc-p{
margin:0; white-space:pre-wrap;
font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; text-align:left; color:var(--black-70);
font-feature-settings:"blwf" on,"cv09" on,"cv03" on,"cv04" on,"cv11" on;
}
.sec-terms__sub-desc-p--narrow{ display:none; }
.sec-terms__form-block{
position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:20px;
width:100%; padding:0 0 0 50px; overflow:clip; align-self:start; will-change:transform,opacity;
}
.sec-terms__field-label{
white-space:pre; margin:0;
font-size:12px; font-weight:600; line-height:1em; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-terms__form{ position:relative; display:flex; align-items:flex-start; gap:0; width:100%; overflow:hidden; }
.sec-terms__field{ display:flex; align-items:flex-start; gap:10px; flex:1 0 0; width:1px; min-width:0; cursor:default; }
.sec-terms__input-wrap{
position:relative; display:flex; align-items:center; flex:1 0 0; width:1px; height:60px;
padding:12px 12px 12px 30px; background:var(--white); overflow:hidden;
}
.sec-terms__input-wrap::after{
content:""; position:absolute; inset:0; pointer-events:none; box-sizing:border-box;
border:0 solid var(--red);
transition:border-color .3s cubic-bezier(.44,0,.56,1), border-width .3s cubic-bezier(.44,0,.56,1);
}
.sec-terms__input-wrap:focus-within::after{ border-width:1px; }
.sec-terms__input{
flex:1 1 0; width:auto; min-width:0; height:100%; margin:0; padding:0; border:0; outline:none; background:none;
font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:1.2em; letter-spacing:-.04em; color:var(--black);
white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-feature-settings:normal;
}
.sec-terms__input::placeholder{ color:var(--black-20); opacity:1; }
.sec-terms__submit{
position:relative; z-index:1; flex:none; display:flex; justify-content:center; align-items:center;
width:60px; height:60px; margin:0; padding:0; border:0; border-radius:0;
background:var(--black); color:var(--white); cursor:pointer;
}
.sec-terms__submit-icon{
display:flex; justify-content:center; align-items:center; width:18px; height:18px;
transition:transform .25s cubic-bezier(.44,0,.56,1); will-change:transform; /* live: arrow rotates 45° in ~250ms */
}
.sec-terms__submit-icon svg{ display:block; width:18px; height:18px; overflow:hidden; }
.sec-terms__submit:hover .sec-terms__submit-icon{ transform:rotate(45deg); }
.sec-terms__consent{ display:flex; flex-direction:column; }
.sec-terms__consent-p{
margin:0; white-space:pre;
font-size:13px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; color:var(--black-50);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on;
}
.sec-terms__consent-p--wide{ display:none; }
.sec-terms__consent a{
color:var(--black-90); text-decoration:underline; text-decoration-color:var(--black-20);
text-underline-offset:.16em; text-decoration-thickness:.05em;
transition:color .4s cubic-bezier(.44,0,.56,1), text-decoration-color .4s cubic-bezier(.44,0,.56,1), text-decoration-thickness .4s cubic-bezier(.44,0,.56,1), text-underline-offset .4s cubic-bezier(.44,0,.56,1);
}
.sec-terms__consent a[aria-current="page"]{ color:var(--black); } /* live: link to the current page uses --framer-link-current-text-color (#000) instead of #000000e6 */
.sec-terms__consent a:hover{ color:var(--red); }
/* ---- socials + "STAY / CONNECTED" ---- */
.sec-terms__social{ position:relative; display:flex; align-items:center; gap:20px; width:max-content; height:24px; will-change:transform,opacity; }
.sec-terms__socials{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:46px; }
.sec-terms__soc{ display:flex; align-items:center; justify-content:center; width:21px; height:21px; cursor:pointer; color:rgba(99,99,99,.7); }
.sec-terms__soc svg{ display:block; width:21px; height:21px; overflow:hidden; will-change:transform; transition:color .5s cubic-bezier(.25,.1,.25,1); } /* scale 1→1.4 driven by JS spring(.6) */
.sec-terms__soc:hover svg{ color:var(--white); } /* live: the icon stroke fades to white (component variant shared with the dark footer) */
.sec-terms__stay{ position:relative; z-index:1; display:flex; flex-direction:column; white-space:pre; }
.sec-terms__stay-p{
margin:0; white-space:pre;
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-terms__stay-p--dim{ color:rgb(89,89,89); }
/* ======================= Responsive (secondary) ======================= */
@media (min-width:1620px){
.sec-terms__inner{ max-width:var(--container-max); padding:0; gap:50px; }
.sec-terms__cols,.sec-terms__badge-row{ padding:0; }
.sec-terms__cols{ left:50%; transform:translateX(-50%); }
.sec-terms__box{ padding:0 0 50px; }
.sec-terms__cols--box{ left:0; transform:none; }
.sec-terms__h2{ font-size:130px; }
.sec-terms__sub{ grid-column:span 2; word-break:break-word; }
.sec-terms__sub-line--desktop,.sec-terms__sub-line--narrow{ display:none; }
.sec-terms__sub-line--wide{ display:block; white-space:pre-wrap; }
.sec-terms__body{ gap:60px; }
.sec-terms__subscribe{ padding:50px 0; }
.sec-terms__sub-heading{ padding:0 0 0 50px; align-self:center; }
.sec-terms__form-block{ padding:0 50px; }
.sec-terms__consent-p--desktop{ display:none; }
.sec-terms__consent-p--wide{ display:block; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-terms__title-block{ gap:100px; padding:150px var(--page-pad) 0; }
.sec-terms__inner{ gap:30px; padding:0; }
.sec-terms__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-terms__col:nth-child(3){ display:none; }
.sec-terms__row,.sec-terms__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-terms__badge-row{ padding:0; }
.sec-terms__spacer{ display:none; }
.sec-terms__h2{ font-size:80px; }
.sec-terms__sub{ grid-column:span 2; word-break:break-word; }
.sec-terms__sub-line--desktop,.sec-terms__sub-line--narrow{ display:none; }
.sec-terms__sub-line--wide{ display:block; white-space:pre-wrap; }
.sec-terms__box{ flex-direction:column; }
.sec-terms__info{ display:none; }
.sec-terms__content{ flex:none; width:100%; padding:50px 0 0; }
.sec-terms__body{ gap:30px; }
.sec-terms__desc{ flex-direction:column; gap:40px; }
.sec-terms__desc-col{ flex:none; width:100%; }
.sec-terms__subscribe{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; padding:50px 40px; }
.sec-terms__form-block{ padding:0; }
.sec-terms__social{ width:min-content; }
.sec-terms__consent-p--desktop{ display:none; }
.sec-terms__consent-p--wide{ display:block; white-space:pre-wrap; }
}
@media (max-width:809.98px){
.sec-terms__title-block{ gap:70px; padding:150px var(--page-pad) 0; }
.sec-terms__inner{ gap:30px; padding:0; }
.sec-terms__cols{ grid-template-columns:1fr; }
.sec-terms__col:nth-child(2),.sec-terms__col:nth-child(3){ display:none; }
.sec-terms__row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-terms__badge-row{ grid-template-columns:1fr; padding:0; }
.sec-terms__spacer{ display:none; }
.sec-terms__h2{ grid-column:span 2; font-size:60px; }
.sec-terms__sub{ grid-column:span 2; word-break:break-word; }
.sec-terms__sub-line--desktop,.sec-terms__sub-line--wide{ display:none; }
.sec-terms__sub-line--narrow{ display:block; white-space:pre-wrap; }
.sec-terms__box{ flex-direction:column; padding:0 var(--page-pad) 50px; }
.sec-terms__info{ display:none; }
.sec-terms__content{ flex:none; width:100%; padding:50px 0 0; }
.sec-terms__body{ gap:40px; }
.sec-terms__intro{ font-size:24px; }
.sec-terms__desc{ flex-direction:column; gap:40px; }
.sec-terms__desc-col{ flex:none; width:100%; padding:0; }
.sec-terms__subscribe{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; padding:30px 30px 100px; }
.sec-terms__form-block{ padding:0; }
.sec-terms__sub-desc-p--desktop{ display:none; }
.sec-terms__sub-desc-p--narrow{ display:block; }
.sec-terms__social{ position:absolute; bottom:20px; left:50%; z-index:1; width:min-content; transform:translateX(-50%); }
}
/* ==== css/sections/32-privacy.css ==== */
/* ==========================================================================
32 — Privacy page: "Content" section (measured on neiden.framer.media/privacy at 1440×900, breakpoint 1200–1619)
section (grey #0000000d, flex column, gap 1px) = Title block 708.8 + 1 + Boxed content 2820.8 = 3530.6
Title block (white, z2): padding-top 300 · inner (padding 0 40, gap 40): counter 14 / title 80 / subtitle 44.8 · gap 150 · badge row 40
Boxed (padding 0 40 50): sticky empty Info column (1/3) + Content (2/3, padding-top 100, gap 50):
body (gap 60: lead 180 / description 89.6 / rich text 1937) · subscribe 220.2 · social 24
3 hairline columns absolutely positioned behind each block.
========================================================================== */
.sec-privacy{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
width:100%; background:var(--black-05); color:var(--black); font-family:var(--font-sans);
--sec-privacy-ease-swap:linear(0, 0.35 10%, 0.62 20%, 0.82 30%, 0.94 40%, 1.006 50%, 1.015 60%, 1.012 70%, 1.006 80%, 1.002 90%, 1); /* text swap on hover: spring ~.4s, 1.5% overshoot (sampled) */
--sec-privacy-ease-rotate:linear(0, 0.005 18%, 0.073 35%, 0.40 51%, 0.81 68%, 0.965 85%, 1); /* submit arrow rotate 0→45°: ~200ms ease-in-out after a ~55ms render latency (sampled on the live button) */
--sec-privacy-ease-spring:linear(0, 0.02 4%, 0.165 8.9%, 0.34 14%, 0.52 19.7%, 0.66 24.8%, 0.76 30.2%, 0.84 35.8%, 0.895 41.5%, 0.93 46.3%, 0.95 51.9%, 0.97 57.3%, 0.98 62.4%, 0.988 67.9%, 0.993 73.4%, 0.998 84%, 1); /* spring dur .62 bounce 0: social icon scale (sampled 1→1.4 in ~600ms) */
}
/* reveal targets are hidden until main.js has applied their initial states (the live SSR HTML ships them with opacity:0) */
html:not(.js) .sec-privacy [data-reveal]{ opacity:0; }
/* ---- hairline column grids (absolute, behind the content) ---- */
.sec-privacy__cols{
position:absolute; top:0; left:0; z-index:0;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center;
width:100%; height:100%; padding:0 var(--page-pad); overflow:clip; pointer-events:none;
}
.sec-privacy__col{ position:relative; height:100%; border-right:1px solid var(--line-light); }
.sec-privacy__col--first{ border-left:1px solid var(--line-light); }
/* ==================== Title block ==================== */
.sec-privacy__title{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:150px;
width:100%; padding:300px 0 0; background:var(--white); overflow:clip;
}
.sec-privacy__inner{
position:relative; z-index:1;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:40px;
width:100%; max-width:var(--container-max); padding:0 var(--page-pad);
}
.sec-privacy__row{
position:relative; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr);
justify-content:center; gap:0; width:100%;
}
.sec-privacy__spacer{ position:relative; min-height:14px; overflow:clip; }
/* counter label: 5 red flags (40px) + gap 15 + "[ ND® ‒ PRIVACY / 個人情報保護 ]" (14px/14 600 -.04em, jp part 500 40%) */
.sec-privacy__counter{ position:relative; display:flex; align-items:center; gap:10px; width:100%; height:14px; }
.sec-privacy__counter-box{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); will-change:transform,opacity; }
.sec-privacy__icons{ display:flex; align-items:center; flex:none; width:40px; height:14px; color:var(--red); }
.sec-privacy__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-privacy__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-privacy__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-privacy__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-privacy__label-part--link{ cursor:pointer; }
/* title: DM Sans 100/80 600 -8px, columns 2–3 */
.sec-privacy__h{
position:relative; grid-column:span 2; place-self:start; width:100%; margin:0;
color:var(--black); white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word;
}
.sec-privacy__word{ display:inline-block; will-change:transform,opacity; }
/* subtitle: 16/22.4 400 -.05em rgba(0,0,0,.7), column 2, two pre lines at the measured breakpoint */
.sec-privacy__sub{ position:relative; place-self:start; width:100%; color:var(--black-70); will-change:transform,opacity; }
.sec-privacy__sub-line{ display:none; margin:0; white-space:pre; }
.sec-privacy__sub-line--desk{ display:block; }
/* badge row: light band in column 1 with the "BACK TO HOME" link */
.sec-privacy__badge-row{
position:relative; z-index:1;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center; gap:0;
width:100%; max-width:var(--container-max); padding:0 var(--page-pad); overflow:clip;
}
.sec-privacy__badge{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:40px; background:var(--grey-f2); }
.sec-privacy__badge-spacer{ height:25px; }
.sec-privacy__back{
position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; height:17px; padding:0 40px; color:var(--black); cursor:pointer; text-decoration:none;
}
.sec-privacy__back-icon{ display:block; flex:none; width:17px; height:17px; overflow:hidden; color:var(--black); }
.sec-privacy__back-box{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; height:12px; overflow:clip; }
.sec-privacy__back-copy{ display:block; margin:0; white-space:pre; color:var(--black); transition:transform .4s var(--sec-privacy-ease-swap); will-change:transform; }
.sec-privacy__back-copy--a{ position:relative; }
.sec-privacy__back-copy--b{ position:absolute; top:-12px; left:0; z-index:1; }
.sec-privacy__back:hover .sec-privacy__back-copy{ transform:translateY(12px); } /* both copies slide down 12px (live: layout animation, second copy comes in from above) */
.sec-privacy__back-w{ display:inline-block; will-change:transform,opacity; }
/* ==================== Boxed content ==================== */
.sec-privacy__boxed{
position:relative; display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:0;
width:100%; max-width:var(--container-max); padding:0 var(--page-pad) 50px;
}
.sec-privacy__cols--boxed{ z-index:0; }
.sec-privacy__info{ position:sticky; top:0; z-index:2; flex:1 0 0; width:1px; min-height:317px; padding:200px 0 100px; }
.sec-privacy__content{
position:relative; z-index:2; flex:2 0 0; width:1px;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:50px; padding:100px 0 0;
}
.sec-privacy__body{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:60px; width:100%; will-change:transform,opacity; }
/* lead paragraph: 30/36 600 -.06em; words are inline-block spans separated by .25em inline-block spacers (live markup);
opacity .1 → 1 driven by scroll (32-privacy.js) */
.sec-privacy__lead{
width:100%; margin:0; padding:0; color:var(--black); white-space:pre-wrap; word-break:break-word;
font-size:30px; font-weight:600; line-height:1.2em; letter-spacing:-.06em;
}
.sec-privacy__w{ display:inline-block; opacity:.1; will-change:opacity; }
.sec-privacy__sp{ display:inline-block; width:.25em; }
.sec-privacy--static .sec-privacy__w,.sec-privacy--nojs .sec-privacy__w{ opacity:1; }
/* description: two flex columns (padding-right 50), 16/22.4 400 -.05em rgba(0,0,0,.7) */
.sec-privacy__desc{ position:relative; display:flex; align-items:center; justify-content:center; gap:0; width:100%; overflow:clip; }
.sec-privacy__desc-col{
position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
flex:1 0 0; width:1px; padding:0 50px 0 0; overflow:clip; will-change:transform,opacity;
}
.sec-privacy__desc-text{ width:100%; margin:0; color:var(--black-70); white-space:pre-wrap; word-break:break-word; }
.sec-privacy__desc-text--wide{ display:none; } /* the
variant is shown at every other breakpoint (tree: hidden only at 1200–1619) */
/* rich text: h6 18/21.6 600 -.02em (margin-top 40 except the first), p 16/22.4 400 -.05em 70%, bullets "•" (li padding 2ch) */
/* the live container is pre-wrap with no whitespace between its blocks; our partial is indented, so the container
collapses whitespace and only the text blocks are pre-wrap */
.sec-privacy__rich{ position:relative; width:100%; color:var(--black-70); white-space:normal; word-break:break-word; will-change:transform,opacity; }
.sec-privacy__rich h6{ margin:40px 0 0; font-size:18px; font-weight:600; line-height:1.2em; letter-spacing:-.02em; color:var(--black); white-space:pre-wrap; }
.sec-privacy__rich h6:first-child{ margin-top:0; }
.sec-privacy__rich p{ margin:0; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70); white-space:pre-wrap; }
.sec-privacy__rich ul{ position:relative; margin:0; padding:0; list-style:none; font-size:16px; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70); }
.sec-privacy__rich li{ position:relative; display:list-item; margin:0; padding:0 0 0 2ch; list-style:none; white-space:pre-wrap; }
.sec-privacy__rich li::before{ content:"•"; position:absolute; inset-inline-start:0; top:0; color:var(--black-70); }
/* ---- subscribe block: 2 columns, padding 40 40 50, 1px top/bottom hairlines drawn inside the box ---- */
.sec-privacy__subscribe{
position:relative; z-index:2;
display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); grid-auto-rows:minmax(0,1fr); justify-content:center; gap:0;
width:100%; padding:40px 40px 50px; overflow:clip;
}
.sec-privacy__subscribe::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; border-bottom-width:1px; pointer-events:none; }
.sec-privacy__sub-head{ position:relative; align-self:center; justify-self:start; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; width:100%; }
.sec-privacy__counter-box--sub{ width:100%; }
.sec-privacy__sub-desc{ width:100%; color:var(--black-70); will-change:transform,opacity; }
.sec-privacy__sub-desc-line{ display:none; margin:0; white-space:pre-wrap; word-break:break-word; }
.sec-privacy__sub-desc-line--desk{ display:block; }
.sec-privacy__form-block{
position:relative; align-self:start; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px;
width:100%; padding:0 0 0 40px; overflow:clip; will-change:transform,opacity;
}
.sec-privacy__field-label{ margin:0; white-space:pre; color:var(--black); }
.sec-privacy__form{ position:relative; display:flex; align-items:flex-start; gap:0; width:100%; margin:0; overflow:hidden; }
.sec-privacy__field{ display:flex; align-items:flex-start; gap:10px; flex:1 0 0; width:1px; min-width:0; cursor:default; }
.sec-privacy__input-wrap{
position:relative; display:flex; align-items:center; flex:1 0 0; width:1px; height:60px;
padding:12px 12px 12px 30px; background:var(--white); overflow:hidden;
transition:background .3s cubic-bezier(.44,0,.56,1), box-shadow .3s cubic-bezier(.44,0,.56,1);
}
.sec-privacy__input-wrap::after{
content:""; position:absolute; inset:0; pointer-events:none; box-sizing:border-box; border:0 solid var(--red);
transition:border-color .3s cubic-bezier(.44,0,.56,1), border-width .3s cubic-bezier(.44,0,.56,1);
}
.sec-privacy__input-wrap:focus-within::after{ border-width:1px; }
.sec-privacy__input{
flex:1 1 0; width:auto; min-width:0; height:100%; margin:0; padding:0; border:0; outline:none; background:none;
font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:1.2em; letter-spacing:-.04em; color:var(--black);
white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-feature-settings:normal;
}
.sec-privacy__input::placeholder{ color:var(--black-20); opacity:1; }
.sec-privacy__submit{
position:relative; z-index:1; flex:none; display:flex; justify-content:center; align-items:center;
width:60px; height:60px; margin:0; padding:0; border:0; border-radius:0; background:var(--black); color:var(--white); cursor:pointer;
}
.sec-privacy__submit-icon{ display:flex; justify-content:center; align-items:center; width:18px; height:18px; transition:transform .3s var(--sec-privacy-ease-rotate); will-change:transform; } /* live sampled: 0 @65ms, .07 @105, .40 @154, .81 @204, 1 @306 after hover */
.sec-privacy__submit-icon svg{ display:block; width:18px; height:18px; overflow:hidden; }
.sec-privacy__submit:hover .sec-privacy__submit-icon{ transform:rotate(45deg); }
.sec-privacy__consent{
width:100%; margin:0; white-space:pre-wrap; word-break:break-word;
font-size:13px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; color:var(--black-50);
}
@media (min-width:1200px) and (max-width:1619.98px){ .sec-privacy__consent{ width:auto; white-space:pre; } } /* live 1200–1619: auto width + pre (350.3px box) */
.sec-privacy__consent a{
color:var(--black-90); text-decoration:underline; text-decoration-color:var(--black-20); text-underline-offset:.16em; text-decoration-thickness:.05em;
transition:color .4s cubic-bezier(.44,0,.56,1), text-decoration-color .4s cubic-bezier(.44,0,.56,1), text-decoration-thickness .4s cubic-bezier(.44,0,.56,1), text-underline-offset .4s cubic-bezier(.44,0,.56,1);
}
.sec-privacy__consent a[href="/privacy"]{ color:var(--black); } /* live: current-page link colour #000 (Terms link stays 90%) */
.sec-privacy__consent a:hover{ color:var(--red); }
/* ---- social: 4 icons (21px, stroke rgba(99,99,99,.7)) + "STAY / CONNECTED" ---- */
.sec-privacy__social{ position:relative; display:flex; align-items:center; justify-content:flex-start; gap:20px; width:min-content; will-change:transform,opacity; }
.sec-privacy__soc-list{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:46px; }
.sec-privacy__soc{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:21px; height:21px; cursor:pointer; }
.sec-privacy__soc svg{
display:block; width:21px; height:21px; overflow:hidden; color:rgba(99,99,99,.7);
transition:transform .62s var(--sec-privacy-ease-spring), color .62s var(--sec-privacy-ease-spring); will-change:transform;
}
.sec-privacy__soc:hover svg{ transform:scale(1.4); color:var(--white); }
.sec-privacy__stay{ position:relative; z-index:1; display:flex; flex-direction:column; white-space:pre; }
.sec-privacy__stay-line{ margin:0; white-space:pre; color:var(--black); }
.sec-privacy__stay-line--grey{ color:rgb(89,89,89); }
/* ==================== breakpoints ==================== */
/* ≥1620: 1550px container, inner gap 50, subscribe padding 50 0, heading indent 50, form padding 0 50 */
@media (min-width:1620px){
.sec-privacy__cols{ left:calc(50% - min(var(--container-max),100%)/2); max-width:var(--container-max); padding:0; }
.sec-privacy__inner{ gap:50px; padding:0; }
.sec-privacy__badge-row{ padding:0; }
.sec-privacy__boxed{ padding:0 0 50px; }
.sec-privacy__sub-line--desk{ display:none; }
.sec-privacy__sub-line--wide{ display:block; white-space:pre-wrap; word-break:break-word; }
.sec-privacy__subscribe{ padding:50px 0; }
.sec-privacy__sub-head{ padding:0 0 0 50px; }
.sec-privacy__form-block{ padding:0 50px; }
}
/* 810–1199: 2 columns, one text column */
@media (max-width:1199.98px){
.sec-privacy__title{ gap:100px; padding:150px var(--page-pad) 0; }
.sec-privacy__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-privacy__col:nth-child(3){ display:none; }
.sec-privacy__inner{ gap:30px; padding:0; }
.sec-privacy__row,.sec-privacy__badge-row{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-privacy__spacer,.sec-privacy__badge-spacer:nth-child(3){ display:none; }
.sec-privacy__h{ grid-column:span 2; font-size:80px; }
.sec-privacy__sub{ grid-column:span 2; }
.sec-privacy__sub-line--desk{ display:none; }
.sec-privacy__sub-line--small{ display:block; white-space:pre-wrap; word-break:break-word; }
.sec-privacy__badge-row{ padding:0; }
.sec-privacy__boxed{ flex-direction:column; }
.sec-privacy__info{ display:none; }
.sec-privacy__content{ flex:none; width:100%; padding:50px 40px 0; }
.sec-privacy__body{ gap:40px; }
.sec-privacy__lead{ font-size:26px; }
.sec-privacy__subscribe{ display:flex; flex-direction:column; align-items:flex-start; gap:40px; padding:50px 40px; }
.sec-privacy__sub-head,.sec-privacy__form-block{ align-self:auto; padding:0; }
.sec-privacy__sub-desc-line--desk{ display:none; }
.sec-privacy__sub-desc-line--small{ display:block; }
}
/* <810: 1 column */
@media (max-width:809.98px){
.sec-privacy__title{ gap:70px; padding:150px var(--page-pad) 0; }
.sec-privacy__cols{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-privacy__col:nth-child(2){ display:none; }
.sec-privacy__row,.sec-privacy__badge-row{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-privacy__badge-spacer{ display:none; }
.sec-privacy__h{ grid-column:span 1; font-size:60px; }
.sec-privacy__sub{ grid-column:span 1; }
.sec-privacy__boxed{ padding:0 var(--page-pad) 50px; }
.sec-privacy__content{ padding:50px 0 0; }
.sec-privacy__lead{ font-size:22px; }
.sec-privacy__desc{ flex-direction:column; gap:50px; }
.sec-privacy__desc-col{ flex:none; width:100%; padding:0; }
.sec-privacy__desc-text--desk{ display:none; }
.sec-privacy__desc-text--small{ display:block; }
.sec-privacy__subscribe{ padding:30px 30px 100px; }
.sec-privacy__social{ width:100%; justify-content:center; }
}
/* ==== css/sections/33-project-inner.css ==== */
/* ==========================================================================
33 — Project detail page (template), measured on neiden.framer.media/projects/featured-1 at 1440×900
Section: flex column, padding-top 44 (fixed header), bg rgba(0,0,0,.05), overflow clip.
y (from section top): hero 44→944 · content 944→5596.5 (pad-top 150, gap 100: S1 185.6 / images 1885.6 /
S3 1085.6 / S4 185.6 / extra 760) · next title 5596.5→5935.3 · card 5935.3→6835.3 · (contact form 6835.3→7707)
========================================================================== */
.sec-project-inner{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; padding:var(--header-h) 0 0; background:var(--black-05); color:var(--black);
font-family:var(--font-sans); overflow:clip;
}
/* shared 3-column hairline grid (absolute, full height, 40px side padding) */
.sec-project-inner__cols,.sec-project-inner__hero-grid,.sec-project-inner__pag-lines{
position:absolute; top:0; left:0; z-index:0; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr));
justify-content:center; width:100%; height:100%; padding:0 var(--page-pad); pointer-events:none; overflow:clip;
}
@media (min-width:1620px){
.sec-project-inner__cols,.sec-project-inner__hero-grid,.sec-project-inner__pag-lines{ left:calc(50% - min(var(--container-max),100%)/2); max-width:var(--container-max); padding:0; }
}
.sec-project-inner__cols i{ display:block; height:100%; border-right:1px solid var(--line-light); }
.sec-project-inner__cols i:first-child{ border-left:1px solid var(--line-light); }
/* ---- counter label: 5 red flags (40px) + gap 15 + "[ ND® ‒ LABEL / 日本語 ]" (14px/600 -.04em, 2px gaps) ---- */
.sec-project-inner__cnt{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); }
.sec-project-inner__cnt-icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-project-inner__cnt-icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-project-inner__cnt-label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-project-inner__cnt-part{
display:block; white-space:pre; color:inherit;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__cnt-part--jp{ font-weight:500; color:var(--black-40); }
.sec-project-inner__cnt-part--link{ cursor:pointer; }
.sec-project-inner__cnt--light{ color:var(--white); }
.sec-project-inner__cnt--light .sec-project-inner__cnt-part--jp{ color:var(--white-50); }
/* grain (same noise tile + diagonal jitter as the home hero / projects grid) */
.sec-project-inner__grain{ position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:hidden; pointer-events:none; }
.sec-project-inner__grain i{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.15; mix-blend-mode:overlay; will-change:transform; transform:scale(1.2);
animation:sec-project-inner-grain 1.2s steps(1) infinite;
}
@keyframes sec-project-inner-grain{
0%{ transform:translate(9.25%,-9.25%) scale(1.2); } 12.5%{ transform:translate(6.75%,-6.75%) scale(1.2); } 25%{ transform:translate(-3.25%,3.25%) scale(1.2); }
37.5%{ transform:translate(-11%,11%) scale(1.2); } 50%{ transform:translate(2.5%,-2.5%) scale(1.2); } 62.5%{ transform:translate(12%,-12%) scale(1.2); }
75%{ transform:translate(-7.5%,7.5%) scale(1.2); } 87.5%{ transform:translate(-1%,1%) scale(1.2); } 100%{ transform:translate(9.25%,-9.25%) scale(1.2); }
}
/* ===================== Hero (100vh) ===================== */
.sec-project-inner__hero{
position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:30px;
width:100%; height:100vh; padding:0 var(--page-pad) 150px; overflow:clip; color:var(--white);
}
/* image box 1440×990 at top -90 (parallax: translateY(.2·scrollY) scale(1+scrollY/12000)); inner zoom 1.5 → 1 on load */
.sec-project-inner__hero-media{ position:absolute; top:-90px; left:0; z-index:0; width:100%; height:calc(100% + 90px); overflow:clip; will-change:transform; transform-origin:50% 50%; }
.sec-project-inner__hero-zoom{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
.sec-project-inner__hero-zoom img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-project-inner__hero-mask{ position:absolute; inset:0; z-index:1; background:rgb(15,15,15); opacity:.7; pointer-events:none; }
.sec-project-inner__hero-grid{ z-index:2; height:100%; }
.sec-project-inner__hero-col{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; height:100%; overflow:clip; }
.sec-project-inner__hero-col::after{ content:""; position:absolute; inset:0; border-right:1px solid var(--line-dark); pointer-events:none; }
.sec-project-inner__hero-col:first-child::after{ border-left:1px solid var(--line-dark); }
.sec-project-inner__hero-col:first-child{ overflow:visible; }
/* "Visit project" badge: 40px, #f2f2f2, arrow 17px + text (two copies swap on hover, 12px clip) */
.sec-project-inner__visit{
position:relative; z-index:0; display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; height:40px; background:var(--grey-f2); pointer-events:auto;
}
.sec-project-inner__visit-link{
display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:17px; padding:0 40px;
color:var(--black); cursor:pointer; text-decoration:none;
}
.sec-project-inner__visit-arrow{ display:block; flex:none; width:17px; height:17px; }
.sec-project-inner__visit-txt{ position:relative; display:flex; align-items:center; height:12px; overflow:clip; }
.sec-project-inner__visit-main,.sec-project-inner__visit-alt{
display:block; white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on; will-change:transform;
}
.sec-project-inner__visit-main span{ display:inline-block; }
.sec-project-inner__visit-alt{ position:absolute; top:0; left:0; z-index:1; transform:translateY(-12px); }
/* hero rows: 3-column grid, spacer in column 1 */
.sec-project-inner__hero-row,.sec-project-inner__facts-table{
position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr);
justify-content:center; width:100%; max-width:var(--container-max);
}
.sec-project-inner__spacer{ position:relative; min-height:1px; overflow:clip; }
.sec-project-inner__hero-counter{ position:relative; grid-column:span 2; display:flex; flex-direction:column; align-items:flex-start; height:14px; }
.sec-project-inner__hero-heading{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-start; width:100%; max-width:var(--container-max); }
.sec-project-inner__h1{
width:100%; white-space:pre-wrap; word-break:break-word; color:var(--white);
font-size:60px; font-weight:600; line-height:60px; letter-spacing:-.07em; will-change:transform,opacity;
}
.sec-project-inner__sub{
position:relative; grid-column:span 2; width:100%; white-space:pre-wrap; text-align:left; color:var(--white);
font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em;
}
/* facts table: padding-top 100, 4 rows of 42 (12px labels, 15px vertical padding, 1px white/10% rule) */
.sec-project-inner__facts-table{ padding:100px 0 0; overflow:clip; }
.sec-project-inner__table{ position:relative; z-index:1; grid-column:span 2; display:flex; flex-direction:column; align-items:center; width:100%; overflow:hidden; }
.sec-project-inner__line{ position:relative; display:flex; align-items:center; width:100%; padding:15px 0; }
.sec-project-inner__line::after{ content:""; position:absolute; inset:0; border-bottom:1px solid var(--line-dark); pointer-events:none; }
.sec-project-inner__key,.sec-project-inner__val{
flex:1 0 0; width:1px; white-space:pre-wrap;
font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__key{ white-space:pre; color:var(--white-50); }
.sec-project-inner__val{ color:var(--white); }
/* ===================== Project content ===================== */
.sec-project-inner__content{
position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:100px;
width:100%; max-width:var(--container-max); padding:150px 0 0;
}
@media (max-width:1619.98px){ .sec-project-inner__content{ max-width:none; padding:150px var(--page-pad) 0; } }
.sec-project-inner__images{ display:flex; flex-direction:column; align-items:center; gap:100px; width:100%; }
/* a section = 3-column grid: counter (col 1) + content (cols 2-3) */
.sec-project-inner__sec{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center; width:100%; }
.sec-project-inner__sec-counter{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; height:14px; }
.sec-project-inner__sec-content{ position:relative; grid-column:span 2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; }
.sec-project-inner__sec--media .sec-project-inner__sec-content{ gap:100px; }
.sec-project-inner__sec-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; width:100%; overflow:clip; }
.sec-project-inner__sec-h{
width:100%; white-space:pre-wrap; color:var(--black);
font-size:30px; font-weight:600; line-height:1.1; letter-spacing:-.07em; will-change:transform,opacity;
}
.sec-project-inner__sec-desc{ display:flex; align-items:flex-start; justify-content:center; width:100%; overflow:clip; }
.sec-project-inner__sec-col{ flex:1 0 0; width:1px; padding:0 30px 0 0; will-change:transform,opacity; }
.sec-project-inner__sec-col--wide{ padding-right:50px; }
.sec-project-inner__sec-col p{ white-space:pre-wrap; text-align:left; color:var(--black-70); font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; }
/* gallery: 2 stacked 400px images (inner scale 1.7 → 1 on appear) */
.sec-project-inner__gallery{ display:grid; grid-template-columns:100%; width:100%; }
.sec-project-inner__img{ position:relative; width:100%; height:400px; overflow:clip; }
.sec-project-inner__img-zoom,.sec-project-inner__tri-zoom,.sec-project-inner__rv-zoom{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; overflow:hidden; }
.sec-project-inner__img-zoom img,.sec-project-inner__tri-zoom img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* triangle block: 700px image, 63px corner cut top-left */
.sec-project-inner__tri{ position:relative; width:100%; height:700px; overflow:clip; will-change:transform,opacity; }
.sec-project-inner__corner{ position:absolute; top:0; left:0; z-index:1; width:63px; height:63px; transform:rotate(-90deg); pointer-events:none; }
/* ---- extra info: featured review (500) + facts (260) ---- */
.sec-project-inner__extra{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:100%; overflow:clip; }
.sec-project-inner__review{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); width:100%; height:500px; }
.sec-project-inner__rv-media{ position:relative; display:flex; align-items:center; justify-content:center; height:500px; overflow:clip; }
.sec-project-inner__rv-img{ position:absolute; left:0; top:-100px; width:100%; height:calc(100% + 200px); object-fit:cover; object-position:center; will-change:transform; }
.sec-project-inner__rv-quote-icon{ position:absolute; top:50px; right:50px; z-index:2; width:66px; height:53px; mix-blend-mode:difference; pointer-events:none; }
.sec-project-inner__rv-body{
position:relative; grid-column:span 2; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
height:100%; padding:50px; background:var(--grey-f2); overflow:hidden;
}
.sec-project-inner__rv-top{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; overflow:hidden; }
.sec-project-inner__rv-services,.sec-project-inner__rv-name,.sec-project-inner__rv-co{
font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; white-space:pre; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__rv-tags{ font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.04em; white-space:pre; color:var(--black-60); }
.sec-project-inner__rv-quote-wrap{ display:flex; flex-direction:column; gap:10px; width:100%; }
.sec-project-inner__rv-quote{ width:100%; color:var(--black); font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-.05em; }
.sec-project-inner__qw{ opacity:.08; will-change:opacity; }
.sec-project-inner__rv-bottom{ display:flex; justify-content:space-between; align-items:flex-end; width:100%; }
.sec-project-inner__rv-author{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.sec-project-inner__rv-role{ display:flex; align-items:center; gap:4px; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.04em; white-space:pre; color:var(--black); }
.sec-project-inner__rv-at{ color:var(--black-60); }
.sec-project-inner__rv-logo{ display:block; width:81px; height:auto; overflow:hidden; }
/* fact cards: spacer + 2 × (453×260, #191919, padding 40/40/20, right rule white/10%) */
.sec-project-inner__facts{ position:relative; display:flex; align-items:flex-start; justify-content:center; width:100%; }
.sec-project-inner__facts-spacer{ flex:1 0 0; width:1px; height:260px; padding:40px 40px 20px; } /* same padding as the cards: flex-basis 0 is floored at the padding box, so equal padding = equal thirds */
.sec-project-inner__fact{
position:relative; flex:1 0 0; width:1px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
height:260px; padding:40px 40px 20px; background:var(--grey-19); color:var(--white);
}
.sec-project-inner__fact::after{ content:""; position:absolute; inset:0; border-right:1px solid var(--line-dark); pointer-events:none; }
.sec-project-inner__fact-top{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; overflow:clip; }
.sec-project-inner__dots{ display:flex; flex-direction:column; gap:4px; }
.sec-project-inner__dots div{ display:flex; gap:4px; }
.sec-project-inner__dots i{ display:block; width:2px; height:2px; background:var(--white-20); }
.sec-project-inner__fact-label,.sec-project-inner__fact-mom{
font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; white-space:pre;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__fact-label{ color:var(--white); }
.sec-project-inner__fact-bottom{ display:flex; flex-direction:column; align-items:flex-start; overflow:clip; }
.sec-project-inner__fact-mom{ display:flex; align-items:center; gap:10px; height:19.6px; color:var(--white-30); overflow:clip; }
.sec-project-inner__fact-arrow{ display:block; flex:none; width:16px; height:16px; }
.sec-project-inner__num-wrap{ position:relative; display:flex; align-items:flex-start; height:72px; }
.sec-project-inner__num-wrap--tall{ height:75px; }
.sec-project-inner__num{
display:inline-flex; align-items:center; color:var(--white);
font-size:60px; font-weight:700; line-height:48px; letter-spacing:0; font-variant-numeric:tabular-nums; font-feature-settings:normal;
}
.sec-project-inner__digits{ display:inline-flex; align-items:center; }
.sec-project-inner__digit{
position:relative; display:inline-flex; justify-content:center; width:37.2px; height:72px; overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
.sec-project-inner__digit-col{ position:absolute; top:0; left:0; width:100%; will-change:transform; }
.sec-project-inner__digit-col > span{ display:flex; align-items:center; justify-content:center; height:72px; line-height:1; }
.sec-project-inner__num-suffix{ line-height:1; margin-left:4.8px; }
.sec-project-inner__num-prefix{ line-height:1; margin-right:4.8px; }
/* ===================== Next project: title (padding 150/40/100) ===================== */
.sec-project-inner__next-title{
position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end;
width:100%; max-width:var(--container-max); padding:150px var(--page-pad) 100px;
}
@media (max-width:1619.98px){ .sec-project-inner__next-title{ max-width:none; } }
.sec-project-inner__next-counter{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; flex:1 0 0; width:1px; will-change:transform,opacity; }
.sec-project-inner__next-desc{ width:100%; }
.sec-project-inner__next-desc p{ white-space:pre-wrap; text-align:left; color:var(--black-70); font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; }
.sec-project-inner__next-heading{ display:flex; justify-content:space-between; align-items:flex-end; flex:2 0 0; width:1px; }
.sec-project-inner__next-h2{ width:100%; white-space:pre-wrap; color:var(--black); font-size:100px; font-weight:600; line-height:.8; letter-spacing:-.08em; }
.sec-project-inner__next-h2 span{ display:inline-block; will-change:transform,opacity; }
/* ===================== Next project: card block (100vh) ===================== */
.sec-project-inner__pag{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; height:100vh; overflow:clip; }
.sec-project-inner__pag-bg{ position:absolute; inset:0; z-index:1; overflow:clip; }
.sec-project-inner__pag-bglink{ position:absolute; inset:0; z-index:1; display:block; background:var(--black); overflow:clip; }
.sec-project-inner__pag-blur{ position:absolute; inset:0; z-index:1; overflow:clip; transform:scale(1.2); } /* pre-blurred variant, no runtime blur */
.sec-project-inner__pag-blur img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-project-inner__pag-shade{ position:absolute; inset:0; z-index:2; background:var(--black-30); }
.sec-project-inner__pag-bg .sec-project-inner__grain{ z-index:2; }
.sec-project-inner__pag-lines{ z-index:2; }
.sec-project-inner__pag-lines i{ display:block; height:100%; border-right:1px solid var(--line-dark); }
.sec-project-inner__pag-lines i:first-child{ border-left:1px solid var(--line-dark); }
.sec-project-inner__pag-inner{ position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; padding:0 var(--page-pad); overflow:clip; }
.sec-project-inner__card{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; max-width:var(--container-max); color:var(--white); text-decoration:none; cursor:pointer;
}
@media (max-width:1619.98px){ .sec-project-inner__card{ max-width:none; } }
.sec-project-inner__card-meta{
position:relative; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr);
justify-content:center; width:100%; padding:0 0 20px;
}
.sec-project-inner__card-meta > div{ position:relative; z-index:3; display:flex; align-items:center; gap:5px; height:min-content; overflow:clip; }
.sec-project-inner__card-lbl,.sec-project-inner__card-val{
display:inline-block; white-space:pre; font-size:12px; font-weight:500; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__card-lbl{ color:var(--white-30); }
.sec-project-inner__card-val{ color:var(--white); }
.sec-project-inner__card-image{
position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; height:calc(100vh * .65); overflow:clip; will-change:transform;
}
.sec-project-inner__card-scale{
width:100%; height:100%; transform:scale(1.1); transform-origin:50% 50%;
transition:transform .72s var(--pi-hover-ease); will-change:transform;
}
/* hover-in curve sampled on the live card (scale 1.1 → 1 / logo 0 → 1 every 80ms): .006 .035 .132 .355 .72 .88 .953 .991 1 */
.sec-project-inner__card{ --pi-hover-ease:linear(0, 0.006 11.1%, 0.035 22.2%, 0.132 33.3%, 0.355 44.4%, 0.72 55.6%, 0.88 66.7%, 0.953 77.8%, 0.991 88.9%, 1); }
.sec-project-inner__card:hover .sec-project-inner__card-scale{ transform:scale(1); }
.sec-project-inner__card-zoom{ position:relative; width:100%; height:100%; transform-origin:50% 50%; will-change:transform; }
.sec-project-inner__card-clip{ position:relative; width:100%; height:100%; overflow:hidden; }
.sec-project-inner__card-clip img{ position:absolute; left:0; top:-150px; width:100%; height:calc(100% + 300px); object-fit:cover; object-position:center; will-change:transform; }
.sec-project-inner__card-shade{ position:absolute; inset:0; z-index:1; background:var(--black); opacity:0; }
.sec-project-inner__card-logo{
position:absolute; top:50%; left:50%; z-index:4; width:79px; height:auto; aspect-ratio:3.59091;
mix-blend-mode:difference; opacity:0; transform:translate(-50%,-50%) scale(1.3); transform-origin:50% 50%;
transition:transform .72s var(--pi-hover-ease),opacity .72s var(--pi-hover-ease); pointer-events:none;
}
.sec-project-inner__card-logo svg{ display:block; width:100%; height:100%; }
.sec-project-inner__card:hover .sec-project-inner__card-logo{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.sec-project-inner__card-caption{
position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr);
justify-content:center; width:100%; padding:20px 0;
}
.sec-project-inner__card-spacer{ min-height:22px; }
.sec-project-inner__card-ttl-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%; }
.sec-project-inner__card-ttl{
width:min-content; overflow:clip; white-space:pre; color:var(--white);
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__card-ttl span{ display:inline-block; }
.sec-project-inner__card-tags{ display:flex; justify-content:space-between; align-items:flex-start; width:100%; height:100%; }
.sec-project-inner__card-tags ul{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:min-content; }
.sec-project-inner__card-tags li{
display:block; width:min-content; white-space:pre; color:var(--white-30);
font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-project-inner__card-tags li span{ display:inline-block; }
/* ===================== breakpoints (follow the live Tablet/Phone variants; not pixel-verified) ===================== */
@media (max-width:1199.98px){
.sec-project-inner__cols,.sec-project-inner__hero-grid,.sec-project-inner__pag-lines,.sec-project-inner__hero-row,.sec-project-inner__facts-table,
.sec-project-inner__sec,.sec-project-inner__review,.sec-project-inner__card-meta,.sec-project-inner__card-caption{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-project-inner__cols i:last-child,.sec-project-inner__hero-col:last-child,.sec-project-inner__pag-lines i:last-child,.sec-project-inner__spacer,.sec-project-inner__facts-spacer,
.sec-project-inner__card-meta > div:first-child,.sec-project-inner__card-spacer{ display:none; }
.sec-project-inner__hero-counter,.sec-project-inner__sub,.sec-project-inner__table,.sec-project-inner__sec-content,.sec-project-inner__rv-body{ grid-column:span 2; }
.sec-project-inner__sec{ gap:30px; grid-template-columns:1fr; }
.sec-project-inner__content{ gap:50px; padding-top:100px; }
.sec-project-inner__images{ gap:50px; }
.sec-project-inner__review{ grid-template-columns:1fr; height:auto; }
.sec-project-inner__rv-media{ height:390px; }
.sec-project-inner__rv-body{ grid-column:auto; padding:30px; }
.sec-project-inner__next-title{ flex-direction:row; padding:100px var(--page-pad) 50px; }
.sec-project-inner__card-tags{ order:1; }
.sec-project-inner__card-ttl-wrap{ order:2; }
.sec-project-inner__card-ttl{ width:auto; white-space:normal; }
}
@media (max-width:809.98px){
.sec-project-inner__cols,.sec-project-inner__hero-grid,.sec-project-inner__pag-lines,.sec-project-inner__hero-row,.sec-project-inner__facts-table,
.sec-project-inner__card-meta,.sec-project-inner__card-caption{ grid-template-columns:repeat(1,minmax(50px,1fr)); }
.sec-project-inner__cols i:nth-child(2),.sec-project-inner__hero-col:nth-child(2),.sec-project-inner__pag-lines i:nth-child(2){ display:none; }
.sec-project-inner__hero{ padding-bottom:100px; }
.sec-project-inner__h1{ font-size:40px; line-height:1; }
.sec-project-inner__sec-desc{ flex-direction:column; gap:20px; }
.sec-project-inner__sec-col,.sec-project-inner__sec-col--wide{ width:100%; flex:none; padding:0; }
.sec-project-inner__content{ padding-top:50px; }
.sec-project-inner__tri{ height:400px; }
.sec-project-inner__img{ height:240px; }
.sec-project-inner__facts{ flex-direction:column; }
.sec-project-inner__fact{ width:100%; flex:none; }
.sec-project-inner__next-title{ flex-direction:column; align-items:flex-start; gap:20px; padding:50px 20px; }
.sec-project-inner__next-counter,.sec-project-inner__next-heading{ flex:none; width:100%; }
.sec-project-inner__next-h2{ font-size:60px; }
.sec-project-inner__card-image{ height:calc(100vh * .45); }
}
/* MASK projects: raster client logo in the next-project card; section 2-4 bullet columns */
.sec-project-inner__card-logo img{ display:block; width:100%; height:100%; object-fit:contain; }
img.sec-project-inner__rv-logo{ width:auto; max-width:110px; height:24px; object-fit:contain; object-position:right center; filter:brightness(0); }
.sec-project-inner__card-logo{ width:auto; height:auto; aspect-ratio:auto; mix-blend-mode:normal; }
.sec-project-inner__card-logo img{ width:auto; }
img.sec-project-inner__rv-logo--color{ filter:none; }
/* touch screens have no hover: show the client logo permanently */
@media (hover:none), (pointer:coarse){
.sec-project-inner__card-logo{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* ==== css/sections/34-post-content.css ==== */
/* ==========================================================================
34 — Blog post: "Post content" (template for the 7 posts) 0 → 3481.7px @1440×900
Measured on neiden.framer.media/blog/web-accessibility-why-it-s-non-negotiable-copy (dom.json):
section: padding-top 44 (header), bg rgba(0,0,0,.05)
Title (100vh, padding-bottom 200, gap 50, flex-end): counter 14 · h1 60/60 (85% wide) · subheading 44.8 + 50 + author 60.2
cover image absolute top -90 (990 tall) + black mask rgb(15,15,15)@.4 + grain overlay@.1 + white-10 hairline columns,
column 1 ends with the 40px #f2f2f2 date / read-time band.
Boxed content (padding 0 40 150): sticky Info column (453.3, padding 100/100, "BACK TO ARTICLES") + Content (906.7, padding-top 100, gap 50):
article (gap 60): lead 30/36 (scroll-scrubbed words) · 2 description columns 16/22.4 · rich text (img 2400/1600, p 17/27.2 +20, h6 18/21.6 +40)
subscribe grid 2 cols (padding 40/30, 1px top+bottom rules) · social row (4×21px icons + "STAY CONNECTED").
========================================================================== */
.sec-post-content{
position:relative; width:100%; padding-top:var(--header-h);
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:var(--black-05); color:var(--black); font-family:var(--font-sans);
}
/* ---- Title block ---- */
.sec-post-content__title{
position:relative; width:100%; height:100vh; min-height:700px; padding:0 0 200px;
display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:50px; overflow:clip;
}
.sec-post-content__cover{ position:absolute; left:0; top:-90px; z-index:0; width:100%; height:calc(100% + 90px); overflow:clip; will-change:transform; transform-origin:50% 50%; }
.sec-post-content__cover-in{ position:absolute; inset:0; will-change:transform; }
.sec-post-content__cover-img{ display:block; width:100%; height:100%; object-fit:cover; }
.sec-post-content__mask{ position:absolute; inset:0; z-index:1; background:rgb(15,15,15); opacity:.4; pointer-events:none; }
.sec-post-content__noise{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.sec-post-content__noise-tile{
position:absolute; inset:-50%; width:200%; height:200%;
background:url("../assets/images/JEXWGoePoUiV1n4YylT8Fc37Us.webp") repeat 0 0 / 256px 256px;
opacity:.1; mix-blend-mode:overlay; transform:translate(-6.5%,6.5%); will-change:transform; backface-visibility:hidden;
}
/* hairline column grids (dark variant over the cover, light variant behind the article) */
.sec-post-content__cols{
position:absolute; top:0; left:0; width:100%; height:100%; padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:100%; justify-content:center;
overflow:clip; pointer-events:none;
}
.sec-post-content__cols--dark{ z-index:2; --pc-line:var(--white-10); }
.sec-post-content__cols--light{ z-index:0; --pc-line:var(--line-light); }
.sec-post-content__col{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:50px; overflow:clip; }
.sec-post-content__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--pc-line); border-right-width:1px; pointer-events:none; }
.sec-post-content__col--1::after{ border-left-width:1px; }
.sec-post-content__label-block{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:40px; background:var(--grey-f2); }
.sec-post-content__label{ display:flex; align-items:center; justify-content:flex-start; gap:10px; height:12px; }
.sec-post-content__date,.sec-post-content__read{
margin:0; white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-post-content__date{ color:var(--black-50); }
.sec-post-content__read{ color:var(--black); }
.sec-post-content__dot{ display:block; flex:none; width:4px; height:4px; border-radius:7px; background:var(--black-30); }
/* rows of the title block (3-column grid, 40px side padding) */
.sec-post-content__row{
position:relative; width:100%; padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center;
}
.sec-post-content__row--counter,.sec-post-content__row--sub{ z-index:4; }
.sec-post-content__row--h1{ z-index:3; display:flex; flex-direction:column; align-items:flex-start; }
.sec-post-content__spacer{ position:relative; height:1px; }
.sec-post-content__counter{ grid-column:span 2; display:flex; flex-direction:column; align-items:flex-start; gap:50px; width:100%; }
.sec-post-content__counter-box{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--white); will-change:transform,opacity; }
.sec-post-content__counter-box--dark{ color:var(--black); }
.sec-post-content__icons{ display:flex; align-items:center; flex:none; width:40px; height:14px; color:var(--red); }
.sec-post-content__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-post-content__ctext{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-post-content__ctext-part{
display:block; white-space:pre; color:inherit;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase;
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-post-content__ctext-part--link{ cursor:pointer; }
.sec-post-content__ctext-part--jp{ font-weight:500; opacity:.5; }
.sec-post-content__counter-box--dark .sec-post-content__ctext-part--jp{ opacity:.4; }
.sec-post-content__h1-wrap{ position:relative; width:85%; }
.sec-post-content__h1{
margin:0; color:var(--white); white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word;
font-size:60px; font-weight:600; line-height:1em; letter-spacing:-.07em; opacity:0;
}
.sec-post-content__h1.is-ready{ opacity:1; }
.sec-post-content__h1 .w{ display:inline-block; }
.sec-post-content__h1 .c{ display:inline-block; will-change:transform,opacity; }
.sec-post-content__sub{ grid-column:span 2; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:50px; width:100%; }
.sec-post-content__sub-text{ width:100%; will-change:transform,opacity; }
.sec-post-content__sub-text p{ margin:0; white-space:pre-wrap; word-break:break-word; text-align:left; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--white); }
.sec-post-content__author{ position:relative; display:flex; align-items:center; gap:20px; width:max-content; overflow:hidden; will-change:transform,opacity; }
.sec-post-content__avatar{ position:relative; flex:none; width:60px; height:60px; aspect-ratio:1; border-radius:60px; overflow:hidden; }
.sec-post-content__avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.sec-post-content__who{ display:flex; flex-direction:column; align-items:flex-start; }
.sec-post-content__name,.sec-post-content__company{ margin:0; white-space:pre; font-size:14px; font-weight:600; line-height:1.4em; letter-spacing:-.04em; color:var(--white); }
.sec-post-content__role{ display:flex; align-items:center; gap:3px; align-self:stretch; }
.sec-post-content__role p{ margin:0; white-space:pre; font-size:14px; font-weight:400; line-height:1.5em; letter-spacing:-.04em; color:var(--white-50); }
/* ---- Boxed content ---- */
.sec-post-content__box{ position:relative; width:100%; padding:0 var(--page-pad) 150px; display:flex; align-items:flex-start; justify-content:flex-start; }
.sec-post-content__info{
position:sticky; top:0; z-index:2; flex:1 0 0; width:1px; min-width:0;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:40px; padding:100px 0;
}
.sec-post-content__content{
position:relative; z-index:2; flex:2 0 0; width:1px; min-width:0;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:50px; padding:100px 0 0;
}
/* back link: 17px arrow + 12px clipped label that rolls down on hover (ghost copy sits 12px above) */
.sec-post-content__back{
position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; height:17px; padding:0 40px; color:var(--black); text-decoration:none; cursor:pointer;
}
.sec-post-content__back-icon{ display:block; flex:none; width:17px; height:17px; overflow:visible; }
.sec-post-content__back-clip{ position:relative; display:flex; align-items:center; height:12px; overflow:clip; }
.sec-post-content__back-roll{ position:relative; display:block; will-change:transform; }
.sec-post-content__back-label{ display:block; }
.sec-post-content__back-label p{
margin:0; white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-post-content__back-label--ghost{ position:absolute; top:-12px; left:0; }
.sec-post-content__back .w{ display:inline-block; will-change:transform,opacity; }
/* article */
.sec-post-content__article{ display:flex; flex-direction:column; align-items:flex-start; gap:60px; width:100%; }
.sec-post-content__lead{ width:100%; }
.sec-post-content__lead p{ margin:0; white-space:pre-wrap; word-break:break-word; font-size:30px; font-weight:600; line-height:1.2em; letter-spacing:-.06em; color:var(--black); }
.sec-post-content__lead .w{ display:inline-block; will-change:opacity; }
.sec-post-content__lead .sp{ display:inline-block; width:.25em; }
.sec-post-content__desc{ display:flex; align-items:flex-start; justify-content:flex-start; width:100%; overflow:clip; }
.sec-post-content__desc-col{ flex:1 0 0; width:1px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:0 50px 0 0; overflow:clip; }
.sec-post-content__desc-col p{ margin:0; width:100%; white-space:pre-wrap; word-break:break-word; text-align:left; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70); }
.sec-post-content__body{ width:100%; white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; }
.sec-post-content__body img{ display:block; width:100%; max-width:100%; height:auto; }
.sec-post-content__body p{ margin:0; font-size:17px; font-weight:400; line-height:1.6em; letter-spacing:-.04em; color:var(--black-60); }
.sec-post-content__body h6,.sec-post-content__body h5,.sec-post-content__body h4{ margin:0; font-size:18px; font-weight:600; line-height:1.2em; letter-spacing:-.02em; color:var(--black); }
.sec-post-content__body a{ color:var(--black-90); text-decoration:underline; text-decoration-color:var(--black-20); text-underline-offset:.16em; text-decoration-thickness:.05em; }
.sec-post-content__body > :not(:first-child){ margin-top:20px; }
.sec-post-content__body > h6:not(:first-child),.sec-post-content__body > h5:not(:first-child),.sec-post-content__body > h4:not(:first-child){ margin-top:40px; }
/* subscribe block */
.sec-post-content__subscribe{
position:relative; z-index:2; width:100%; padding:40px 0 30px;
display:grid; grid-template-columns:repeat(2,minmax(50px,1fr)); grid-auto-rows:minmax(0,1fr); justify-content:center; overflow:clip;
}
.sec-post-content__subscribe::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; border-bottom-width:1px; pointer-events:none; }
.sec-post-content__sub-head{ align-self:start; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:30px; width:100%; padding:0 30px; }
.sec-post-content__sub-desc{ width:100%; }
.sec-post-content__sub-desc p{ margin:0; white-space:pre-wrap; word-break:break-word; text-align:left; font-size:16px; font-weight:400; line-height:1.4em; letter-spacing:-.05em; color:var(--black-70); }
.sec-post-content__sub-form{ align-self:start; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; width:100%; padding:0 30px; overflow:clip; }
.sec-post-content__form{ position:relative; display:flex; align-items:flex-start; gap:0; width:100%; overflow:hidden; }
.sec-post-content__field{ display:flex; align-items:flex-start; gap:10px; flex:1 0 0; width:1px; min-width:0; }
.sec-post-content__input-wrap{
position:relative; display:flex; align-items:center; flex:1 0 0; width:1px; height:60px;
padding:12px 12px 12px 30px; background:var(--white); overflow:hidden;
}
.sec-post-content__input-wrap::after{ content:""; position:absolute; inset:0; pointer-events:none; border:0 solid var(--red); transition:border-width .3s cubic-bezier(.44,0,.56,1); }
.sec-post-content__input-wrap:focus-within::after{ border-width:1px; }
.sec-post-content__input{
flex:1 1 0; width:auto; min-width:0; height:100%; margin:0; padding:0; border:0; outline:none; background:none;
font-family:var(--font-sans); font-size:16px; font-weight:600; line-height:1.2em; letter-spacing:-.04em; color:var(--black);
white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-feature-settings:normal;
}
.sec-post-content__input::placeholder{ color:var(--black-20); opacity:1; }
.sec-post-content__submit{
position:relative; z-index:1; flex:none; display:flex; justify-content:center; align-items:center;
width:60px; height:60px; margin:0; padding:0; border:0; border-radius:0; background:var(--black); color:var(--white); cursor:pointer;
}
.sec-post-content__submit-icon{ display:flex; justify-content:center; align-items:center; width:18px; height:18px; transition:transform .25s cubic-bezier(.44,0,.56,1); will-change:transform; }
.sec-post-content__submit-icon svg{ display:block; width:18px; height:18px; overflow:hidden; }
.sec-post-content__submit:hover .sec-post-content__submit-icon{ transform:rotate(45deg); }
.sec-post-content__consent{ display:flex; flex-direction:column; width:100%; }
.sec-post-content__consent p{ margin:0; white-space:pre-wrap; font-size:13px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; color:var(--black-50); }
.sec-post-content__consent a{
color:var(--black-90); text-decoration:underline; text-decoration-color:var(--black-20); text-underline-offset:.16em; text-decoration-thickness:.05em;
transition:color .4s cubic-bezier(.44,0,.56,1), text-decoration-color .4s cubic-bezier(.44,0,.56,1);
}
.sec-post-content__consent a:hover{ color:var(--red); }
/* social row */
.sec-post-content__social{ position:relative; display:flex; align-items:center; justify-content:flex-start; gap:20px; width:max-content; }
.sec-post-content__socials{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; height:21px; border-radius:46px; }
.sec-post-content__soc{ display:flex; align-items:center; justify-content:center; width:21px; height:21px; color:rgba(99,99,99,.7); cursor:pointer; }
.sec-post-content__soc svg{ display:block; width:21px; height:21px; overflow:visible; will-change:transform; transition:color .45s cubic-bezier(.25,.1,.25,1); } /* scale 1→1.4 spring driven by JS */
.sec-post-content__soc:hover svg{ color:var(--white); } /* live: the icon fades to white (same component as the dark footer) */
.sec-post-content__stay{ position:relative; z-index:1; display:flex; flex-direction:column; }
.sec-post-content__stay p{
margin:0; white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black);
font-feature-settings:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on,"ss07" on;
}
.sec-post-content__stay-dim{ color:#595959 !important; }
/* ---- Responsive (secondary, from the Framer rules) ---- */
@media (min-width:1620px){
.sec-post-content__box{ max-width:var(--container-max); padding:0 0 100px; }
.sec-post-content__row,.sec-post-content__cols{ max-width:var(--container-max); padding:0; }
.sec-post-content__cols{ left:calc(50% - min(var(--container-max),100%)/2); }
}
@media (max-width:1199.98px){
.sec-post-content__title{ padding:0 var(--page-pad) 200px; }
.sec-post-content__row,.sec-post-content__cols{ grid-template-columns:repeat(2,minmax(50px,1fr)); }
.sec-post-content__col:nth-child(3){ display:none; }
.sec-post-content__spacer{ display:none; }
.sec-post-content__counter,.sec-post-content__sub{ grid-column:span 2; }
.sec-post-content__box{ flex-direction:column; }
.sec-post-content__info{ position:relative; top:auto; order:1; flex:none; width:100%; flex-direction:row; align-items:flex-start; gap:50px; padding:50px 0 0; }
.sec-post-content__content{ order:0; flex:none; width:100%; padding:50px 0 0; }
.sec-post-content__article{ gap:50px; }
}
@media (max-width:809.98px){
.sec-post-content__title{ justify-content:center; gap:30px; padding:0 var(--page-pad); }
.sec-post-content__row,.sec-post-content__cols{ grid-template-columns:minmax(50px,1fr); }
.sec-post-content__col:nth-child(2){ display:none; }
.sec-post-content__counter,.sec-post-content__sub{ grid-column:span 1; }
.sec-post-content__h1-wrap{ width:100%; }
.sec-post-content__h1{ font-size:40px; }
.sec-post-content__box{ padding:0 var(--page-pad) 50px; }
.sec-post-content__desc{ flex-direction:column; gap:30px; }
.sec-post-content__desc-col{ flex:none; width:100%; padding:0; }
.sec-post-content__subscribe{ display:flex; flex-direction:column; align-items:flex-start; gap:30px; padding:30px; }
.sec-post-content__sub-head,.sec-post-content__sub-form{ padding:0; }
.sec-post-content__info{ justify-content:center; gap:70px; }
}
/* ==== css/sections/35-post-more.css ==== */
/* ==========================================================================
35 — Blog post: "More Articles." list under an article — same component as the home "Articles." section (16), 1003.4px @1440; heading = 2 words (delays 0.3 / 0.4 measured live)
Measured from neiden.framer.media (dom.json): section padding 0 40px, wrapper padding 0 0 150px,
title 150/50 padding (subheading col 1, 100px h2 cols 2–3), 3 post cards 453×523.6 in a 1px-ruled
grid (image 350 + content 40/40/60), 40px "READ ALL POSTS" button row, "UPDATED WEEKLY" 30px from bottom.
========================================================================== */
.sec-post-more{
--bp-ease: cubic-bezier(.65,0,.35,1); /* hover layout (height / offsets) */
--bp-dur: .6s;
--bp-fade: .55s; /* hover fades (opacity / blur) */
position:relative; z-index:1; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:0 var(--page-pad);
background:transparent; color:var(--black); /* live: no section background (page white shows through) */
overflow:clip;
}
/* ---- 3 hairline columns ---- */
.sec-post-more__cols{
position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:0;
width:100%; max-width:var(--container-max); height:100%; padding:0 var(--page-pad);
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); justify-content:center; overflow:clip; pointer-events:none;
}
.sec-post-more__col{ position:relative; height:100%; overflow:clip; }
.sec-post-more__col::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-right-width:1px; pointer-events:none; }
.sec-post-more__col--1::after{ border-left-width:1px; }
/* ---- Posts wrapper ---- */
.sec-post-more__wrap{
position:relative; z-index:1; width:100%; max-width:var(--container-max);
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:0 0 150px;
}
/* ---- Corner fact ("UPDATED WEEKLY") — mix-blend difference like the source ---- */
.sec-post-more__facts{
position:absolute; top:0; left:0; z-index:0; width:100%; height:100%;
display:flex; align-items:center; justify-content:center; gap:10px;
overflow:clip; mix-blend-mode:difference; pointer-events:none;
}
.sec-post-more__fact{
position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:1;
display:flex; align-items:center; justify-content:center; gap:10px; overflow:clip; mix-blend-mode:difference;
}
.sec-post-more__fact p{ white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--black); }
.sec-post-more__fact-dim{ color:var(--black-50); }
/* ---- Title row ---- */
.sec-post-more__title{
position:relative; z-index:1; width:100%;
display:flex; justify-content:space-between; align-items:flex-end; padding:150px 0 50px;
}
.sec-post-more__sub{
flex:1 0 0; min-width:0; align-self:stretch;
display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:30px;
}
.sec-post-more__tag{ display:flex; align-items:center; gap:15px; width:max-content; height:14px; color:var(--black); cursor:pointer; text-decoration:none; }
.sec-post-more__icons{ display:flex; align-items:center; width:40px; height:14px; color:var(--red); }
.sec-post-more__icon{ display:block; height:14px; flex:none; overflow:visible; }
.sec-post-more__label{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.sec-post-more__label-part{
display:block; white-space:pre;
font-size:14px; font-weight:600; line-height:14px; letter-spacing:-.04em; text-transform:uppercase; color:var(--black);
}
.sec-post-more__label-part--jp{ font-weight:500; color:var(--black-40); }
.sec-post-more__desc{ display:flex; flex-direction:column; width:100%; }
.sec-post-more__desc p{ width:100%; white-space:pre-wrap; text-align:left; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; color:var(--black-70); }
.sec-post-more__heading{ flex:2 0 0; min-width:0; display:flex; justify-content:space-between; align-items:flex-end; }
.sec-post-more__htext{ flex:1 0 0; min-width:0; display:flex; align-items:flex-start; gap:15px; overflow:clip; }
.sec-post-more__h2{ font-size:100px; font-weight:600; line-height:.8; letter-spacing:-.08em; color:var(--black); white-space:pre; }
.sec-post-more__h2-in{ display:inline-block; }
/* ---- Posts (1px ruled box) ---- */
.sec-post-more__posts{
position:relative; z-index:1; width:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
padding:1px 0 0 1px; overflow:clip;
}
.sec-post-more__posts::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-top-width:1px; border-bottom-width:1px; pointer-events:none; }
.sec-post-more__grid{
position:relative; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-auto-rows:min-content; justify-content:center; gap:0;
}
/* diagonal cut on the first image: 63×63 triangle in the section colour (source: rotated svg) */
.sec-post-more__corner{
position:absolute; top:0; left:0; z-index:3; width:63px; height:63px; pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 63'%3E%3Cpath d='M0 0H63L0 63Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}
/* ---- Card ---- */
.sec-post-more__card{
position:relative; display:flex; align-items:flex-start; justify-content:flex-start; gap:10px;
width:100%; min-width:0; color:var(--black); cursor:pointer; text-decoration:none;
}
.sec-post-more__post{ position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; overflow:hidden; }
.sec-post-more__media{ position:relative; display:flex; align-items:flex-start; gap:10px; width:100%; }
.sec-post-more__imgbox{
position:relative; z-index:2; flex:1 0 0; min-width:0; height:350px; overflow:hidden;
display:flex; align-items:flex-start; justify-content:center;
transition:height var(--bp-dur) var(--bp-ease);
}
.sec-post-more__img{ position:absolute; z-index:1; top:calc(50% - 175px); left:0; width:100%; height:350px; overflow:hidden; }
.sec-post-more__img img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.sec-post-more__content{
position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
width:100%; padding:40px 40px 60px; border-radius:10px; overflow:hidden;
}
.sec-post-more__inner{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; }
/* meta row is absolutely placed (like the hover variant) and the 32px it occupies is padding that collapses on hover */
.sec-post-more__main{
position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; width:100%; padding-top:32px;
transition:padding-top var(--bp-dur) var(--bp-ease);
}
.sec-post-more__meta{
position:absolute; top:0; left:0; z-index:1; display:flex; align-items:center; gap:10px; width:100%; height:12px;
transition:top var(--bp-dur) var(--bp-ease), opacity var(--bp-fade) var(--bp-ease), filter var(--bp-fade) var(--bp-ease);
}
.sec-post-more__date,.sec-post-more__read{ white-space:pre; font-size:12px; font-weight:600; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; }
.sec-post-more__date{ color:var(--black-50); }
.sec-post-more__read{ color:var(--black); }
.sec-post-more__dot{ display:block; flex:none; width:4px; height:4px; border-radius:7px; background:var(--black-30); }
.sec-post-more__ttl{ display:flex; align-items:flex-start; gap:10px; width:70%; overflow:hidden; }
.sec-post-more__ttl p{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:100%; overflow:clip;
white-space:pre-line; word-break:break-word; overflow-wrap:break-word;
font-size:16px; font-weight:700; line-height:1.3; letter-spacing:-.05em; color:var(--black);
}
.sec-post-more__more-wrap{ display:grid; grid-template-rows:0fr; width:100%; padding-top:0; transition:grid-template-rows var(--bp-dur) var(--bp-ease), padding-top var(--bp-dur) var(--bp-ease); }
.sec-post-more__more{
position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; min-height:0;
opacity:0; filter:blur(8px);
transition:opacity var(--bp-fade) var(--bp-ease), filter var(--bp-fade) var(--bp-ease);
}
.sec-post-more__excerpt{ display:flex; flex-direction:column; align-items:flex-start; gap:70px; width:100%; overflow:hidden; }
.sec-post-more__excerpt p{ width:100%; white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; text-align:left; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-.05em; color:var(--black-70); }
.sec-post-more__author{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.sec-post-more__by{ display:flex; align-items:center; gap:10px; }
.sec-post-more__avatar{ position:relative; flex:none; width:40px; height:40px; aspect-ratio:1; border-radius:25px; overflow:hidden; }
.sec-post-more__avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.sec-post-more__who{ display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; }
.sec-post-more__kind{ display:flex; align-items:center; justify-content:center; gap:3px; }
.sec-post-more__kind p{ white-space:pre; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:-.04em; color:var(--black); }
.sec-post-more__kind-dim{ color:var(--black-50) !important; }
.sec-post-more__name{ white-space:pre; font-size:14px; font-weight:600; line-height:1.4; letter-spacing:-.04em; color:var(--black); }
/* hover: image box collapses to 247px, meta fades/blurs out (and sits 20px above the title), excerpt + author fade in */
.sec-post-more__card:hover .sec-post-more__imgbox{ height:247px; }
.sec-post-more__card:hover .sec-post-more__main{ padding-top:0; }
.sec-post-more__card:hover .sec-post-more__meta{
top:-20px; opacity:0; filter:blur(7px);
transition:top var(--bp-dur) var(--bp-ease), opacity .5s var(--bp-ease) .1s, filter .5s var(--bp-ease) .1s;
}
.sec-post-more__card:hover .sec-post-more__more-wrap{ grid-template-rows:1fr; padding-top:20px; }
.sec-post-more__card:hover .sec-post-more__more{
z-index:1; opacity:1; filter:blur(0);
transition:opacity .5s var(--bp-ease) .1s, filter .5s var(--bp-ease) .1s;
}
/* ---- Button row ---- */
.sec-post-more__cta-row{
position:relative; z-index:1; width:100%;
display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:minmax(0,1fr); justify-content:center; gap:0;
}
.sec-post-more__cta-row::after{ content:""; position:absolute; inset:0; border:0 solid var(--line-light); border-bottom-width:1px; pointer-events:none; }
.sec-post-more__spacer{ position:relative; height:100%; overflow:clip; }
.sec-post-more__spacer::after{ content:""; position:absolute; inset:0; border:0 solid rgba(255,255,255,.15); border-right-width:1px; pointer-events:none; }
.sec-post-more__cta{
position:relative; display:flex; align-items:center; justify-content:space-between;
width:100%; height:40px; overflow:clip; cursor:pointer;
}
.sec-post-more__btn{
position:relative; display:flex; flex:1 0 0; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:10px;
height:60px; background:var(--black); color:var(--white); text-decoration:none;
transition:background-color .74s cubic-bezier(.25,.5,.24,1); /* leave: measured on the live site (slow spring, ~0.6s) */
}
.sec-post-more__btn-label{
position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
height:12px; overflow:clip; pointer-events:none; user-select:none;
}
.sec-post-more__btn-label p{ white-space:pre; font-size:12px; font-weight:700; line-height:12px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); }
.sec-post-more__w{ white-space:nowrap; }
.sec-post-more__ch{ display:inline-block; will-change:transform; }
.sec-post-more__plus{
position:absolute; top:20px; right:20px; z-index:1; width:20px; height:20px; aspect-ratio:1; pointer-events:none; user-select:none;
background:var(--white);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 7.5 0 L 7.5 15 M 15 7.5 L 0 7.5' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(4.5 4.5)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 7.5 0 L 7.5 15 M 15 7.5 L 0 7.5' fill='transparent' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' transform='translate(4.5 4.5)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
transition:transform .51s cubic-bezier(.3,.86,.33,1); /* leave: live spring ω≈15 */
}
/* hover (curves fitted to rAF samples of the live site): black → red in ~0.44s (exponential-like),
plus spins -180° (counter-clockwise) with a ~0.5s spring, letters jump 15px up out of the clipped label
and drop back in one by one (30ms stagger, 120ms ease). On leave they jump 15px down and rise back in. */
.sec-post-more__cta:hover .sec-post-more__btn{ background:var(--red); transition:background-color .44s cubic-bezier(.2,.98,.49,1); }
.sec-post-more__cta:hover .sec-post-more__plus{ transform:rotate(-180deg); transition:transform .48s cubic-bezier(.29,.66,.25,1); }
@keyframes sec-post-more-ch-in{ from{ transform:translateY(-15px); } to{ transform:translateY(0); } }
@keyframes sec-post-more-ch-out{ from{ transform:translateY(15px); } to{ transform:translateY(0); } }
.sec-post-more__cta--in .sec-post-more__ch{ animation:sec-post-more-ch-in .12s ease both; animation-delay:calc(45ms + var(--i) * 30ms); }
.sec-post-more__cta--out .sec-post-more__ch{ animation:sec-post-more-ch-out .12s ease both; animation-delay:calc(var(--i) * 30ms); }
/* ---- Responsive (secondary) ---- */
@media (min-width:1620px){
.sec-post-more{ padding:0; }
.sec-post-more__cols{ padding:0; }
.sec-post-more__wrap{ padding:0 0 200px; }
.sec-post-more__title{ align-items:center; padding:200px 0 100px; }
.sec-post-more__sub{ gap:40px; }
}
@media (min-width:810px) and (max-width:1199.98px){
.sec-post-more__wrap{ padding:0 0 120px; }
.sec-post-more__title{ align-items:flex-start; padding:100px 0 50px; }
.sec-post-more__sub{ align-self:auto; gap:30px; }
.sec-post-more__heading{ flex:1 0 0; }
}
@media (max-width:809.98px){
.sec-post-more__wrap{ padding:0; }
.sec-post-more__title{ flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:20px; padding:100px 0 50px; }
.sec-post-more__sub,.sec-post-more__heading{ flex:none; width:100%; align-self:auto; gap:20px; }
.sec-post-more__h2{ font-size:60px; }
.sec-post-more__posts{ padding:1px 1px 30px; }
.sec-post-more__grid{ grid-template-columns:minmax(50px,1fr); }
.sec-post-more__cta-row{ grid-template-columns:1fr; }
.sec-post-more__spacer{ display:none; }
.sec-post-more__cols{ grid-template-columns:1fr; }
.sec-post-more__col--2,.sec-post-more__col--3{ display:none; }
}