.kasier-fabrication {
--kasier-red: #c90907;
--kasier-black: #171717;
--kasier-gray: #666666;
--kasier-border: #e5e5e5;
--kasier-light: #f7f7f7;
width: 100%;
padding: 0;
overflow: hidden;
background: #ffffff;
}
.kasier-fabrication *,
.kasier-fabrication *::before,
.kasier-fabrication *::after {
box-sizing: border-box;
}
.kasier-fabrication__container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.kasier-fabrication__visual {
position: relative;
min-height: 520px;
overflow: hidden;
background: #202020;
}
.kasier-fabrication__visual img {
width: 100%;
height: 100%;
min-height: 520px;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
.kasier-fabrication__visual:hover img {
transform: scale(1.02);
}
.kasier-fabrication__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
text-align: center;
}
.kasier-fabrication__content {
position: relative;
min-height: 520px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px clamp(35px, 4vw, 70px);
background:
repeating-linear-gradient(
135deg,
rgba(0, 0, 0, 0.018) 0,
rgba(0, 0, 0, 0.018) 1px,
transparent 1px,
transparent 5px
),
#ffffff;
}
.kasier-fabrication__eyebrow {
margin: 0 0 18px;
color: #969696;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.kasier-fabrication__title {
max-width: 790px;
margin: 0 0 22px;
color: var(--kasier-red);
font-size: clamp(34px, 3vw, 48px);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.035em;
}
.kasier-fabrication__separator {
width: 75px;
height: 2px;
margin-bottom: 24px;
background:
repeating-linear-gradient(
90deg,
var(--kasier-red) 0,
var(--kasier-red) 3px,
transparent 3px,
transparent 6px
);
}
.kasier-fabrication__intro {
max-width: 790px;
margin: 0 0 24px;
color: var(--kasier-gray);
font-size: 15px;
line-height: 1.65;
}
.kasier-fabrication__options {
display: grid;
gap: 0;
margin: 0 0 24px;
border-top: 1px solid var(--kasier-border);
}
.kasier-fabrication__option {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
padding: 16px 0;
border-bottom: 1px solid var(--kasier-border);
}
.kasier-fabrication__number {
display: block;
margin: 3px 0 0;
font-size: 18px;
line-height: 1;
letter-spacing: 0;
}
.kasier-fabrication__option-content {
min-width: 0;
}
.kasier-fabrication__option h3 {
margin: 0 0 7px;
color: var(--kasier-black);
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
.kasier-fabrication__option p {
margin: 0;
color: var(--kasier-gray);
font-size: 13px;
line-height: 1.6;
}
.kasier-fabrication__conclusion {
margin: 0 0 20px;
padding: 15px 18px;
border-left: 3px solid var(--kasier-red);
background: var(--kasier-light);
color: #3e3e3e;
font-size: 13px;
line-height: 1.65;
}
.kasier-fabrication__button {
width: fit-content;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 21px;
border: 1px solid var(--kasier-black);
background: var(--kasier-black);
color: #ffffff !important;
font-size: 12px;
font-weight: 750;
line-height: 1;
text-decoration: none !important;
text-transform: uppercase;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.kasier-fabrication__button:hover {
border-color: var(--kasier-red);
background: var(--kasier-red);
transform: translateY(-2px);
}
@media (max-width: 1050px) {
.kasier-fabrication__container {
grid-template-columns: 1fr;
}
.kasier-fabrication__visual,
.kasier-fabrication__visual img {
min-height: 430px;
}
.kasier-fabrication__content {
min-height: auto;
padding: 55px 36px;
}
}
@media (max-width: 767px) {
.kasier-fabrication__visual,
.kasier-fabrication__visual img {
min-height: 320px;
}
.kasier-fabrication__content {
padding: 45px 20px;
}
.kasier-fabrication__title {
font-size: clamp(32px, 10vw, 43px);
}
.kasier-fabrication__intro {
font-size: 14px;
}
.kasier-fabrication__option {
grid-template-columns: 26px minmax(0, 1fr);
column-gap: 12px;
padding: 14px 0;
}
.kasier-fabrication__number {
font-size: 17px;
}
.kasier-fabrication__button {
width: 100%;
}
}
/* KAS-29: heading row, image/options columns, full-width project action. */
.kasier-fabrication{padding:70px 24px;}
.kasier-fabrication__container{max-width:1200px;margin:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 48px;align-items:stretch;}
.kasier-fabrication__heading{grid-column:1/-1;text-align:center;}
.kasier-fabrication__title,.kasier-fabrication__intro{margin-left:auto;margin-right:auto;}
.kasier-fabrication__separator{margin-left:auto;margin-right:auto;}
.kasier-fabrication__intro{margin-bottom:0;}
.kasier-fabrication__visual{min-height:0;background:#f5f5f5;}
.kasier-fabrication__visual img{min-height:0;height:100%;width:100%;object-fit:cover;object-position:center;}
.kasier-fabrication__options{margin:0;align-content:stretch;}
.kasier-fabrication__option{grid-template-columns:66px minmax(0,1fr);gap:20px;padding:24px 0;align-items:start;}
.kasier-fabrication__number{font-family:"Titillium Web",sans-serif;font-size:56px;font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--kasier-red);}
@supports(-webkit-text-stroke:1px red){.kasier-fabrication__number{color:transparent;-webkit-text-stroke:1px var(--kasier-red);}}
.kasier-fabrication__option h3{font-size:20px;}
.kasier-fabrication__option p{font-size:15px;}
.kasier-fabrication__footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 32px;background:var(--kasier-light);}
.kasier-fabrication__conclusion{margin:0;padding:0;border:0;max-width:760px;font-size:15px;}
.kasier-fabrication__button{flex-shrink:0;min-height:52px;}
@media(max-width:900px){.kasier-fabrication__container{gap:28px;}.kasier-fabrication__option{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:18px 0;}.kasier-fabrication__number{font-size:44px;}.kasier-fabrication__footer{flex-direction:column;text-align:center;}}
@media(max-width:767px){.kasier-fabrication{padding:48px 20px;}.kasier-fabrication__container{grid-template-columns:1fr;}.kasier-fabrication__visual{aspect-ratio:4/3;}.kasier-fabrication__visual img{height:100%;min-height:0;}.kasier-fabrication__footer{padding:24px 20px;}}