/* ============================================================
   Tailoring Service — customer facing
   Uses the site's existing identity: --primary red, white,
   dark text, Plus Jakarta Sans / Hind Siliguri.
   ============================================================ */

.tl-wrap { background: #fff; color: var(--text, #111311); }
.tl-container { max-width: var(--container, 1240px); margin: 0 auto; padding: 0 16px; }

/* Our own display rules (inline-flex buttons, flex rows) would otherwise beat
   the browser's default [hidden] styling, so honour `hidden` explicitly.
   Scoped to the tailoring UI so no other page is affected. */
.tl-wrap [hidden] { display: none !important; }

/* ---------------------------------------------------------- hero */
.tl-hero {
    position: relative;
    background: linear-gradient(105deg, #17181a 0%, #1f2124 52%, #2b2d31 100%);
    color: #fff;
    overflow: hidden;
}
.tl-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(1100px 460px at 82% 12%, rgba(var(--primary-rgb, 214,0,0), .30), transparent 62%);
    pointer-events: none;
}
.tl-hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 44px; align-items: center;
    padding: 66px 0 72px;
}
.tl-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--primary, #d60000);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.tl-hero h1 {
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.08; font-weight: 800; letter-spacing: -.5px; margin: 0 0 16px;
}
.tl-hero h1 em { font-style: normal; color: var(--primary, #d60000); }
.tl-hero p { font-size: 16px; line-height: 1.72; color: #d5d7db; max-width: 520px; margin: 0 0 26px; }
.tl-hero-media {
    border-radius: 18px; overflow: hidden; min-height: 330px;
    background: #232529 center/cover no-repeat;
    box-shadow: 0 26px 60px rgba(0,0,0,.42);
}
.tl-hero-media img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; display: block; }

.tl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 28px; border-radius: 10px; font-weight: 700; font-size: 15px;
    border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.tl-btn-primary { background: var(--primary, #d60000); color: #fff; }
.tl-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--primary-rgb,214,0,0), .34); }
.tl-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.tl-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.tl-btn-light { background: #fff; color: var(--text, #111311); border-color: var(--border, #dedfde); }
.tl-btn-light:hover { border-color: var(--primary, #d60000); color: var(--primary, #d60000); }
.tl-btn[disabled], .tl-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------- sections */
.tl-section { padding: 64px 0; }
.tl-section.alt { background: #fafafa; }
.tl-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.tl-head h2 { font-size: clamp(23px, 2.7vw, 33px); font-weight: 800; letter-spacing: -.3px; margin: 0 0 12px; }
.tl-head p { color: var(--muted, #666); font-size: 15px; line-height: 1.7; margin: 0; }
.tl-rule { width: 54px; height: 3px; background: var(--primary, #d60000); border-radius: 3px; margin: 0 auto 18px; }

/* ---------------------------------------------------------- service cards */
.tl-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tl-service {
    background: #fff; border: 1px solid var(--border, #dedfde); border-radius: 16px;
    padding: 30px 26px; display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tl-service:hover { transform: translateY(-4px); border-color: var(--primary, #d60000); box-shadow: 0 16px 38px rgba(17,19,17,.09); }
.tl-service-icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(var(--primary-rgb, 214,0,0), .1); color: var(--primary, #d60000);
    font-size: 22px; margin-bottom: 18px;
}
.tl-service h3 { font-size: 18px; font-weight: 800; margin: 0 0 9px; }
.tl-service p { color: var(--muted, #666); font-size: 14px; line-height: 1.68; margin: 0 0 18px; flex: 1; }
.tl-service .tl-btn { width: 100%; }

/* ---------------------------------------------------------- steps */
.tl-how { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tl-how-item { text-align: center; position: relative; }
.tl-how-num {
    width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
    display: grid; place-items: center; font-weight: 800; font-size: 16px;
    background: var(--primary, #d60000); color: #fff;
}
.tl-how-item h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.tl-how-item p { font-size: 13px; color: var(--muted, #666); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------- value strip */
.tl-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tl-value { display: flex; gap: 13px; align-items: flex-start; }
.tl-value i { color: var(--primary, #d60000); font-size: 19px; margin-top: 2px; }
.tl-value h4 { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.tl-value p { font-size: 13px; color: var(--muted, #666); margin: 0; line-height: 1.6; }

/* ---------------------------------------------------------- fabric strip */
.tl-fabrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tl-fabric {
    border: 1px solid var(--border, #dedfde); border-radius: 14px; overflow: hidden;
    background: #fff; text-decoration: none; color: inherit; display: block;
    transition: transform .16s ease, box-shadow .16s ease;
}
.tl-fabric:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(17,19,17,.1); color: inherit; }
.tl-fabric-img { aspect-ratio: 4/3; background: #f3f4f6; }
.tl-fabric-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-fabric-body { padding: 14px 15px 16px; }
.tl-fabric-body h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; line-height: 1.45; }
.tl-fabric-price { font-size: 15px; font-weight: 800; color: var(--primary, #d60000); }

/* ============================================================
   WIZARD
   ============================================================ */
.tl-wizard { padding: 30px 0 120px; background: #fafafa; min-height: 60vh; }
.tl-wizard-grid { display: grid; grid-template-columns: 1fr 330px; gap: 26px; align-items: start; }

/* progress */
.tl-steps { display: flex; align-items: center; margin: 0 0 26px; }
.tl-step { display: flex; align-items: center; flex: 1; }
.tl-step:last-child { flex: 0 0 auto; }
.tl-step-dot {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
    background: #fff; color: #9aa0a6; border: 2px solid var(--border, #dedfde);
    transition: all .2s ease;
}
.tl-step-label { margin-left: 10px; font-size: 13px; }
.tl-step-label b { display: block; font-weight: 700; font-size: 13px; color: #9aa0a6; line-height: 1.3; }
.tl-step-label span { font-size: 11px; color: #b0b4b8; }
.tl-step-line { flex: 1; height: 2px; background: var(--border, #dedfde); margin: 0 14px; border-radius: 2px; }
.tl-step.is-active .tl-step-dot { background: var(--primary, #d60000); border-color: var(--primary, #d60000); color: #fff; }
.tl-step.is-active .tl-step-label b { color: var(--primary, #d60000); }
.tl-step.is-done .tl-step-dot { background: #fff; border-color: var(--primary, #d60000); color: var(--primary, #d60000); }
.tl-step.is-done .tl-step-label b { color: var(--text, #111311); }
.tl-step.is-done + .tl-step-line, .tl-step.is-done .tl-step-line { background: var(--primary, #d60000); }

/* panels */
.tl-panel {
    background: #fff; border: 1px solid var(--border, #dedfde);
    border-radius: 16px; padding: 28px; margin-bottom: 18px;
}
.tl-panel[hidden] { display: none; }
.tl-panel-head { margin-bottom: 22px; }
.tl-panel-head h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.2px; }
.tl-panel-head p { color: var(--muted, #666); font-size: 14px; margin: 0; }

/* garment / option cards */
.tl-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tl-pick { position: relative; cursor: pointer; display: block; height: 100%; }
.tl-pick input { position: absolute; opacity: 0; pointer-events: none; }
/* the box and its children are <span>s so they can live inside <label>;
   they must be forced to block or the card collapses to an inline run */
.tl-pick-box {
    display: block;
    border: 2px solid var(--border, #dedfde); border-radius: 14px; padding: 16px;
    background: #fff; height: 100%; transition: all .16s ease; text-align: center;
}
.tl-pick:hover .tl-pick-box { border-color: #bdbfc2; }
.tl-pick input:checked + .tl-pick-box {
    border-color: var(--primary, #d60000);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 214,0,0), .1);
}
.tl-pick input:focus-visible + .tl-pick-box { outline: 2px solid var(--primary, #d60000); outline-offset: 2px; }
.tl-pick-tick {
    position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border, #dedfde); background: #fff; display: grid; place-items: center;
}
.tl-pick input:checked ~ .tl-pick-tick { border-color: var(--primary, #d60000); background: var(--primary, #d60000); }
.tl-pick input:checked ~ .tl-pick-tick::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.tl-pick-img {
    aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: #f4f5f6;
    margin-bottom: 12px; display: grid; place-items: center; color: #c6c9cc; font-size: 26px;
}
.tl-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.tl-pick-name { display: block; font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.tl-pick-price { display: block; font-size: 14px; font-weight: 800; color: var(--primary, #d60000); }
.tl-pick-desc { display: block; font-size: 12px; color: var(--muted, #666); margin-top: 5px; line-height: 1.55; }

/* method cards (wide, left aligned) */
.tl-methods { display: grid; gap: 13px; }
.tl-method .tl-pick-box { display: flex; gap: 15px; align-items: flex-start; text-align: left; padding: 18px 20px; }
.tl-method-icon {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(var(--primary-rgb, 214,0,0), .1); color: var(--primary, #d60000); font-size: 18px;
}
.tl-method h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.tl-method p { font-size: 13px; color: var(--muted, #666); margin: 0; line-height: 1.6; }

/* form fields */
.tl-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tl-field label.tl-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.tl-field .req { color: var(--primary, #d60000); }
.tl-input, .tl-select, .tl-textarea {
    width: 100%; border: 1.5px solid var(--border, #dedfde); border-radius: 10px;
    padding: 12px 14px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text, #111311);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tl-input:focus, .tl-select:focus, .tl-textarea:focus {
    outline: none; border-color: var(--primary, #d60000);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 214,0,0), .1);
}
.tl-input-wrap { position: relative; }
.tl-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted, #666); pointer-events: none; }
.tl-help-btn {
    border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted, #666);
    font-size: 12px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border, #dedfde);
    line-height: 1; display: inline-grid; place-items: center;
}
.tl-help-btn:hover { color: var(--primary, #d60000); border-color: var(--primary, #d60000); }
.tl-help { display: none; font-size: 12px; color: var(--muted, #666); margin-top: 7px; line-height: 1.6;
           background: #fafafa; border-left: 2px solid var(--primary, #d60000); padding: 8px 11px; border-radius: 0 8px 8px 0; }
.tl-help.is-open { display: block; }
.tl-error { color: #d0342c; font-size: 12px; margin-top: 6px; }
.tl-input.is-invalid, .tl-select.is-invalid { border-color: #d0342c; }

/* ---------------------------------------------------------- option cards
   Design / Fit choices. Bilingual, touch friendly, single or multi select. */
.tl-field-cards { }
.tl-pickhint {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted, #666);
    text-transform: none; letter-spacing: 0;
}
.tl-opts {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px;
}
.tl-opt { position: relative; cursor: pointer; display: block; }
.tl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tl-opt-box {
    display: block; position: relative; height: 100%;
    border: 1.5px solid var(--border, #dedfde); border-radius: 12px;
    background: #fff; padding: 14px 14px 13px 38px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tl-opt:hover .tl-opt-box { border-color: #b9bbbe; }
.tl-opt-en {
    display: block; font-size: 14px; font-weight: 700; line-height: 1.35;
    color: var(--text, #111311);
}
.tl-opt-bn {
    display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500;
    line-height: 1.5; color: var(--muted, #666);
}
/* selection indicator — circle for single choice, square for multi */
.tl-opt-tick {
    position: absolute; left: 13px; top: 15px; width: 17px; height: 17px;
    border: 1.5px solid #c9cbcd; border-radius: 50%; background: #fff;
    display: grid; place-items: center; transition: all .15s ease;
}
.tl-opt input[type="checkbox"] + .tl-opt-box .tl-opt-tick { border-radius: 5px; }
.tl-opt input:checked + .tl-opt-box {
    border-color: var(--primary, #d60000);
    background: rgba(var(--primary-rgb, 214,0,0), .035);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 214,0,0), .09);
}
.tl-opt input:checked + .tl-opt-box .tl-opt-en { color: var(--primary, #d60000); }
.tl-opt input:checked + .tl-opt-box .tl-opt-tick {
    border-color: var(--primary, #d60000); background: var(--primary, #d60000);
}
.tl-opt input[type="radio"]:checked + .tl-opt-box .tl-opt-tick::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
.tl-opt input[type="checkbox"]:checked + .tl-opt-box .tl-opt-tick::after {
    content: ''; width: 9px; height: 5px; margin-top: -2px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.tl-opt input:focus-visible + .tl-opt-box {
    outline: 2px solid var(--primary, #d60000); outline-offset: 2px;
}

/* chip style choice groups */
.tl-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.tl-chip { position: relative; cursor: pointer; }
.tl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tl-chip span {
    display: inline-block; border: 1.5px solid var(--border, #dedfde); border-radius: 999px;
    padding: 9px 17px; font-size: 13px; font-weight: 600; background: #fff; transition: all .15s ease;
}
.tl-chip input:checked + span { border-color: var(--primary, #d60000); background: var(--primary, #d60000); color: #fff; }

/* group heading inside a panel */
.tl-group-title {
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted, #666); margin: 26px 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border, #dedfde);
}
.tl-group-title:first-child { margin-top: 0; }

/* saved measurement picker */
.tl-saved { display: grid; gap: 10px; margin-bottom: 20px; }
.tl-saved-item .tl-pick-box { text-align: left; padding: 14px 16px; }
.tl-saved-item h4 { font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.tl-saved-item p { font-size: 12px; color: var(--muted, #666); margin: 0; }

/* review */
.tl-review-row {
    display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
    padding: 15px 0; border-bottom: 1px dashed var(--border, #dedfde);
}
.tl-review-row:last-child { border-bottom: 0; }
.tl-review-key { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #666); }
.tl-review-val { font-size: 14px; margin-top: 4px; line-height: 1.65; }
.tl-review-edit { background: none; border: 0; color: var(--primary, #d60000); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tl-review-edit:hover { text-decoration: underline; }
.tl-kvlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; margin-top: 6px; }
.tl-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f1f2f3; }
.tl-kv span:first-child { color: var(--muted, #666); }
.tl-kv span:last-child { font-weight: 700; }

/* summary panel */
.tl-summary { background: #fff; border: 1px solid var(--border, #dedfde); border-radius: 16px; padding: 22px; position: sticky; top: 20px; }
.tl-summary h3 { font-size: 15px; font-weight: 800; margin: 0 0 16px; }
.tl-sum-fabric { display: flex; gap: 12px; margin-bottom: 16px; }
.tl-sum-fabric img { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; flex: 0 0 62px; background: #f3f4f6; }
.tl-sum-fabric h4 { font-size: 13px; font-weight: 700; margin: 0 0 5px; line-height: 1.45; }
.tl-sum-line { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid #f1f2f3; }
.tl-sum-line span:last-child { font-weight: 700; }
.tl-sum-total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; padding-top: 14px; margin-top: 4px; }
.tl-sum-total span:last-child { color: var(--primary, #d60000); }
.tl-sum-note { font-size: 11.5px; color: var(--muted, #666); line-height: 1.6; margin-top: 12px; }

/* nav bar */
.tl-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.tl-nav .tl-btn { min-width: 140px; }

/* alerts / empty */
.tl-alert {
    border: 1px solid var(--border, #dedfde); border-left: 3px solid var(--primary, #d60000);
    background: #fff; border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.65;
    color: var(--text, #111311); margin-bottom: 18px;
}
.tl-alert i { color: var(--primary, #d60000); margin-right: 7px; }

/* success */
.tl-success { max-width: 620px; margin: 0 auto; text-align: center; padding: 56px 0 90px; }
.tl-success-badge {
    width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 24px; display: grid; place-items: center;
    background: rgba(16,163,74,.12); color: #10a34a; font-size: 40px;
}
.tl-success h1 { font-size: 27px; font-weight: 800; margin: 0 0 12px; }
.tl-success > p { color: var(--muted, #666); font-size: 15px; line-height: 1.75; margin: 0 0 26px; }
.tl-success-id {
    display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800;
    background: #fafafa; border: 1px dashed var(--border, #dedfde); border-radius: 10px;
    padding: 12px 22px; font-size: 17px; margin-bottom: 26px; letter-spacing: .04em;
}
.tl-success-card { background: #fff; border: 1px solid var(--border, #dedfde); border-radius: 16px; padding: 24px; text-align: left; margin-bottom: 26px; }
.tl-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* next-steps list */
.tl-next { list-style: none; padding: 0; margin: 0; }
.tl-next li { display: flex; gap: 12px; padding: 11px 0; font-size: 13.5px; line-height: 1.6; border-bottom: 1px solid #f4f5f6; }
.tl-next li:last-child { border-bottom: 0; }
.tl-next i { color: var(--primary, #d60000); margin-top: 3px; }

/* product-detail CTA */
.tl-detail-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 12px; padding: 15px 20px; border-radius: 10px;
    background: var(--primary, #d60000); color: #fff; font-weight: 700; font-size: 15px;
    text-decoration: none; border: 1.5px solid var(--primary, #d60000);
    transition: transform .16s ease, box-shadow .16s ease;
}
.tl-detail-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--primary-rgb,214,0,0), .3); }
.tl-detail-cta small { display: block; font-size: 11.5px; font-weight: 500; opacity: .88; }

/* status pill (dashboard) */
.tl-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.tl-pill.warning { background: rgba(255,188,0,.16); color: #b07d00; }
.tl-pill.primary { background: rgba(var(--primary-rgb,214,0,0), .12); color: var(--primary, #d60000); }
.tl-pill.info    { background: rgba(57,175,209,.16); color: #2c8fad; }
.tl-pill.success { background: rgba(16,163,74,.14); color: #10a34a; }
.tl-pill.danger  { background: rgba(208,52,44,.13); color: #d0342c; }

/* timeline */
.tl-timeline { list-style: none; padding: 0; margin: 0; }
.tl-timeline li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid #eceeef; }
.tl-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-timeline li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary, #d60000); }
.tl-timeline b { font-size: 13.5px; }
.tl-timeline small { display: block; color: var(--muted, #666); font-size: 12px; margin-top: 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .tl-wizard-grid { grid-template-columns: 1fr; }
    .tl-summary { position: static; }
}
@media (max-width: 991px) {
    .tl-hero-inner { grid-template-columns: 1fr; gap: 30px; padding: 46px 0 52px; }
    .tl-hero-media { min-height: 250px; }
    .tl-hero-media img { min-height: 250px; }
    .tl-services { grid-template-columns: 1fr; }
    .tl-how { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
    .tl-values { grid-template-columns: repeat(2, 1fr); }
    .tl-fabrics { grid-template-columns: repeat(3, 1fr); }
    .tl-pick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .tl-section { padding: 44px 0; }
    .tl-panel { padding: 20px 17px; border-radius: 14px; }
    .tl-fields { grid-template-columns: 1fr; gap: 14px; }
    .tl-kvlist { grid-template-columns: 1fr; }
    /* two compact option cards per row on phones */
    .tl-opts { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .tl-opt-box { padding: 12px 11px 11px 33px; }
    .tl-opt-tick { left: 11px; top: 13px; }
    .tl-opt-en { font-size: 13px; }
    .tl-opt-bn { font-size: 11.5px; }
    .tl-pickhint { flex-basis: 100%; margin-left: 0; }
    .tl-fabrics { grid-template-columns: repeat(2, 1fr); }
    .tl-pick-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tl-how { grid-template-columns: 1fr; }
    .tl-values { grid-template-columns: 1fr; }

    /* compact progress: numbers only */
    .tl-step-label { display: none; }
    .tl-steps { margin-bottom: 18px; }
    .tl-step-line { margin: 0 7px; }

    .tl-wizard { padding: 18px 0 104px; }
    .tl-review-row { flex-direction: column; gap: 6px; }

    /* sticky bottom navigation */
    .tl-nav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: #fff; border-top: 1px solid var(--border, #dedfde);
        padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
        margin: 0; box-shadow: 0 -6px 22px rgba(17,19,17,.09);
    }
    .tl-nav .tl-btn { flex: 1; min-width: 0; padding: 14px 12px; }
    .tl-success { padding: 36px 0 60px; }
    .tl-success-actions .tl-btn { width: 100%; }
}
@media (max-width: 380px) {
    .tl-pick-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 5G — multi-garment order, delivery & payment
   ============================================================ */
.tl-bn { font-family: 'Hind Siliguri', sans-serif; font-weight: 600; opacity: .75; margin-left: 4px; }
.tl-fabric-qty { display: grid; grid-template-columns: 1fr 190px; gap: 18px; align-items: end;
                 border: 1px solid var(--border, #dedfde); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.tl-gentries { display: grid; gap: 18px; }
.tl-gentry { border: 1px solid var(--border, #dedfde); border-radius: 14px; padding: 16px; background: #fcfcfc; }
.tl-gentry-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.tl-gentry-title { font-size: 15px; font-weight: 800; margin: 0; }
.tl-gentry-remove { background: none; border: 1px solid #f1c9c6; color: #d0342c; border-radius: 999px;
                    font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; }
.tl-gentry-remove:hover { background: #fdf1f0; }
.tl-add { width: 100%; justify-content: center; margin-top: 18px; border-style: dashed !important; flex-wrap: wrap; }
.tl-eblock { border-top: 1px dashed var(--border, #dedfde); padding-top: 18px; margin-top: 18px; }
.tl-eblock:first-child { border-top: 0; padding-top: 0; margin-top: 18px; }
.tl-eblock-title { font-size: 15px; font-weight: 800; margin: 0 0 12px; color: var(--primary, #d60000); }
.tl-reco { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
           background: rgba(16,163,74,.12); color: #10a34a; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.tl-save-row { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 13.5px; cursor: pointer; }
.tl-saved-fill { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; background: #fff;
                 border: 1px solid var(--border, #dedfde); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; }
.tl-saved-fill i { color: var(--primary, #d60000); }
.tl-saved-fill b { display: block; font-size: 14px; }
.tl-saved-fill small { color: var(--muted, #666); font-size: 12px; }
.tl-saved-fill.is-used { border-color: var(--primary, #d60000); box-shadow: 0 0 0 3px rgba(var(--primary-rgb,214,0,0), .10); }
.tl-ship-note { font-size: 13.5px; font-weight: 700; padding: 12px 0; }

.tl-rv-garment { border: 1px solid var(--border, #dedfde); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.tl-rv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tl-rv-head strong { color: var(--primary, #d60000); }
.tl-rv-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
            background: var(--primary, #d60000); color: #fff; font-size: 12px; font-weight: 800; }
.tl-rv-sub { font-size: 12.5px; color: var(--muted, #666); margin-top: 4px; }
.tl-rv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.tl-rv-cols em { font-size: 13px; color: var(--muted, #666); }
.tl-rv-cols .tl-kvlist { grid-template-columns: 1fr; }
.tl-rv-cols .tl-review-edit { font-size: 11.5px; margin-left: 6px; letter-spacing: 0; text-transform: none; }

.tl-totals { background: #fafafa; border-radius: 12px; padding: 6px 16px 14px; margin: 18px 0 6px; }
.tl-sum-line.tl-strong span { font-weight: 800; color: var(--text, #111311); }
.tl-payopts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tl-payopt .tl-pick-box { text-align: left; padding: 16px 16px 16px 44px; }
.tl-payopt-title { display: block; font-weight: 800; font-size: 14px; }
.tl-payopt-amt { display: block; font-size: 20px; font-weight: 800; color: var(--primary, #d60000); margin: 4px 0; }
.tl-paynow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 6px; }
.tl-paynow > div { border-radius: 12px; padding: 12px 14px; background: rgba(var(--primary-rgb,214,0,0), .06);
                   display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.tl-paynow > div + div { background: #f5f5f5; }
.tl-paynow strong { font-size: 18px; }
.tl-paymethods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-paym .tl-pick-box { display: flex !important; gap: 12px; align-items: center; text-align: left; padding: 12px 14px 12px 42px; }
.tl-paym-logo { width: 46px; height: 32px; flex: 0 0 46px; display: grid; place-items: center; color: var(--primary, #d60000); font-size: 18px; }
.tl-paym-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tl-manual { border: 1px solid #f5d9a8; background: #fffaf0; border-radius: 12px; padding: 14px; margin-top: 14px; }
.tl-manual-instr { white-space: pre-wrap; font-size: 13px; color: #92400e; margin-bottom: 10px; }
.tl-sum-own { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.tl-sum-own i { color: var(--primary, #d60000); margin-right: 6px; }
.tl-sum-garments { margin-bottom: 4px; }
.tl-sum-pay span:last-child { color: var(--primary, #d60000); font-size: 15px; }
.tl-paybox { border: 1px solid var(--border, #dedfde); border-radius: 14px; padding: 16px; }

@media (max-width: 767px) {
    .tl-fabric-qty { grid-template-columns: 1fr; }
    .tl-rv-cols, .tl-payopts, .tl-paynow, .tl-paymethods { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 6 — several fabrics in one tailoring order
   ============================================================ */
.tl-fabric-list { display: grid; gap: 12px; }
.tl-fabric-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border, #dedfde);
                 border-radius: 14px; padding: 12px 14px; background: #fff; }
.tl-fabric-row img, .tl-fabric-noimg { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px; object-fit: cover; background: #f3f4f6; }
.tl-fabric-noimg { display: grid; place-items: center; color: #c6c9cc; }
.tl-fabric-info { flex: 1 1 auto; min-width: 0; }
.tl-fabric-info h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 4px; line-height: 1.4; }
.tl-fabric-price { font-size: 13px; font-weight: 800; color: var(--primary, #d60000); }
.tl-fabric-price span { color: var(--muted, #666); font-weight: 600; }
.tl-fabric-qtyfield { flex: 0 0 110px; }
.tl-fabric-qtyfield .tl-label { font-size: 11.5px; margin-bottom: 4px; }
.tl-fabric-add { margin-top: 14px; }
.tl-gentry-fabric { margin-bottom: 14px; }
.tl-sum-fabrics .tl-sum-fabric { margin-bottom: 10px; }

/* fabric selection — real fabric products as compact selectable cards */
.tl-fabric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-fabric-count { font-size: 12px; font-weight: 800; color: var(--primary, #d60000); }
.tl-fabric-help { font-size: 13px; color: var(--muted, #666); margin: 6px 0 14px; line-height: 1.6; }
.tl-fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tl-fcards:not(.is-expanded) .tl-fcard[data-extra]:not(.is-selected) { display: none; }
.tl-fcard { position: relative; border: 1.5px solid var(--border, #dedfde); border-radius: 14px; background: #fff;
            transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.tl-fcard:hover { border-color: #bdbfc2; }
.tl-fcard.is-selected { border-color: var(--primary, #d60000); background: rgba(var(--primary-rgb, 214,0,0), .03);
                        box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 214,0,0), .10); }
.tl-fcard.is-maxed { opacity: .5; }
.tl-fcard-pick { display: flex; gap: 12px; align-items: center; width: 100%; background: none; border: 0; margin: 0;
                 padding: 12px 42px 12px 12px; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 14px; }
.tl-fcard-pick:focus-visible { outline: 2px solid var(--primary, #d60000); outline-offset: 2px; }
.tl-fcard.is-maxed .tl-fcard-pick, .tl-fcard.is-locked .tl-fcard-pick { cursor: default; }
.tl-fcard-img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px; overflow: hidden; background: #f3f4f6;
                display: grid; place-items: center; color: #c6c9cc; }
.tl-fcard-img img { width: 100%; height: 100%; object-fit: cover; }
.tl-fcard-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tl-fcard-name { font-size: 13.5px; font-weight: 700; line-height: 1.35;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-fcard-name-1 { -webkit-line-clamp: 1; }
.tl-fcard-option { font-size: 12.5px; font-weight: 700; color: #444; line-height: 1.3; }
.tl-fcard-price { font-size: 14px; font-weight: 800; color: var(--primary, #d60000); }
.tl-fcard-price small { color: var(--muted, #666); font-weight: 600; font-size: 11.5px; }
.tl-fcard-meta { font-size: 11.5px; color: var(--muted, #666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-fcard-meta i { color: var(--primary, #d60000); margin-right: 3px; }
.tl-fcard-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 6px;
                 border: 1.5px solid #c9cbc9; background: #fff; }
.tl-fcard.is-selected .tl-fcard-tick { background: var(--primary, #d60000); border-color: var(--primary, #d60000); }
.tl-fcard.is-selected .tl-fcard-tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
                                              border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tl-fcard-qty { display: none; align-items: center; gap: 8px; padding: 0 12px 12px; }
.tl-fcard.is-selected .tl-fcard-qty { display: flex; }
.tl-fcard-qty-label { font-size: 12px; font-weight: 700; color: var(--muted, #666); margin-right: auto; }
.tl-fcard-qty button { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; border: 1.5px solid var(--border, #dedfde);
                       background: #fff; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; color: var(--text, #111311); }
.tl-fcard-qty button:hover { border-color: var(--primary, #d60000); color: var(--primary, #d60000); }
.tl-fcard-qty .tl-input { width: 58px; height: 32px; padding: 4px 6px; text-align: center; border-radius: 8px; }
.tl-fcards-more { margin-top: 12px; background: none; border: 0; padding: 0; color: var(--primary, #d60000);
                  font-weight: 700; font-size: 13px; cursor: pointer; }
.tl-fabric-errors:empty { display: none; }
#tlNoFabricHint { margin-top: 14px; }

/* entry flow — fabric-source choice (Online Measurements) + own-fabric link */
.tl-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 20px; }
.tl-own-link { text-align: center; margin: 26px 0 0; font-size: 14px; line-height: 1.7; color: var(--muted, #666); }
.tl-own-link .fa-cut { color: var(--primary, #d60000); margin-right: 6px; }
.tl-own-link a { color: var(--primary, #d60000); font-weight: 700; margin-left: 6px; white-space: nowrap; }
.tl-own-link a:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .tl-sources { grid-template-columns: 1fr; }
    .tl-fabric-row { flex-wrap: wrap; }
    .tl-fabric-info { flex-basis: calc(100% - 70px); }
    .tl-fabric-qtyfield { flex: 1 1 auto; }
}

/* ============================================================
   LANDING — modern tailoring atelier (scoped to .tla)
   Editorial presentation of the tailoring landing page only;
   wizard / success / account pages never carry .tla.
   ============================================================ */
.tla {
    --tla-ink: #151515;
    --tla-ink-2: #1d1d1f;
    --tla-warm: #f6f4f0;
    --tla-line: #e7e3dc;
    --tla-serif: Georgia, 'Times New Roman', 'Hind Siliguri', serif;
    background: #fff;
}
.tla [lang="bn"] { font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif; }
.tla a:focus-visible, .tla button:focus-visible { outline: 2px solid var(--primary, #d60000); outline-offset: 3px; }

/* shared typography */
.tla-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
              letter-spacing: .18em; text-transform: uppercase; color: var(--primary, #d60000); margin-bottom: 12px; }
.tla-kicker::before { content: ''; width: 26px; height: 0; border-top: 2px solid var(--primary, #d60000); }
.tla-kicker [lang="bn"] { letter-spacing: 0; text-transform: none; font-weight: 600; }
.tla-h2 { font-family: var(--tla-serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12;
          letter-spacing: -.5px; margin: 0 0 12px; color: var(--tla-ink); }
.tla-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.tla-head .tla-kicker { justify-content: center; }
.tla-head p, .tla-fabrics-intro p, .tla-shops-head p { color: var(--muted, #666); font-size: 15px; line-height: 1.7; margin: 0; }
.tla-head-left { text-align: left; margin: 0 0 28px; max-width: none; }
.tla-head-left .tla-kicker { justify-content: flex-start; }

/* buttons */
.tla-btn { border-radius: 4px; letter-spacing: .02em; }
.tla-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
                   padding: 13px 20px; border: 1.5px solid var(--tla-ink); border-radius: 4px; color: var(--tla-ink);
                   font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background .16s ease, color .16s ease; }
.tla-btn-outline:hover { background: var(--tla-ink); color: #fff; }
.tla-btn-auto { width: auto; }
.tla-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
                color: var(--primary, #d60000); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.tla-textlink { position: relative; }
/* invisible hit area: the visible link keeps its size, the tappable area reaches ~44px */
.tla-textlink::after { content: ''; position: absolute; inset: -10px -8px; }
.tla-own a { position: relative; display: inline-block; }
.tla-own a::after { content: ''; position: absolute; inset: -14px -8px; }
.tla-textlink i { transition: transform .16s ease; }
.tla-textlink:hover i { transform: translateX(4px); }
.tla-textlink-light { color: #fff; }

/* ---------------------------------------------------------- hero */
.tla-hero { position: relative; overflow: hidden; color: #fff;
            background: radial-gradient(900px 520px at 78% 30%, rgba(var(--primary-rgb, 214,0,0), .16), transparent 60%),
                        linear-gradient(115deg, #121212 0%, #1b1b1d 55%, #242426 100%); }
/* z-index keeps the thread above the optional background layers but below the content grid */
.tla-thread { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
.tla-thread path { fill: none; stroke: rgba(var(--primary-rgb, 214,0,0), .55); stroke-width: 1.5; stroke-dasharray: 7 8; }
/* two-column hero: keep the decorative thread out of the text column */
@media (min-width: 992px) {
    .tla-thread { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 62%);
                  mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 62%); }
}

/* optional configured hero picture ("stage"): ONE coherent visual instead of picture + collage.
   Desktop: the picture sits on the right and melts into the dark base on its left, top and bottom
   edges, so the text column stays on clean dark ground and the whole scene stays visible. */
.tla-hero.has-bg .tla-thread { display: none; }
.tla-hero.has-bg .tla-hero-grid { grid-template-columns: minmax(0, 600px); }
.tla-hero-stage { position: absolute; z-index: 0; top: 50%; right: 0; width: min(84%, 1200px); aspect-ratio: 1850 / 850;
                  transform: translateY(-50%); background: var(--tla-hero-bg) center / 100% 100% no-repeat; pointer-events: none;
                  /* the box IS the picture, so the fades land exactly on its edges */
                  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
                  -webkit-mask-composite: source-in;
                  mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
                  mask-composite: intersect; }
/* soft dark ramp over the picture's left half keeps every text element readable */
.tla-hero.has-bg::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
                          background: linear-gradient(90deg, rgba(14,14,15,.9) 0%, rgba(14,14,15,.72) 34%, rgba(14,14,15,.3) 52%, rgba(14,14,15,0) 68%); }
.tla-hero.has-bg .tla-lead { color: #dcdde0; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.tla-hero.has-bg .tla-marks b { text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.tla-hero.has-bg .tla-marks span { color: #c9cbcf; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.tla-hero.has-bg .tla-eyebrow { background: rgba(14,14,15,.35); }
.tla-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px;
                 align-items: center; padding-top: 72px; padding-bottom: 76px; }
.tla-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
               text-transform: uppercase; color: #fff; padding: 7px 14px; border: 1px solid rgba(255,255,255,.22);
               border-radius: 999px; margin-bottom: 22px; }
.tla-eyebrow i { color: var(--primary, #d60000); }
.tla-eyebrow [lang="bn"] { letter-spacing: 0; text-transform: none; color: #cfcfcf; }
.tla-display { font-family: var(--tla-serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 78px); line-height: 1.02;
               letter-spacing: -1.5px; margin: 0 0 22px; color: #fff; }
.tla-display em { font-style: italic; color: var(--primary, #d60000); }
.tla-lead { font-size: 16px; line-height: 1.75; color: #cfd0d3; max-width: 560px; margin: 0 0 30px; }
/* balance: when the Bengali line has to wrap it never leaves a single word alone on the last line */
.tla-lead [lang="bn"] { display: block; color: #fff; margin-bottom: 4px; text-wrap: balance; }
.tla-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tla-marks { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 0;
             padding: 22px 0 0; border-top: 1px dashed rgba(255,255,255,.2); }
.tla-marks li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: start; }
.tla-marks i { grid-row: span 2; color: var(--primary, #d60000); font-size: 17px; margin-top: 2px; }
.tla-marks b { font-size: 13px; font-weight: 700; }
.tla-marks span { font-size: 12px; color: #a9abaf; }

.tla-hero-art { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr;
                gap: 14px; height: 480px; }
.tla-hero-art.is-empty { background: repeating-linear-gradient(135deg, #1f1f21 0 14px, #242427 14px 28px); border-radius: 4px; }
.tla-hero-tile { position: relative; display: block; overflow: hidden; border-radius: 4px; background: #2a2a2c; }
.tla-hero-tile::after { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(255,255,255,.35);
                        border-radius: 2px; pointer-events: none; }
.tla-hero-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.tla-hero-tile:hover img { transform: scale(1.05); }
.tla-hero-tile-0 { grid-row: 1 / span 2; }
.tla-tape { position: absolute; z-index: 2; height: 30px; width: 58%; left: -8%; bottom: 58px; transform: rotate(-9deg);
            border-radius: 2px; box-shadow: 0 10px 24px rgba(0,0,0,.35); pointer-events: none;
            background: repeating-linear-gradient(90deg, #2b2215 0 1px, transparent 1px 9px),
                        repeating-linear-gradient(90deg, #2b2215 0 1.5px, transparent 1.5px 45px),
                        linear-gradient(#e9d9b1, #d9c28c);
            background-size: auto 9px, auto 15px, auto; background-repeat: repeat-x; }
.tla-script { position: absolute; z-index: 2; right: 16px; bottom: 12px; margin: 0; font-family: var(--tla-serif);
              font-style: italic; font-size: 28px; color: #fff; pointer-events: none;
              text-shadow: 0 2px 14px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.55); }
/* soft scrim so the script reads on any fabric colour */
.tla-hero-art:not(.is-empty)::after { content: ''; position: absolute; z-index: 1; right: 0; bottom: 0; width: 64%; height: 96px;
                                       border-radius: 0 0 4px 0; pointer-events: none;
                                       background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); }

/* ---------------------------------------------------------- journey */
/* sticky header (up to ~100px on two-row tablet widths) must not cover the kicker after the hero CTA scrolls here */
.tla-journey { padding: 88px 0 72px; scroll-margin-top: 56px; }
.tla-ways { display: grid; grid-template-columns: 1fr 1fr 1.15fr; align-items: stretch; }
.tla-way { position: relative; display: flex; flex-direction: column; padding: 34px 34px 32px; }
.tla-way + .tla-way:not(.tla-way-feature) { border-left: 1px dashed var(--tla-line); }
/* Online Measurements switched off in Admin: two ways to start, so two columns (no empty third column) */
.tla-ways.tla-ways--two { grid-template-columns: 1fr 1.15fr; }
.tla-way-no { font-family: var(--tla-serif); font-size: 46px; line-height: 1; color: #d9d5ce; margin-bottom: 18px; }
.tla-way-icon { position: absolute; top: 36px; right: 34px; width: 46px; height: 46px; border-radius: 50%;
                display: grid; place-items: center; border: 1.5px solid var(--primary, #d60000); color: var(--primary, #d60000); font-size: 17px; }
.tla-way h3 { font-family: var(--tla-serif); font-weight: 400; font-size: 25px; line-height: 1.2; margin: 0 0 12px; color: var(--tla-ink); }
.tla-badge { display: inline-block; vertical-align: middle; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10.5px;
             font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0f8a43; background: rgba(16,163,74,.1);
             padding: 3px 8px; border-radius: 3px; margin-left: 4px; }
.tla-way p { color: var(--muted, #666); font-size: 14.5px; line-height: 1.7; margin: 0 0 26px; flex: 1; }
.tla-way p [lang="bn"] { display: block; color: #3d3d3d; margin-bottom: 4px; }
.tla-way-feature { color: #fff; border-radius: 4px; overflow: hidden; isolation: isolate; min-height: 380px;
                   background: var(--tla-ink-2) var(--tla-img, none) center / cover no-repeat; }
.tla-way-feature::before { content: ''; position: absolute; inset: 0; z-index: -1;
                           background: linear-gradient(180deg, rgba(15,15,15,.45) 0%, rgba(15,15,15,.72) 45%, rgba(15,15,15,.94) 100%); }
.tla-way-feature .tla-way-no { color: rgba(255,255,255,.35); }
.tla-way-feature .tla-way-icon { background: var(--primary, #d60000); border-color: var(--primary, #d60000); color: #fff; }
.tla-way-feature h3 { color: #fff; }
.tla-way-feature p, .tla-way-feature p [lang="bn"] { color: #e3e3e3; }
.tla-way-feature .tla-btn { width: 100%; }
.tla-own { margin-top: 38px; }

/* ---------------------------------------------------------- fabrics */
.tla-fabrics { background: var(--tla-warm); padding: 80px 0; border-top: 1px dashed var(--tla-line); border-bottom: 1px dashed var(--tla-line); }
.tla-fabrics-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; align-items: center; }
.tla-fabrics-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.tla-rail-nav { display: inline-flex; gap: 8px; }
.tla-rail-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--tla-ink); background: transparent;
                color: var(--tla-ink); cursor: pointer; transition: background .16s ease, color .16s ease; }
.tla-rail-btn:hover { background: var(--tla-ink); color: #fff; }
.tla-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 18px; overflow-x: auto;
            scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: thin;
            scrollbar-color: #c9c3b8 transparent; overscroll-behavior-x: contain; }
.tla-rail:focus-visible { outline: 2px solid var(--primary, #d60000); outline-offset: 4px; }
.tla-fab { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--tla-ink); }
.tla-fab-img { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px;
               background: #e9e5de; color: #b9b3a8; font-size: 26px; }
.tla-fab-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tla-fab:hover .tla-fab-img img { transform: scale(1.06); }
.tla-fab-tag { position: absolute; left: 10px; top: 10px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
               background: rgba(255,255,255,.92); color: var(--tla-ink); padding: 4px 8px; border-radius: 2px; }
.tla-fab-name { font-size: 14px; font-weight: 600; line-height: 1.4; margin-top: 4px;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tla-fab-price { font-size: 15px; font-weight: 800; color: var(--primary, #d60000); }
.tla-fab-price small { font-size: 11.5px; color: var(--muted, #666); font-weight: 600; }

/* ---------------------------------------------------------- process */
.tla-process { padding: 88px 0 80px; }
.tla-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; position: relative; }
.tla-steps::before { content: ''; position: absolute; top: 31px; left: 10%; right: 10%; border-top: 2px dashed rgba(var(--primary-rgb, 214,0,0), .45); }
.tla-step { position: relative; text-align: center; }
.tla-step-icon { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
                 display: grid; place-items: center; background: #fff; border: 1.5px solid var(--primary, #d60000);
                 color: var(--primary, #d60000); font-size: 21px; box-shadow: 0 0 0 8px #fff; }
.tla-step-no { display: block; font-family: var(--tla-serif); font-style: italic; color: var(--primary, #d60000); font-size: 15px; margin-bottom: 4px; }
.tla-step h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; color: var(--tla-ink); }
.tla-step p { font-size: 13px; color: var(--muted, #666); line-height: 1.6; margin: 0 auto; max-width: 210px; }

/* ---------------------------------------------------------- garments */
.tla-garments { background: var(--tla-warm); padding: 84px 0; }
.tla-garments-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: stretch; }
.tla-garment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.tla-garment { background: #fff; border-radius: 4px; padding: 14px 14px 18px; }
.tla-garment-img { display: grid; place-items: center; aspect-ratio: 4 / 5; background: #f2f0ec; border-radius: 3px; overflow: hidden;
                   color: #bdb7ab; font-size: 30px; margin-bottom: 14px; }
.tla-garment-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .5s ease; }
.tla-garment:hover .tla-garment-img img { transform: scale(1.05); }
.tla-garment h3 { font-family: var(--tla-serif); font-weight: 400; font-size: 21px; margin: 0 0 4px; color: var(--tla-ink); }
.tla-garment-price { font-size: 14px; font-weight: 800; color: var(--primary, #d60000); }
.tla-story { position: relative; overflow: hidden; background: var(--tla-ink); color: #fff; border-radius: 4px; padding: 44px 36px;
             display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; }
.tla-story-title { font-family: var(--tla-serif); font-weight: 400; font-size: 36px; line-height: 1.12; margin: 0 0 16px; color: #fff; }
.tla-story-title em { font-style: italic; color: var(--primary, #d60000); }
.tla-story p { color: #cfd0d3; font-size: 14.5px; line-height: 1.75; margin: 0 0 24px; }
.tla-story .tla-textlink { align-self: flex-start; }
.tla-tape-sm { width: 120%; left: -10%; top: 46px; bottom: auto; transform: rotate(-6deg); opacity: .9; }

/* ---------------------------------------------------------- craft statement */
.tla-craft { padding: 84px 0; }
.tla-craft-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.tla-statement-text { font-family: var(--tla-serif); font-size: clamp(32px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -.5px;
                      margin: 0 0 14px; color: var(--tla-ink); }
.tla-statement-text em { font-style: italic; color: var(--primary, #d60000); }
.tla-statement-bn { font-size: 16px; color: var(--muted, #666); margin: 0; }
.tla-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.tla-values li { display: flex; gap: 14px; align-items: flex-start; padding: 24px 22px; }
.tla-values li:nth-child(odd) { border-right: 1px dashed var(--tla-line); }
.tla-values li:nth-child(-n+2) { border-bottom: 1px dashed var(--tla-line); }
.tla-values i { color: var(--primary, #d60000); font-size: 20px; margin-top: 3px; width: 22px; text-align: center; }
.tla-values h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--tla-ink); }
.tla-values p { font-size: 13.5px; color: var(--muted, #666); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------- showrooms */
.tla-shops-section { padding: 80px 0; border-top: 1px dashed var(--tla-line); }
.tla-shops-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.tla-shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.tla-shop { padding: 26px 26px 26px 0; border-top: 2px solid var(--tla-ink); }
.tla-shop:not(:nth-child(3n+1)) { padding-left: 26px; }
.tla-shop:nth-child(n+4) { border-top-color: var(--tla-line); border-top-width: 1px; }
.tla-shop h3 { font-family: var(--tla-serif); font-weight: 400; font-size: 22px; margin: 0 0 10px; color: var(--tla-ink); }
.tla-shop p { font-size: 13.5px; color: var(--muted, #666); line-height: 1.6; margin: 0 0 6px; display: flex; gap: 9px; }
.tla-shop p i { color: var(--primary, #d60000); margin-top: 4px; width: 13px; flex: 0 0 13px; }
.tla-shop-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.tla-shop-links a { font-size: 13px; font-weight: 700; color: var(--tla-ink); text-decoration: none; display: inline-flex;
                    align-items: center; gap: 7px; min-height: 40px; }
@media (max-width: 767px) { .tla-shop-links a { min-height: 44px; } }
.tla-shop-links a:hover { color: var(--primary, #d60000); }

/* ---------------------------------------------------------- final CTA */
.tla-final { position: relative; isolation: isolate; color: #fff; padding: 88px 0;
             background: var(--tla-ink) var(--tla-img, none) center / cover no-repeat; }
.tla-final::before { content: ''; position: absolute; inset: 0; z-index: -1;
                     background: linear-gradient(90deg, rgba(12,12,12,.94) 0%, rgba(12,12,12,.8) 50%, rgba(80,0,0,.55) 100%); }
.tla-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.tla-final-title { font-family: var(--tla-serif); font-weight: 400; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.1; margin: 0 0 10px; color: #fff; }
.tla-final p { color: #d6d6d6; font-size: 16px; margin: 0; }
.tla-final p [lang="bn"] { color: #fff; margin-right: 6px; }

@media (prefers-reduced-motion: reduce) {
    .tla *, .tla *::before, .tla *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------- tablet */
@media (max-width: 1100px) {
    .tla-hero-grid { gap: 36px; }
    .tla-hero-art { height: 420px; }
    .tla-ways { grid-template-columns: 1fr 1fr; }
    .tla-way-feature { grid-column: 1 / -1; min-height: 300px; margin-top: 18px; }
    /* two ways side by side, the fabric card is not stretched over a whole row */
    .tla-ways.tla-ways--two .tla-way-feature { grid-column: auto; margin-top: 0; }
    .tla-fabrics-grid { grid-template-columns: 1fr; gap: 26px; }
    .tla-fabrics-intro { max-width: 640px; }
    .tla-garments-grid { grid-template-columns: 1fr; }
    .tla-story { min-height: 0; padding: 36px 32px; }
    .tla-tape-sm { display: none; }
    .tla-craft-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 991px) {
    .tla-hero-grid { grid-template-columns: 1fr; padding-top: 52px; padding-bottom: 56px; }
    .tla-hero-art { height: 360px; }
    .tla-hero.has-bg .tla-hero-grid { grid-template-columns: 1fr; padding-bottom: 28px; }
    .tla-hero.has-bg::after { display: none; }
    /* in-flow, edge to edge: a deliberate crop that keeps mannequin and tailor, fading in from the text above */
    .tla-hero-stage { position: relative; z-index: 0; top: auto; right: auto; bottom: auto; width: 100%; aspect-ratio: 1850 / 850;
                      transform: none; background-size: 100% 100%; background-position: center;
                      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); -webkit-mask-composite: source-over;
                      mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-composite: add; }
    .tla-steps { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
    .tla-steps::before { display: none; }
    .tla-shops { grid-template-columns: 1fr 1fr; }
    .tla-shop, .tla-shop:not(:nth-child(3n+1)) { padding: 24px 22px 24px 0; }
    .tla-shop:nth-child(even) { padding-left: 22px; }
    .tla-shop:nth-child(n+3) { border-top-color: var(--tla-line); border-top-width: 1px; }
}

/* ---------------------------------------------------------- mobile */
@media (max-width: 767px) {
    .tla-h2 { font-size: 29px; }
    .tla-head { margin-bottom: 30px; }

    .tla-hero-grid { gap: 30px; padding-top: 38px; padding-bottom: 44px; }
    .tla-hero.has-bg .tla-hero-grid { padding-bottom: 14px; }
    .tla-eyebrow { margin-bottom: 16px; font-size: 11px; }
    .tla-display { font-size: 46px; letter-spacing: -1px; margin-bottom: 16px; }
    .tla-lead { font-size: 15px; margin-bottom: 24px; }
    .tla-cta-row .tla-btn { flex: 1 1 0; padding: 14px 12px; min-width: 0; }
    .tla-marks { gap: 10px; margin-top: 28px; padding-top: 18px; }
    .tla-marks li { grid-template-columns: 1fr; row-gap: 4px; }
    .tla-marks i { grid-row: auto; font-size: 16px; }
    .tla-marks b { font-size: 12.5px; line-height: 1.3; }
    .tla-marks span { font-size: 11.5px; line-height: 1.4; }
    .tla-hero-art { height: 250px; grid-template-columns: 1.3fr 1fr; gap: 10px; }
    .tla-tape { height: 24px; bottom: 30px; width: 70%; }
    .tla-script { font-size: 22px; right: 12px; bottom: 10px; }
    .tla-hero-art:not(.is-empty)::after { height: 70px; }
    .tla-thread { opacity: .3; }
    .tla-hero.has-bg::after { display: none; }

    .tla-journey { padding: 56px 0 48px; scroll-margin-top: 56px; }
    .tla-ways { grid-template-columns: 1fr; }
    /* the two-way variant (Online Measurements off) is more specific than the rule above, so phones need their own line */
    .tla-ways.tla-ways--two { grid-template-columns: 1fr; }
    .tla-ways.tla-ways--two .tla-way-feature { margin-top: 8px; }
    .tla-way { padding: 20px 4px 22px; }
    .tla-way + .tla-way:not(.tla-way-feature) { border-left: 0; border-top: 1px dashed var(--tla-line); }
    .tla-way-no { font-size: 30px; margin-bottom: 8px; }
    .tla-way-icon { top: 22px; right: 4px; width: 40px; height: 40px; font-size: 15px; }
    .tla-way h3 { font-size: 22px; margin-bottom: 8px; padding-right: 50px; }
    .tla-way p { margin-bottom: 16px; line-height: 1.6; font-size: 14px; }
    .tla-way p [lang="bn"] { margin-bottom: 2px; }
    .tla-btn-outline { padding: 12px 18px; }
    .tla-way-feature { padding: 24px 20px 20px; min-height: 0; margin-top: 8px; }
    .tla-way-feature .tla-way-icon { right: 20px; top: 24px; }
    .tla-own { margin-top: 26px; font-size: 13.5px; }

    .tla-fabrics { padding: 56px 0 50px; }
    .tla-fabrics-actions { margin-top: 18px; }
    .tla-rail-nav { display: none; }
    /* two complete fabric cards side by side, plus a peek of the next one */
    .tla-rail { grid-auto-columns: calc((100% - 12px) / 2.15); gap: 12px; margin-right: -16px; padding-right: 24px;
                /* soft right edge: the next fabric visibly continues off-screen */
                -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); }
    .tla-fab { gap: 6px; }
    .tla-fab-tag { left: 8px; top: 8px; font-size: 10px; letter-spacing: .08em; padding: 3px 6px; }
    .tla-fab-name { font-size: 13px; line-height: 1.38; }
    .tla-fab-price { font-size: 14px; }

    .tla-process { padding: 60px 0 52px; }
    .tla-steps { grid-template-columns: 1fr; row-gap: 0; }
    .tla-steps::before { display: block; top: 20px; bottom: 30px; left: 25px; right: auto; border-top: 0;
                         border-left: 2px dashed rgba(var(--primary-rgb, 214,0,0), .4); }
    .tla-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; text-align: left; padding-bottom: 22px; }
    .tla-step-icon { grid-row: 1 / span 3; width: 52px; height: 52px; margin: 0; font-size: 18px; box-shadow: 0 0 0 6px #fff; }
    .tla-step-no { margin: 2px 0 0; }
    .tla-step h3 { margin-bottom: 4px; font-size: 16px; }
    .tla-step p { margin: 0; max-width: none; font-size: 13.5px; }

    .tla-garments { padding: 56px 0; }
    .tla-garments-grid { gap: 22px; }
    .tla-garment-list { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .tla-garment { padding: 8px 8px 12px; }
    .tla-garment-img { margin-bottom: 10px; }
    .tla-garment-img img { padding: 6px; }
    .tla-garment h3 { font-size: 17px; }
    .tla-garment-price { font-size: 12.5px; }
    .tla-story { padding: 30px 24px; }
    .tla-story-title { font-size: 30px; }

    .tla-craft { padding: 56px 0; }
    .tla-statement-text { font-size: 36px; }
    .tla-values li { padding: 18px 12px 18px 0; flex-direction: column; gap: 8px; }
    .tla-values li:nth-child(even) { padding-left: 14px; }

    .tla-shops-section { padding: 56px 0; }
    .tla-shops-head { margin-bottom: 24px; }
    .tla-shops-head .tla-btn-auto { width: 100%; }
    /* two branches per swipe column: both fully readable at once */
    .tla-shops { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; grid-template-rows: repeat(2, auto);
                 gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -16px; padding: 0 16px 12px 0; }
    .tla-shop, .tla-shop:not(:nth-child(3n+1)), .tla-shop:nth-child(even) {
        scroll-snap-align: start; padding: 14px 16px 6px; border: 1px solid var(--tla-line);
        border-top: 2px solid var(--tla-ink); border-radius: 2px; background: #fff; }
    .tla-shop h3 { font-size: 19px; margin-bottom: 6px; }
    .tla-shop p { margin-bottom: 3px; }
    .tla-shop-links { margin-top: 4px; gap: 0 18px; }
    .tla-shop:nth-child(n+3), .tla-shop:nth-child(n+4) { border-top: 2px solid var(--tla-ink); }

    .tla-final { padding: 60px 0 64px; }
    .tla-final-inner { gap: 24px; }
    .tla-final .tla-cta-row { width: 100%; }
}
/* phones: a deliberate crop — mannequin, tailor and tools stay in frame, the swatch panel is left out */
@media (max-width: 599px) {
    .tla-hero-stage { aspect-ratio: 1.55 / 1; background-size: cover; background-position: 32% 40%; }
}
@media (max-width: 380px) {
    /* keep both hero buttons on one line each */
    .tla-cta-row { gap: 8px; }
    .tla-cta-row .tla-btn { font-size: 14px; padding: 14px 6px; gap: 6px; }
    .tla-display { font-size: 40px; }
    .tla-marks { grid-template-columns: 1fr; }
    .tla-marks li { grid-template-columns: 22px 1fr; }
    .tla-marks i { grid-row: span 2; }
    /* three garments never fit nicely in two columns: a compact snap row keeps all of them
       one swipe away, at a readable card size, with the same soft edge as the fabric rail */
    .tla-garment-list { grid-auto-flow: column; grid-auto-columns: 42%; grid-template-columns: none; gap: 10px;
                        overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -16px; padding: 0 24px 6px 0;
                        overscroll-behavior-x: contain; scrollbar-width: none;
                        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%);
                        mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); }
    .tla-garment-list::-webkit-scrollbar { display: none; }
    .tla-garment { scroll-snap-align: start; }
}