:root{
    --paper:#f2eee8;
    --paper-2:#e8e1d8;
    --ink:#171715;
    --muted:#756f68;
    --line:#d7d0c7;
    --accent:#b33417;
    --white:#fff;
    --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.45;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button,input,select{font:inherit}
button{color:inherit}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}

.topline{
    border-bottom:1px solid var(--line);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.topline-inner{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.topline b{font-weight:600}
.topline span{color:var(--muted)}

.header{
    position:sticky;
    top:0;
    z-index:40;
    background:rgba(242,238,232,.88);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(215,208,199,.78);
}
.header-inner{
    min-height:74px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
}
.brand{
    font-size:18px;
    letter-spacing:.16em;
    font-weight:600;
    text-transform:uppercase;
    justify-self:start;
}
.brand i{font-style:normal;color:var(--accent)}
.nav{
    display:flex;
    gap:28px;
    font-size:14px;
    color:#45413d;
}
.nav a{position:relative}
.nav a:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-5px;
    height:1px;background:var(--ink);
    transform:scaleX(0);transform-origin:left;
    transition:.2s ease;
}
.nav a:hover:after{transform:scaleX(1)}
.header-action{
    justify-self:end;
    border:1px solid var(--ink);
    padding:11px 18px;
    font-size:13px;
    font-weight:600;
    transition:.2s ease;
}
.header-action:hover{background:var(--ink);color:#fff}

.hero{
    min-height:760px;
    padding:58px 0 90px;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-grid{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:66px;
    align-items:center;
}
.hero-copy{position:relative;z-index:2}
.hero-index{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:26px;
    color:var(--muted);
    font-size:13px;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.hero-index:before{
    content:"";
    width:44px;height:1px;background:var(--accent);
}
h1{
    margin:0;
    max-width:690px;
    font-size:clamp(62px,8vw,118px);
    line-height:.83;
    letter-spacing:-.067em;
    font-weight:500;
}
h1 span{display:block}
h1 .outline{
    color:transparent;
    -webkit-text-stroke:1.4px var(--ink);
}
.hero-sub{
    max-width:540px;
    margin:30px 0 0;
    font-size:18px;
    color:var(--muted);
    font-weight:300;
}
.hero-links{
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:34px;
    flex-wrap:wrap;
}
.text-link{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:600;
}
.text-link:after{
    content:"↗";
    font-size:17px;
    transition:.2s ease;
}
.text-link:hover:after{transform:translate(2px,-2px)}
.solid-link{
    background:var(--accent);
    color:#fff;
    padding:15px 20px;
    font-size:14px;
    font-weight:600;
}

.hero-visual{
    position:relative;
    height:650px;
}
.hero-photo-main{
    position:absolute;
    inset:0 0 0 14%;
    overflow:hidden;
    background:#ddd6cd;
}
.hero-photo-main img{
    height:100%;
    object-fit:cover;
    object-position:center 18%;
}
.hero-photo-small{
    position:absolute;
    width:40%;
    left:0;
    bottom:7%;
    border:10px solid var(--paper);
    background:var(--paper-2);
    z-index:2;
}
.hero-photo-small img{aspect-ratio:3/4;object-fit:cover}
.hero-note{
    position:absolute;
    right:-24px;
    bottom:12px;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:var(--muted);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.model-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.model-strip-inner{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.model-chip{
    padding:22px 18px;
    border-right:1px solid var(--line);
    transition:.2s ease;
}
.model-chip:last-child{border-right:0}
.model-chip:hover{background:#ebe5dd}
.model-chip small{
    display:block;
    color:var(--accent);
    font-size:11px;
    letter-spacing:.12em;
    margin-bottom:6px;
}
.model-chip strong{font-size:15px;font-weight:500}

.intro{
    padding:110px 0 82px;
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:80px;
    align-items:start;
}
.eyebrow{
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
}
.intro h2{
    margin:0;
    font-size:clamp(42px,5vw,76px);
    line-height:.96;
    letter-spacing:-.05em;
    font-weight:500;
}
.intro p{
    color:var(--muted);
    font-size:18px;
    max-width:680px;
    margin:22px 0 0;
    font-weight:300;
}

.catalog{padding-bottom:110px}
.product{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    min-height:650px;
    border-top:1px solid var(--line);
    padding:70px 0;
    gap:72px;
    align-items:center;
}
.product:nth-child(even) .product-media{order:2}
.product:nth-child(even) .product-info{order:1}
.product-media{
    position:relative;
    min-height:620px;
    background:#e3ddd4;
    overflow:hidden;
}
.product-media img{
    width:100%;
    height:100%;
    min-height:620px;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.65,.3,1);
}
.product:hover .product-media img{transform:scale(1.018)}
.product-no{
    position:absolute;
    left:18px;
    top:16px;
    color:#fff;
    mix-blend-mode:difference;
    font-size:12px;
    letter-spacing:.15em;
}
.product-info{max-width:520px}
.product-kicker{
    color:var(--accent);
    font-size:12px;
    letter-spacing:.13em;
    text-transform:uppercase;
    margin-bottom:16px;
}
.product h3{
    margin:0;
    font-size:clamp(38px,4.2vw,64px);
    line-height:.95;
    letter-spacing:-.045em;
    font-weight:500;
}
.product p{
    margin:22px 0 26px;
    color:var(--muted);
    font-size:17px;
    font-weight:300;
}
.product-points{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:0 0 28px;
}


.size-table-wrap {
    width: 100%;
    margin: 28px 0 10px;
    font-family: inherit;
}

.size-table-head {
    margin-bottom: 18px;
}

.size-table-label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.45;
}

.size-table-head h4 {
    margin: 0 0 7px;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: #111;
}

.size-table-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.55);
}


/* TABLE WRAPPER */
.size-table-scroll {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.13);
}


/* TABLE */
.size-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
}


/* WIDTH OF COLUMNS */
.size-table thead th:first-child {
    width: 20%;
}

.size-table thead th:nth-child(2) {
    width: 45%;
}

.size-table thead th:nth-child(3) {
    width: 35%;
}


/* CELLS */
.size-table th,
.size-table td {
    padding: 16px 18px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    text-align: left;
    box-sizing: border-box;
}


/* TABLE HEAD */
.size-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;

    background: #111;
    color: rgba(255, 255, 255, 0.7);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* LAST ROW */
.size-table tbody tr:last-child th,
.size-table tbody tr:last-child td {
    border-bottom: 0;
}


/* SIZE COLUMN */
.size-table tbody th {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #111;
}


/* VALUES */
.size-table tbody td {
    color: #111;
}

.size-table tbody td strong {
    font-size: 15px;
    font-weight: 500;
}

.size-table tbody td span {
    margin-left: 3px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
}


/* HOVER DESKTOP */
@media (hover: hover) {
    .size-table tbody tr {
        transition: background-color 0.2s ease;
    }

    .size-table tbody tr:hover {
        background: #f3f3f1;
    }
}


/* NOTE */
.size-table-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 12px;
    padding: 13px 15px;

    background: #f3f3f1;
}

