/* =========================================================
   UNIDEX · Websites page (websites.html)
   Fonts are self hosted here because the page promises it.
   ========================================================= */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.page-websites .nav a[aria-current="page"] { color: var(--gold); }
.page-websites .nav a[aria-current="page"]::after { transform: scaleX(1); }
.btn--sm { padding: .7em 1.4em; font-size: .9rem; }
.btn--outline-dark { border: 1px solid rgba(27, 21, 17, .35); color: var(--ink); padding: .8em 1.6em; font-size: .95rem; }
.btn--outline-dark:hover { background: var(--ink); color: var(--cream); }
.btn .ic { width: 18px; height: 18px; }
.page-websites section { scroll-margin-top: 84px; }

/* ---------- hero ---------- */
.wh { position: relative; min-height: min(100vh, 940px); padding-top: 84px; display: flex; flex-direction: column; background: #120d09; overflow: hidden; }
.wh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.wh__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 13, 9, .78) 0%, rgba(18, 13, 9, .45) 34%, rgba(18, 13, 9, 0) 58%), linear-gradient(0deg, rgba(18, 13, 9, .85) 0%, transparent 26%); }
.wh__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.wh__copy { max-width: 640px; }
.wh__title { font-size: clamp(3rem, 6.2vw, 5.6rem); line-height: 1.02; margin-bottom: 1.6rem; }
.wh__title em { font-style: italic; color: var(--gold); }
.wh__lede { color: rgba(241, 235, 225, .78); font-size: 1.12rem; max-width: 34rem; margin: 0 0 2.2rem; }
.wh__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem; }
.wh__featured { position: absolute; right: var(--gutter); bottom: clamp(1.5rem, 3vw, 2.5rem); margin: 0; text-align: right; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(241, 235, 225, .6); line-height: 1.8; }
.wh__featured span { letter-spacing: .04em; text-transform: none; font-size: .82rem; color: rgba(241, 235, 225, .8); }
.wh__strip { position: relative; z-index: 1; border-top: 1px solid var(--line-dark); background: rgba(18, 13, 9, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wh__strip-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.wh__strip-in > div { display: flex; align-items: center; gap: 1.4rem; }
.wh__n { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(216, 183, 142, .55); display: grid; place-items: center; font-size: .82rem; color: var(--gold); }
.wh__strip p { margin: 0; padding-left: 1.4rem; border-left: 1px solid var(--line-dark); font-size: .92rem; color: rgba(241, 235, 225, .66); }
.wh__strip b { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.4rem; color: var(--cream); margin-bottom: .1rem; }

/* ---------- selected work ---------- */
.ww { background: var(--cream); color: var(--ink); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ww__head, .wp__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: 2.4rem; }
.ww__intro { color: var(--muted); margin: 0; max-width: 30rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.chip { padding: .55em 1.2em; border-radius: 999px; border: 1px solid rgba(27, 21, 17, .2); font-size: .88rem; color: var(--ink-soft); transition: background .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.wgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.wcard[hidden] { display: none; }
.wcard a { display: flex; flex-direction: column; height: 100%; background: #1d150f; color: var(--cream); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -26px rgba(27, 21, 17, .55); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.wcard a:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -24px rgba(27, 21, 17, .6); }
.wcard__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #2a2018; }
.wcard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.wcard a:hover .wcard__shot img { transform: scale(1.04); }
.wcard__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 1.15rem; }
.wcard__body b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.2; }
.wcard__body small { display: block; font-size: .8rem; color: rgba(241, 235, 225, .66); }
.wcard__label { color: var(--gold) !important; margin-top: .25rem; font-size: .72rem !important; letter-spacing: .04em; }
.wcard__go { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(241, 235, 225, .35); display: grid; place-items: center; transition: background .3s, color .3s; }
.wcard__go .ic { width: 16px; height: 16px; }
.wcard a:hover .wcard__go { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.ww__more { text-align: center; margin-top: 2rem; }
.ww__more[hidden] { display: none; }
.ww__note { margin: 1.8rem auto 0; max-width: 46rem; text-align: center; font-size: .85rem; color: var(--muted); }

/* ---------- packages ---------- */
.wp, .wpr, .wr { background: radial-gradient(ellipse 70% 60% at 85% 0%, rgba(196, 140, 84, .12), transparent 70%), var(--espresso-2); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.wp__aside p { color: rgba(241, 235, 225, .72); margin: 0 0 1rem; max-width: 26rem; font-size: .98rem; }
.wp__aside .link-arrow { font-size: .9rem; }
.pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; padding: 2rem 1.6rem 1.6rem; border: 1px solid var(--line-dark); border-radius: 10px; background: rgba(36, 26, 19, .5); }
.pkg--hi { border-color: rgba(216, 183, 142, .65); background: rgba(56, 40, 27, .55); box-shadow: 0 30px 60px -36px rgba(216, 183, 142, .45); }
.pkg__badge { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); padding: .3em 1em; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.pkg h3 { font-family: var(--serif); font-weight: 300; font-size: 1.7rem; margin: 0 0 .4rem; }
.pkg__desc { color: rgba(241, 235, 225, .62); font-size: .9rem; margin: 0 0 1.4rem; min-height: 2.9em; }
.pkg__price { font-family: var(--serif); font-size: 2.3rem; font-weight: 300; margin: 0 0 .35rem; line-height: 1; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pkg__price s { font-size: 1.15rem; color: rgba(241, 235, 225, .45); text-decoration-thickness: 1px; }
.pkg__intro { margin: 0 0 1.3rem; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pkg__note { margin: 1.6rem 0 0; font-size: .88rem; color: rgba(241, 235, 225, .7); max-width: 52rem; }
.pkg__price small { font-family: var(--sans); font-size: .82rem; color: rgba(241, 235, 225, .6); }
.pkg ul { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .55rem; font-size: .92rem; color: rgba(241, 235, 225, .82); flex: 1; }
.pkg li { display: flex; gap: .6rem; align-items: flex-start; }
.pkg li .ic { width: 16px; height: 16px; color: var(--gold); margin-top: .3em; stroke-width: 2; }
.pkg__btn { display: flex; justify-content: center; gap: .6em; padding: .85em 1em; border-radius: 999px; border: 1px solid rgba(241, 235, 225, .4); font-size: .9rem; transition: background .3s, color .3s, border-color .3s; }
.pkg__btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.pkg--hi .pkg__btn { background: linear-gradient(180deg, #e6c9a2, #c9a275); color: #1d150e; border-color: transparent; }
.addons { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; }
.addons .eyebrow { margin: 0; }
.addons ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: .9rem; color: rgba(241, 235, 225, .72); }
.addons b { font-weight: 500; color: var(--cream); margin-left: .5rem; }

/* ---------- legal basics ---------- */
.wl { background: var(--cream-2); color: var(--ink); padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.wl__grid { display: grid; grid-template-columns: .95fr 2fr; gap: 3rem; align-items: center; }
.wl h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.wl__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.wl__list li { display: flex; flex-direction: column; gap: .5rem; padding: .4rem 1.3rem; border-left: 1px solid var(--line-light); }
.wl__list .ic { width: 30px; height: 30px; color: var(--ink-soft); margin-bottom: .6rem; stroke-width: 1.2; }
.wl__list b { font-weight: 500; font-size: .98rem; }
.wl__list span { font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* ---------- process ---------- */
.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; position: relative; }
.steps::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 1px; background: linear-gradient(90deg, rgba(216, 183, 142, .5), rgba(216, 183, 142, .15)); }
.steps li { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.steps__ic { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(216, 183, 142, .6); background: var(--espresso-2); display: grid; place-items: center; color: var(--gold); margin-bottom: .9rem; }
.steps__ic .ic { width: 22px; height: 22px; }
.steps b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; }
.steps span:last-child { font-size: .88rem; color: rgba(241, 235, 225, .64); }

/* ---------- after launch ---------- */
.wa { background: var(--cream); color: var(--ink); padding: clamp(4.5rem, 9vw, 7rem) 0; }
.wa__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 3rem; align-items: start; }
.wa h2 { font-size: clamp(2.2rem, 3.8vw, 3.3rem); }
.wa__col { padding-left: 2.4rem; border-left: 1px solid var(--line-light); }
.wa__col h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 .6rem; }
.wa__col p { font-size: .92rem; margin: 0 0 1.2rem; }
.wa__col ul { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: .5rem; font-size: .92rem; color: var(--ink-soft); }
.wa__col li { display: flex; gap: .6rem; }
.wa__col li .ic { width: 16px; height: 16px; color: var(--bronze); margin-top: .3em; stroke-width: 2; }

/* ---------- FAQ ---------- */
.wf { position: relative; overflow: hidden; background: var(--cream-2); color: var(--ink); padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(5rem, 10vw, 8rem); }
.wf__stone { position: absolute; left: -12%; bottom: -55%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 62% 30%, #f4ead9 0%, #dcc9ad 35%, #b9a07f 70%, #8d7558 100%); box-shadow: inset -30px -40px 80px rgba(80, 55, 30, .35); opacity: .9; }
.wf__grid { position: relative; display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; }
.wf details { border-bottom: 1px solid var(--line-light); }
.wf summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; font-size: 1.05rem; }
.wf summary::-webkit-details-marker { display: none; }
.wf summary span { position: relative; width: 14px; height: 14px; flex: none; }
.wf summary span::before, .wf summary span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .3s var(--ease); }
.wf summary span::after { transform: rotate(90deg); }
.wf details[open] summary span::after { transform: rotate(0); }
.wf details p { margin: 0 0 1.4rem; color: var(--muted); max-width: 40rem; font-size: .96rem; }

/* ---------- request form ---------- */
.wr__grid { display: grid; grid-template-columns: .9fr 1.5fr; gap: 4rem; }
.wr__lede { color: rgba(241, 235, 225, .72); max-width: 26rem; margin-top: 1.4rem; }
.wr__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.wr__form label { display: grid; gap: .35rem; }
.wr__form label > span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 235, 225, .55); }
.wr__form input, .wr__form select, .wr__form textarea { font: inherit; font-size: .95rem; color: var(--cream); background: rgba(36, 26, 19, .6); border: 1px solid var(--line-dark); border-radius: 8px; padding: .85em 1em; width: 100%; }
.wr__form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23d8b78e'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.4em; }
.wr__form select option { color: var(--ink); }
.wr__form input:focus, .wr__form select:focus, .wr__form textarea:focus { outline: none; border-color: var(--gold); }
.wr__full { grid-column: 1 / -1; }
.wr__check { display: flex !important; align-items: flex-start; gap: .7rem; font-size: .88rem; color: rgba(241, 235, 225, .72); }
.wr__check input { width: 18px; height: 18px; margin-top: .2em; accent-color: var(--gold); flex: none; }
.wr__check span { letter-spacing: 0 !important; text-transform: none !important; font-size: .88rem !important; color: rgba(241, 235, 225, .72) !important; }
.wr__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: .6rem; }
.wr__or { font-size: .85rem; color: rgba(241, 235, 225, .5); }
.wr__note { margin: 0; padding: 1rem 1.2rem; border: 1px solid rgba(216, 183, 142, .45); border-radius: 8px; color: var(--cream); font-size: .92rem; }
.wr__note a { color: var(--gold); text-decoration: underline; }

/* ---------- footer ---------- */
.wfoot { position: relative; overflow: hidden; background: #1a130d url("../img/websites/footer-bg.webp") right top / cover no-repeat; color: var(--cream); padding-top: clamp(4rem, 8vw, 6rem); }
.wfoot__grid { position: relative; display: grid; grid-template-columns: 1.5fr .6fr .7fr 1.3fr; gap: 2.4rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.wfoot .wordmark { display: inline-block; margin-bottom: 2rem; }
.wfoot__title { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; margin-bottom: 1.4rem; }
.wfoot__title em, .wfoot__ntitle em { font-style: italic; color: #ffd9a0; text-shadow: 0 0 18px rgba(255, 196, 120, .45), 0 1px 10px rgba(20, 12, 6, .85); padding-right: .04em; }
.wfoot__sub { color: rgba(241, 235, 225, .66); font-size: .98rem; margin: 0 0 1.6rem; max-width: 28rem; }
.wfoot__loc { margin: 0; display: flex; align-items: center; gap: .7rem; color: rgba(241, 235, 225, .7); }
.wfoot__loc::after { content: ""; width: 120px; height: 1px; background: rgba(216, 183, 142, .5); margin-left: .6rem; }
.wfoot__col { display: flex; flex-direction: column; gap: .75rem; padding-left: 2rem; border-left: 1px solid var(--line-dark); }
.wfoot__col a, .wfoot__col button { text-align: left; color: rgba(241, 235, 225, .86); font-size: .96rem; transition: color .25s; }
.wfoot__col a:hover, .wfoot__col button:hover, .wfoot__col a[aria-current="page"] { color: var(--gold); }
.wfoot__h { margin: 0 0 .6rem; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(241, 235, 225, .7); }
.wfoot__news { padding-left: 2.4rem; border-left: 1px solid var(--line-dark); }
.wfoot__ntitle { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0 0 1rem; }
.wfoot__form { display: flex; align-items: center; border: 1px solid rgba(241, 235, 225, .3); border-radius: 999px; padding: .3rem .3rem .3rem 1.3rem; max-width: 26rem; }
.wfoot__form input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--cream); font: inherit; font-size: .95rem; padding: .6rem 0; }
.wfoot__form input:focus { outline: none; }
.wfoot__form button { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, #e6c9a2, #c9a275); color: var(--ink); display: grid; place-items: center; }
.wfoot__form .ic { width: 18px; height: 18px; }
.wfoot__ok { font-size: .85rem; color: var(--gold); margin: .8rem 0 0; }
.wfoot__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding-top: 1.6rem; padding-bottom: 1.8rem; border-top: 1px solid var(--line-dark); font-size: .88rem; color: rgba(241, 235, 225, .7); }
.wfoot__built { padding-left: 1.6rem; border-left: 1px solid var(--line-dark); }
.wfoot__top { margin-left: auto; }
.wfoot__top:hover { color: var(--gold); }

/* ---------- case videos: desktop and phone side by side ---------- */
.fcase { display: grid; grid-template-columns: .8fr 2fr; gap: 3rem; align-items: center; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--line-light); }
.fcase__copy .muted { margin: .8rem 0 1.4rem; font-size: .95rem; }
.cview { display: grid; grid-template-columns: 1fr auto; gap: clamp(1rem, 2.4vw, 2rem); align-items: end; }
.cview figure { margin: 0; position: relative; }
.cview video { display: block; width: 100%; height: auto; background: #1d150f; }
.cview figcaption { margin-top: .7rem; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cview__desk { border-radius: 10px; overflow: hidden; background: #241a13; box-shadow: 0 30px 60px -30px rgba(27, 21, 17, .6); padding-bottom: 0; }
.cview__desk video { aspect-ratio: 1280 / 800; }
.cview__desk figcaption { position: absolute; left: 0; bottom: -1.9rem; }
.cview__bar { display: flex; gap: 6px; padding: 9px 12px; background: #2b2018; }
.cview__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(241, 235, 225, .25); }
.cview__mob { width: clamp(150px, 15vw, 230px); padding: 8px; border-radius: 30px; background: #1b140f; box-shadow: 0 30px 60px -28px rgba(27, 21, 17, .7), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cview__mob video { aspect-ratio: 600 / 1298; border-radius: 23px; }
.cview__mob figcaption { position: absolute; left: 0; bottom: -2.1rem; }
.cdlg { border: 0; padding: 0; width: min(1180px, 100% - 32px); max-height: 94vh; background: var(--cream); color: var(--ink); border-radius: 14px; }
.cdlg::backdrop { background: rgba(18, 13, 9, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cdlg__in { padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.4rem) clamp(2.6rem, 4vw, 3.4rem); }
.cdlg__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; }
.cdlg__head .eyebrow { margin-bottom: .5rem; color: var(--bronze); }
.cdlg__type { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.cdlg__actions { display: flex; align-items: center; gap: .8rem; }
.cdlg__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(27, 21, 17, .25); font-size: 1.4rem; color: var(--ink); }
.cdlg__close:hover { background: var(--ink); color: var(--cream); }
.cdlg .cview__mob { width: clamp(140px, 17vw, 250px); }
body.is-locked { overflow: hidden; }

/* desktop: the full photo is the background. It is sized from the space right of the text column,
   so the laptop always starts just after the text and never sits behind it. */
@media (min-width: 961px) {
  .wh { --tl: max(var(--gutter), (100vw - 1240px) / 2); --tw: min(600px, 44vw);
    background: radial-gradient(ellipse 60% 70% at 80% 40%, #3a2817, transparent 70%), linear-gradient(180deg, #2a1c11 0%, #30200f 60%, #1c140e 100%); }
  .wh picture { position: absolute; right: 0; bottom: 0; display: block; z-index: 0; width: min(calc((100vw - var(--tl) - var(--tw) - 40px) / .555), calc(min(100vh, 940px) * 1.777)); }
  .wh__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(180deg, transparent 0, #000 12%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 14%), linear-gradient(180deg, transparent 0, #000 12%); mask-composite: intersect; }
  .wh__shade { background: linear-gradient(0deg, rgba(18, 13, 9, .8) 0%, transparent 22%); }
  .wh__copy { max-width: var(--tw); }
  .wh__title { font-size: clamp(2.8rem, 4.5vw, 5rem); }
  .wh__lede { max-width: 30rem; }
  .wfoot { background-position: right bottom; }
  .wfoot__bottom { border-top: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .wgrid { grid-template-columns: repeat(3, 1fr); }
  .pkgs { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.1rem; }
  .wl__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }
  .steps::before { display: none; }
  .wa__grid { grid-template-columns: 1fr 1fr; }
  .wa__grid > div:first-child { grid-column: 1 / -1; }
  .wa__col:first-of-type { padding-left: 0; border-left: 0; }
  .wfoot__grid { grid-template-columns: 1fr 1fr; }
  .wfoot__brand, .wfoot__news { grid-column: 1 / -1; }
  .wfoot__news { padding-left: 0; border-left: 0; }
  .wfoot__col:first-of-type { padding-left: 0; border-left: 0; }
}
@media (max-width: 960px) {
  .wh__strip-in { grid-template-columns: 1fr; gap: .9rem; }
  .wh__featured { display: none; }
  .ww__head, .wp__head { grid-template-columns: 1fr; }
  .wgrid { grid-template-columns: repeat(2, 1fr); }
  .wl__list { grid-template-columns: repeat(3, 1fr); row-gap: 1.8rem; }
  .wf__grid, .wr__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fcase { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 720px) {
  .wh { min-height: 0; padding-top: 58px; }
  .wh picture, .wh__shade { position: absolute; inset: 0 0 auto 0; height: 880px; }
  .wh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; }
  .wh__shade { background: linear-gradient(180deg, rgba(22, 15, 9, .8) 0%, rgba(22, 15, 9, .6) 30%, rgba(22, 15, 9, 0) 44%, rgba(22, 15, 9, 0) 68%, rgba(18, 13, 9, .85) 82%, #120d09 100%); }
  .wh__copy { min-height: 760px; display: flex; flex-direction: column; justify-content: space-between; }
  .wh__bottom .wh__lede { font-size: .95rem; margin-bottom: 1.2rem; color: rgba(241, 235, 225, .85); }
  .wh__strip { background: #120d09; }
  .wh .reveal { opacity: 1; transform: none; }
  .wh__inner { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .wh__title { font-size: clamp(2.5rem, 11vw, 3.2rem); margin-bottom: 1.1rem; }
  .wh__lede { font-size: 1rem; margin-bottom: 1.6rem; }
  .wh__strip { background: transparent; }
  .wh__strip-in { padding-top: 1.2rem; }
  .wh__n { width: 40px; height: 40px; font-size: .74rem; }
  .wh__strip b { font-size: 1.15rem; }
  .wh__strip p { font-size: .84rem; padding-left: 1rem; }
  .ww, .wp, .wpr, .wr, .wa, .wf { padding: 3.6rem 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 1.6rem; padding: 0 var(--gutter) .2rem; scrollbar-width: none; }
  .chip { flex: none; }
  .wgrid { gap: .8rem; }
  .wcard__body { padding: .7rem .8rem .8rem; }
  .wcard__body b { font-size: 1.02rem; }
  .wcard__body small { font-size: .72rem; }
  .wcard__label { font-size: .64rem !important; }
  .wcard__go { display: none; }
  .pkgs { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 1rem var(--gutter) .4rem; scrollbar-width: none; }
  .pkgs::-webkit-scrollbar { display: none; }
  .pkg { scroll-snap-align: center; padding: 1.6rem 1.3rem 1.3rem; }
  .pkg ul { gap: .4rem; font-size: .86rem; margin-bottom: 1.3rem; }
  .pkg__desc { min-height: 0; }
  .wl__list { grid-template-columns: 1fr 1fr; }
  .wl__list li { padding: .2rem 0 .2rem 1rem; }
  .steps { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .steps__ic { width: 44px; height: 44px; margin-bottom: .4rem; }
  .wa__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .wa__col { padding-left: 0; border-left: 0; padding-top: 1.6rem; border-top: 1px solid var(--line-light); }
  .wf__stone { width: 80%; bottom: -30%; left: -40%; }
  .wr__form { grid-template-columns: 1fr; }
  .wfoot__grid { gap: 2rem 1.4rem; }
  .wfoot__col { padding-left: 0; border-left: 0; }
  .wfoot { background-image: linear-gradient(90deg, rgba(26, 19, 13, .7) 0%, rgba(26, 19, 13, .45) 55%, rgba(26, 19, 13, 0) 90%), url("../img/websites/footer-bg-mobile.webp"); background-size: cover; background-position: right top; }
  .cview { gap: .7rem; }
  .cview__mob { width: 31vw; padding: 5px; border-radius: 18px; }
  .cview__mob video { border-radius: 14px; }
  .cview__bar { padding: 6px 8px; } .cview__bar i { width: 6px; height: 6px; }
  .cdlg { width: calc(100% - 16px); }
  .cdlg .cview__mob { width: 31vw; }
  .cdlg__actions .btn { padding: .6em 1em; font-size: .82rem; }
  .wfoot__built { display: none; }
}

/* =========================================================
   Selected work v2: realistic laptop + phone mockups with live scroll videos
   ========================================================= */
.ww { background: linear-gradient(180deg, #f8f6f2 0%, #f3efe8 100%); }
.ww__head--v2 { grid-template-columns: 1.55fr 1fr auto; align-items: center; gap: 2rem 3rem; margin-bottom: 2.6rem; }
.ww__eyebrow { letter-spacing: .42em; color: var(--ink-soft); }
.ww__title { font-size: clamp(3rem, 5.4vw, 5.4rem); line-height: .98; white-space: nowrap; }
.ww__title em { font-style: italic; color: #6b5440; }
.ww__head--v2 .ww__intro { padding-right: 2.4rem; border-right: 1px solid var(--line-light); color: #8a8178; }
.ww__all { display: flex; align-items: center; gap: 1.4rem; font-size: 1rem; color: var(--ink); }
.ww__all span:last-child { padding-bottom: .4rem; border-bottom: 1px solid currentColor; }
.ww__all-ic { width: 64px; height: 64px; border-radius: 50%; background: #3a2a1f; color: var(--cream); display: grid; place-items: center; box-shadow: 0 14px 30px -14px rgba(58, 42, 31, .7); transition: transform .4s var(--ease); }
.ww__all:hover .ww__all-ic { transform: translateX(4px); }
.ww__all[hidden] { display: none; }
.page-websites .chip { background: #ebe8e3; border-color: transparent; color: #6e665e; box-shadow: 0 6px 16px -10px rgba(27, 21, 17, .35), inset 0 1px 0 rgba(255, 255, 255, .8); padding: .7em 1.5em; }
.page-websites .chip.is-on { background: #3a2a1f; color: var(--cream); }
.dgrid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 2.4rem; }
.dcard[hidden] { display: none; }
.dcard a { display: block; color: var(--ink); }

/* device stage */
.dev { position: relative; display: block; aspect-ratio: 1.42; container-type: inline-size; }
.dev::after { content: ""; position: absolute; left: -2%; right: 18%; top: 79%; height: 7%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(27, 21, 17, .28), transparent 70%); filter: blur(6px); z-index: 0; }
.lap { position: absolute; left: 0; top: 0; width: 84%; z-index: 1; transition: transform .6s var(--ease); }
.lap__lid { position: relative; display: block; padding: 1.25cqw 1.25cqw 1.6cqw; border-radius: 1.7cqw 1.7cqw .6cqw .6cqw;
  background: linear-gradient(160deg, #3b3b3f 0%, #161618 22%, #0b0b0c 55%, #1d1d20 85%, #4a4a4e 100%);
  box-shadow: inset 0 0 0 .12cqw rgba(255, 255, 255, .08), 0 2.4cqw 4cqw -2cqw rgba(0, 0, 0, .55); }
.lap__cam { position: absolute; top: .45cqw; left: 50%; width: .5cqw; height: .5cqw; margin-left: -.25cqw; border-radius: 50%; background: #2a2d33; box-shadow: inset 0 0 0 .1cqw #111, 0 0 .2cqw rgba(90, 120, 160, .4); }
.lap__screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .35cqw; background: #1d150f; }
.lap__base { position: relative; display: block; height: 2.2cqw; width: 114%; margin-left: -7%; margin-top: -.15cqw; border-radius: .2cqw .2cqw 1.6cqw 1.6cqw / .2cqw .2cqw 1.6cqw 1.6cqw;
  background: linear-gradient(180deg, #f1f1f3 0%, #c9c9ce 22%, #9c9ca2 60%, #6f6f75 100%);
  box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .9), inset 0 -.2cqw .3cqw rgba(0, 0, 0, .25), 0 1.2cqw 1.6cqw -1cqw rgba(0, 0, 0, .45); }
.lap__notch { position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #8e8e94, #b8b8bd); box-shadow: inset 0 .15cqw .25cqw rgba(0, 0, 0, .35); }
.phn { position: absolute; right: 1%; bottom: 1.5%; width: 24%; z-index: 2; display: block; padding: .42cqw; border-radius: 4.3cqw;
  background: linear-gradient(135deg, #a8a8ae 0%, #3a3a3e 18%, #121214 40%, #2a2a2e 62%, #8a8a90 82%, #d8d8dc 100%);
  box-shadow: 0 2.6cqw 4cqw -1.6cqw rgba(0, 0, 0, .6), inset 0 0 0 .1cqw rgba(255, 255, 255, .25); transition: transform .6s var(--ease); }
.phn__screen { position: relative; display: block; aspect-ratio: 272 / 588; overflow: hidden; border: .85cqw solid #050506; border-radius: 3.9cqw; background: #1d150f; }
.phn__island { position: absolute; top: .9cqw; left: 50%; width: 34%; height: 1.55cqw; transform: translateX(-50%); border-radius: 1cqw; background: #000; z-index: 3; }
.phn__btn { position: absolute; width: .32cqw; border-radius: .2cqw; background: linear-gradient(90deg, #6d6d72, #c9c9ce, #6d6d72); }
.phn__btn--a { left: -.22cqw; top: 18%; height: 3.4cqw; }
.phn__btn--b { left: -.22cqw; top: 27%; height: 5cqw; }
.phn__btn--c { right: -.22cqw; top: 24%; height: 7cqw; }
.lap video, .phn video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* glass: a soft static reflection plus a light band that sweeps across now and then */
.glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 32%, transparent 48%); }
.glare::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 28%; left: -40%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); animation: sweep 9s var(--ease-soft) infinite; }
/* metal rims that catch the light */
.lap__lid::before, .phn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: .14cqw; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .05) 18%, rgba(255, 255, 255, .45) 42%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .7) 82%, rgba(255, 255, 255, .1) 100%) 0 0 / 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: rim 11s ease-in-out infinite alternate; }
.phn::before { padding: .22cqw; animation-delay: -4s; }
@keyframes rim { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes sweep { 0%, 62% { left: -40%; } 100% { left: 140%; } }
.dcard a:hover .lap { transform: translateY(-.8cqw); }
.dcard a:hover .phn { transform: translateY(-1.4cqw) rotate(-1deg); }

/* caption row */
.dcard__meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; margin-top: 1.4rem; }
.dcard__n { font-size: .74rem; color: #a59d94; letter-spacing: .08em; padding-right: 1.2rem; border-right: 1px solid var(--line-light); align-self: stretch; display: flex; align-items: center; }
.dcard__txt b { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; }
.dcard__txt small { display: block; margin-top: .25rem; font-size: .88rem; color: #8a8178; }
.dcard__tag { font-family: var(--sans); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: #8d6a48; border: 1px solid rgba(141, 106, 72, .35); padding: .25em .7em; border-radius: 999px; }
.dcard__go { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(27, 21, 17, .2); display: grid; place-items: center; color: var(--ink-soft); transition: background .3s, color .3s, border-color .3s; }
.dcard__go .ic { width: 17px; height: 17px; }
.dcard a:hover .dcard__go { background: #3a2a1f; color: var(--cream); border-color: #3a2a1f; }

@media (max-width: 1100px) { .dgrid { grid-template-columns: repeat(2, 1fr); } .ww__head--v2 { grid-template-columns: 1fr 1fr; } .ww__all { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .ww__head--v2 { grid-template-columns: 1fr; gap: 1.2rem; }
  .ww__head--v2 .ww__intro { padding-right: 0; border-right: 0; }
  .ww__title { font-size: clamp(2.6rem, 12vw, 3.4rem); white-space: normal; }
  .ww__all-ic { width: 48px; height: 48px; }
  .dgrid { grid-template-columns: 1fr; gap: 2.4rem; }
  .lap { left: 4%; width: 80%; }
  .dcard__txt b { font-size: 1.25rem; }
  .dcard__go { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .glare::after, .lap__lid::before, .phn::before { animation: none; } }