.size-table-note > span {
    flex: 0 0 auto;

    font-size: 15px;
    line-height: 1.2;
}

.size-table-note p {
    margin: 0;

    font-size: 11px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
}


/* MOBILE */
@media (max-width: 600px) {

    .size-table-wrap {
        margin-top: 22px;
    }

    .size-table-head {
        margin-bottom: 14px;
    }

    .size-table-head h4 {
        font-size: 22px;
    }

    .size-table-scroll {
        width: 100%;
        overflow: hidden;
    }

    .size-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .size-table th,
    .size-table td {
        padding: 14px 8px;
    }

    .size-table thead th {
        font-size: 8px;
        letter-spacing: 0.04em;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .size-table thead th:first-child {
        width: 20%;
    }

    .size-table thead th:nth-child(2) {
        width: 45%;
    }

    .size-table thead th:nth-child(3) {
        width: 35%;
    }

    .size-table tbody th {
        font-size: 18px;
    }

    .size-table tbody td strong {
        font-size: 13px;
    }

    .size-table tbody td span {
        display: block;
        margin: 3px 0 0;

        font-size: 9px;
    }

    .size-table-note {
        padding: 12px;
    }
}



.product-point{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
}
.product-point:last-child{border-bottom:0}
.product-point span:first-child{color:var(--muted)}
.product-point span:last-child{text-align:right;font-weight:500}
.choose{
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    font-weight:600;
}
.choose:after{
    content:"→";
    font-size:21px;
    transition:.2s ease;
}
.choose:hover:after{transform:translateX(5px)}

.quote{
    background:var(--ink);
    color:#fff;
    padding:96px 0;
}
.quote-inner{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:70px;
    align-items:start;
}
.quote .eyebrow{color:#d55d41}
.quote blockquote{
    margin:0;
    max-width:900px;
    font-size:clamp(38px,5vw,72px);
    line-height:.96;
    letter-spacing:-.045em;
    font-weight:300;
}
.quote blockquote strong{font-weight:600}

.order{padding:110px 0}
.order-grid{
    display:grid;
    grid-template-columns:.86fr 1.14fr;
    gap:90px;
    align-items:start;
}
.order h2{
    margin:0 0 24px;
    font-size:clamp(44px,5vw,74px);
    line-height:.95;
    letter-spacing:-.05em;
    font-weight:500;
}
.order-copy p{color:var(--muted);font-size:17px;max-width:500px;font-weight:300}
.order-meta{
    margin-top:34px;
    padding-top:22px;
    border-top:1px solid var(--line);
    display:grid;
    gap:10px;
    color:#49443f;
    font-size:13px;
}

form{
    background:#ece5dc;
    padding:34px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
label{
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#4d4843;
}
input,select{
    width:100%;
    height:54px;
    border:0;
    border-bottom:1px solid #bfb6ac;
    background:transparent;
    border-radius:0;
    outline:none;
    padding:0 3px;
    color:var(--ink);
}
input:focus,select:focus{border-bottom-color:var(--ink)}
.submit{
    grid-column:1/-1;
    min-height:56px;
    background:var(--ink);
    color:#fff;
    border:0;
    cursor:pointer;
    font-weight:600;
    margin-top:6px;
    transition:.2s ease;
}
.submit:hover{background:var(--accent)}
.form-note{
    grid-column:1/-1;
    margin:0;
    color:var(--muted);
    font-size:11px;
}
.success{
    grid-column:1/-1;
    display:none;
    padding:13px 14px;
    background:#dfe9dd;
    color:#2f5b2b;
    font-size:13px;
}
.success.show{display:block}

footer{
    border-top:1px solid var(--line);
    padding:28px 0 46px;
    font-size:12px;
    color:var(--muted);
}
.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.mobile-bar{display:none}

@media (max-width: 960px){
    .header-inner{grid-template-columns:1fr auto}
    .nav{display:none}
    .hero{min-height:auto;padding:42px 0 70px}
    .hero-grid{grid-template-columns:1fr;gap:42px}
    .hero-visual{height:600px}
    .model-strip-inner{grid-template-columns:1fr 1fr}
    .model-chip:nth-child(2){border-right:0}
    .model-chip:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .intro{grid-template-columns:1fr;gap:20px;padding:82px 0 54px}
    .product{grid-template-columns:1fr;gap:34px;padding:54px 0}
    .product:nth-child(even) .product-media,
    .product:nth-child(even) .product-info{order:initial}
    .product-info{max-width:none}
    .product-media,.product-media img{min-height:560px}
    .quote-inner,.order-grid{grid-template-columns:1fr;gap:34px}
}

@media (max-width: 640px){
    .wrap{width:min(100% - 24px,var(--max))}
    .topline-inner{min-height:34px}
    .topline span{display:none}
    .header-inner{min-height:62px}
    .brand{font-size:15px}
    .header-action{display:none}
    .hero{padding-top:28px}
    h1{font-size:60px}
    .hero-sub{font-size:16px}
    .hero-links{align-items:stretch}
    .solid-link{width:100%;text-align:center}
    .hero-visual{height:500px}
    .hero-photo-main{inset:0}
    .hero-photo-small{width:36%;left:-4px;bottom:5%;border-width:7px}
    .hero-note{display:none}
    .model-strip-inner{grid-template-columns:1fr}
    .model-chip{
        border-right:0;
        border-bottom:1px solid var(--line)!important;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
    }
    .model-chip:last-child{border-bottom:0!important}
    .model-chip small{margin:0}
    .intro{padding-top:66px}
    .intro h2{font-size:46px}
    .intro p{font-size:16px}
    .product{padding:42px 0;gap:28px}
    .product-media,.product-media img{min-height:470px}
    .product h3{font-size:43px}
    .product p{font-size:16px}
    .quote{padding:70px 0}
    .quote blockquote{font-size:43px}
    .order{padding:72px 0 96px}
    form{grid-template-columns:1fr;padding:22px}
    .field.full,.submit,.form-note,.success{grid-column:auto}
    .footer-inner{display:block}
    .footer-inner div+div{margin-top:7px}

    .mobile-bar{
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        position:fixed;
        z-index:60;
        bottom:0;
        left:0;right:0;
        min-height:66px;
        padding:10px 12px;
        background:rgba(23,23,21,.96);
        color:#fff;
        backdrop-filter:blur(14px);
    }
    .mobile-bar small{
        display:block;
        color:#b9b3ad;
        margin-bottom:1px;
        font-size:10px;
        letter-spacing:.08em;
        text-transform:uppercase;
    }
    .mobile-bar strong{font-size:13px;font-weight:500}
    .mobile-bar a{
        background:#fff;
        color:#111;
        padding:12px 15px;
        font-size:12px;
        font-weight:600;
    }
}