/* ============================================================
   Studio Redirected · v5 design layer
   Cream canvas, bordeaux hero panels, serif headings with italic
   rose accents, devices on a blush pedestal, soft cards.
   Loaded after styles.css; effects (Lenis, GSAP, trail) stay as they are.
   ============================================================ */
:root {
  --cream: #F5F1EC;
  --surface: #FBF9F6;
  --line5: #E7DFD6;
  --ink5: #1E1A1B;
  --muted5: #6E6863;
  --wine: #7A2E3A;
  --wine-deep: #5A1F2B;
  --rose: #EFD3D8;
  --blush: #F3E4E5;
  --blush-2: #EBCFD2;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --r-card: 18px;
  --r-panel: 26px;
}
body { background: var(--cream); color: var(--ink5); }

/* ---- type ---- */
.x-kicker { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--wine); }
.x-h1, .x-h2, .x-h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; color: var(--ink5); }
.x-h1 { font-size: clamp(48px, 6.4vw, 104px); line-height: .98; }
.x-h2 { font-size: clamp(34px, 4vw, 58px); line-height: 1.04; }
.x-h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
.x-h1 em, .x-h2 em, .x-h3 em { font-style: italic; color: var(--wine); }
.x-lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--muted5); }
.x-text { font-size: 15px; line-height: 1.65; color: var(--muted5); }

/* ---- buttons ---- */
.x-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), transform .45s var(--ease), box-shadow .25s;
}
.x-btn--wine { background: var(--wine); color: var(--cream); }
.x-btn--wine:hover { background: var(--wine-deep); }
.x-btn--light { background: var(--cream); color: var(--wine); }
.x-btn--light:hover { background: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); }
.x-btn--ghost { border: 1px solid rgba(245, 241, 236, .7); color: var(--cream); }
.x-btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.x-btn:focus-visible, .x-link:focus-visible, .x-arrow:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.x-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--wine); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.x-link--light { color: var(--cream); }
.x-arrow {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blush); color: var(--wine); font-size: 16px;
  transition: background .25s, color .25s, transform .35s var(--ease);
}
a:hover > .x-arrow, .x-arrow:hover { background: var(--wine); color: var(--cream); transform: translateX(3px); }
.x-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: var(--blush); color: var(--wine); font-size: 14px; }
a.x-pill:hover { background: var(--wine); color: var(--cream); }

/* ---- layout ---- */
.x-sec { padding-block: clamp(40px, 6vw, 84px); }
.x-sec + .x-sec { padding-top: 0; }
.x-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.x-head .x-kicker { display: block; margin-bottom: 14px; }
.x-head__side { max-width: 46ch; }
.x-head--row { align-items: center; }
@media (max-width: 760px) { .x-head { grid-template-columns: 1fr; } }

/* ---- the bordeaux hero panel ---- */
.x-hero { padding-top: clamp(16px, 2vw, 28px); }
.x-hero__panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-panel);
  background: radial-gradient(120% 110% at 85% 0%, #93404f 0%, var(--wine) 45%, #561f2a 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(20px, 3vw, 48px);
  padding: clamp(32px, 5vw, 76px) clamp(26px, 5vw, 80px) 0;
  min-height: clamp(520px, 62vh, 700px);
}
.x-hero__panel > :not(.stage-trail) { position: relative; z-index: 1; }
.x-hero__text { padding-bottom: clamp(32px, 5vw, 76px); }
.x-hero__text .x-kicker { color: var(--rose); display: block; margin-bottom: 22px; }
.x-hero .x-h1 { color: var(--cream); }
.x-hero .x-h1 em { color: var(--rose); }
.x-hero .x-lead { color: rgba(245, 241, 236, .85); margin-top: 22px; max-width: 38ch; }
.x-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.x-hero__media { align-self: end; position: relative; }
@media (max-width: 900px) {
  .x-hero__panel { grid-template-columns: 1fr; padding-bottom: 0; min-height: 0; }
  .x-hero__text { padding-bottom: 0; }
}

/* 01 / 02 / 03 project indicator */
.x-dots { position: absolute; right: clamp(16px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.x-dots button { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12px; letter-spacing: .08em; color: rgba(245, 241, 236, .5); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.x-dots button.is-active { color: var(--cream); }
.x-dots button.is-active::after { content: ""; width: 1px; height: 46px; background: var(--cream); }
.x-dots button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
@media (max-width: 900px) { .x-dots { display: none; } }

/* ---- devices on a blush pedestal ---- */
.x-stage { position: relative; padding-bottom: clamp(60px, 9vw, 120px); }
.x-stage::after {
  content: ""; position: absolute; z-index: -1; left: 8%; right: -10%; bottom: 0; height: clamp(90px, 13vw, 170px);
  background: linear-gradient(180deg, #E9BDC2 0%, #DCA5AC 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 18px 0 rgba(255, 255, 255, .22);
}
.x-stage--cream::after { background: linear-gradient(180deg, #F0D9DB 0%, #E6C3C7 100%); }
.dev-laptop { position: relative; width: 100%; }
.dev-laptop__screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: #111; border-radius: 14px 14px 4px 4px; padding: 2.2%;
  box-shadow: 0 40px 70px -35px rgba(20, 4, 10, .7);
}
.dev-laptop__screen > img, .dev-laptop__screen > video, .dev-laptop__view {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border-radius: 4px; background: #000;
}
.dev-laptop__base { height: 12px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #C9C3C0, #8E8885); }
.dev-laptop .hm-screen { position: relative; aspect-ratio: auto; height: 100%; border-radius: 4px; overflow: hidden; background: #000; }
.dev-laptop .hm-screen img { object-position: 0 0; }
.dev-phone {
  position: relative; width: 100%; aspect-ratio: 9 / 19.2; overflow: hidden;
  background: #121011; border-radius: 34px; padding: 3.2%;
  box-shadow: 0 40px 70px -30px rgba(20, 4, 10, .65);
}
.dev-phone > img, .dev-phone > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border-radius: 28px; background: #000; }
.x-stage__phone { position: absolute; right: -2%; bottom: clamp(40px, 6vw, 90px); width: 24%; }
.x-stage__laptop { width: 92%; }

/* ---- cards ---- */
.x-card { background: var(--surface); border: 1px solid var(--line5); border-radius: var(--r-card); }
.x-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.x-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.x-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
@media (max-width: 900px) { .x-grid-3, .x-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .x-grid-2, .x-grid-3, .x-grid-4 { grid-template-columns: 1fr; } }

/* service card: image left, text right */
.x-svc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 28px); padding: 12px; color: inherit; transition: transform .45s var(--ease), box-shadow .3s; }
.x-svc:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -32px rgba(60, 20, 30, .4); }
.x-svc__img { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--blush); display: grid; place-items: center; padding: 10% 12% 0; }
.x-svc__img .dev-laptop__screen { box-shadow: 0 20px 40px -24px rgba(20, 4, 10, .6); }
.x-svc__body { padding: 8px 10px 8px 0; }
.x-svc__body .x-text { margin: 10px 0 18px; }
@media (max-width: 640px) { .x-svc { grid-template-columns: 1fr; } .x-svc__body { padding: 4px 8px 10px; } }

/* portfolio card: image on top */
.x-work { display: block; padding: 10px; color: inherit; transition: transform .45s var(--ease), box-shadow .3s; }
.x-work:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -32px rgba(60, 20, 30, .4); }
.x-work .card__visual { aspect-ratio: 4 / 3; display: block; padding: 0; border-radius: 12px; overflow: hidden; background: var(--blush); }
.x-work .card__visual::before { display: none; }
.x-work .card__img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; }
.x-work__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 6px 6px; }
.x-work__name { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink5); }
.x-work__tags { font-size: 12px; color: var(--muted5); margin-top: 4px; }

/* icon card */
.x-icard { padding: clamp(22px, 2.4vw, 30px); }
.x-icard__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blush); color: var(--wine); margin-bottom: 18px; }
.x-icard__icon svg { width: 20px; height: 20px; }
.x-icard .x-text { margin-top: 10px; }

/* check list */
.x-checks { display: grid; gap: 11px; margin: 0; padding: 0; }
.x-checks li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.5; color: var(--ink5); }
.x-checks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--blush); color: var(--wine); font-size: 11px; font-weight: 600;
}

/* route card */
.x-route { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); }
.x-route .x-text { margin: 10px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line5); }
.x-route .x-checks { margin-bottom: 28px; }
.x-route .x-pill { margin-top: auto; align-self: flex-start; }
.x-route--tint { background: #F8EEEE; }

/* package card */
.x-pkg { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); padding: 10px; }
.x-pkg__img { border-radius: 12px; overflow: hidden; background: var(--blush); min-height: 260px; }
.x-pkg__img img { width: 100%; height: 100%; object-fit: cover; }
.x-pkg__body { padding: 14px 14px 14px 0; display: flex; flex-direction: column; }
.x-pkg__body .x-text { margin: 8px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line5); }
.x-pkg__price { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); color: var(--ink5); line-height: 1.1; }
.x-pkg__price small { font-family: inherit; font-size: 15px; color: var(--muted5); }
.x-pkg__next { font-size: 14px; color: var(--muted5); margin: 4px 0 16px; }
.x-pkg .x-checks li { font-size: 14px; }
.x-pkg__cta { margin-top: 20px; align-self: flex-start; }
.x-pkg__note { font-size: 12px; color: var(--muted5); margin-top: 14px; line-height: 1.5; }
@media (max-width: 760px) { .x-pkg { grid-template-columns: 1fr; } .x-pkg__img { min-height: 200px; aspect-ratio: 16 / 9; } .x-pkg__body { padding: 6px 8px 12px; } }

/* step card */
.x-step { display: flex; gap: 16px; padding: clamp(18px, 2vw, 26px); }
.x-step__no { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blush); color: var(--wine); font-family: var(--serif); font-size: 18px; }
.x-step h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--ink5); }
.x-step p { font-size: 14px; line-height: 1.55; color: var(--muted5); margin-top: 6px; }

/* about */
.x-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.x-about .about__big { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; }
.x-about .about__big img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.x-about .x-kicker { display: block; margin-bottom: 14px; }
.x-about .x-text { margin: 18px 0 24px; max-width: 52ch; }
@media (max-width: 760px) { .x-about { grid-template-columns: 1fr; } }

/* ---- blush panel with a light form ---- */
.x-panel {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--blush); border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 60px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start;
}
.x-panel > :not(.stage-trail) { position: relative; z-index: 1; }
.x-panel .x-kicker { display: block; margin-bottom: 12px; }
.x-panel .x-text { margin-top: 14px; max-width: 42ch; color: var(--muted5); }
.x-panel__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
@media (max-width: 860px) { .x-panel { grid-template-columns: 1fr; } }

/* the existing forms, restyled for a light background */
.x-panel .contact__form { background: none; border: 0; padding: 0; }
.x-panel .chips legend, .x-panel .checks legend, .x-panel .intake__count { color: var(--muted5); }
.x-panel .chip span { color: var(--ink5); border-color: rgba(30, 26, 27, .2); background: var(--surface); }
.x-panel .chip:hover span { border-color: var(--wine); }
.x-panel .chip input:checked + span { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.x-panel .chip input:focus-visible + span { outline-color: var(--wine); }
.x-panel .cfield { margin-top: 12px; }
.x-panel .cfield input, .x-panel .cfield textarea {
  background: #fff; border: 1px solid var(--line5); border-radius: 12px;
  color: var(--ink5); font-size: 15px; padding: 24px 16px 10px;
}
.x-panel .cfield textarea { min-height: 96px; }
.x-panel .cfield label { left: 16px; top: 17px; font-size: 15px; color: var(--muted5); }
.x-panel .cfield input:focus, .x-panel .cfield textarea:focus { border-color: var(--wine); }
.x-panel .cfield input:focus + label, .x-panel .cfield input:not(:placeholder-shown) + label,
.x-panel .cfield textarea:focus + label, .x-panel .cfield textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.72); color: var(--wine); }
.x-panel .cfield__err { color: #A3263B; }
.x-panel .cfield.has-error input, .x-panel .cfield.has-error textarea, .x-panel .chips.has-error .chip span { border-color: #C2556A; }
.x-panel .submit-pill { background: var(--wine); color: var(--cream); height: 54px; margin-top: 22px; }
.x-panel .submit-pill__arrow { background: var(--cream); color: var(--wine); width: 36px; height: 36px; }
.x-panel .check { color: var(--ink5); }
.x-panel .check input { border-color: rgba(30, 26, 27, .35); background: #fff; }
.x-panel .check input:checked { background: var(--wine); border-color: var(--wine); }
.x-panel .check input:checked::after { color: var(--cream); }
.x-panel .form__error { color: var(--ink5); background: #fff; }
.x-panel .form__error a { color: var(--wine); }
.x-panel .form__note { color: var(--ink5); background: #fff; }
.x-panel .intake__swap { border-color: var(--line5); background: #fff; }
.x-panel .intake__swap p { color: var(--ink5); }
.x-panel .btn { color: var(--wine); border-color: var(--wine); }
.x-panel .btn:hover { background: var(--wine); color: var(--cream); }
.x-panel .form__done .h3, .x-panel .form__done .body { color: var(--ink5); }
.x-panel .intake__legend { color: var(--ink5); }
.x-panel .intake__progress span { background: rgba(122, 46, 58, .18); }
.x-panel .intake__progress span.is-on { background: var(--wine); }
.x-panel .intake__back, .x-panel .intake__change, .x-panel .intake__edit button { color: var(--wine); border-color: rgba(122, 46, 58, .4); }
.x-panel .intake__route { background: #fff; }
.x-panel .intake__route-t { color: var(--ink5); }
.x-panel .intake__route-d, .x-panel .intake__fineprint { color: var(--muted5); }
.x-panel .intake__summary { background: #fff; }
.x-panel .intake__summary-t, .x-panel .intake__summary dt { color: var(--muted5); }
.x-panel .intake__summary dd { color: var(--ink5); }
.x-panel .intake__summary dl > div { border-color: var(--line5); }
.x-panel .intake__edit button { color: var(--wine); }
.x-panel .prop-tag { vertical-align: baseline; }

/* ---- case page ---- */
.x-case-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding-top: clamp(30px, 5vw, 70px); }
.x-case-hero .x-h1 { color: var(--wine); font-size: clamp(48px, 6vw, 92px); }
.x-case-hero .x-h1 em { display: block; color: #B0566A; }
.x-case-hero .x-lead { margin: 24px 0 26px; max-width: 40ch; }
.x-case-hero .case-back { color: var(--muted5); font-size: 13px; display: inline-block; margin-bottom: 22px; }
.x-case-hero .x-stage::after { left: 12%; right: -30%; }
@media (max-width: 860px) { .x-case-hero { grid-template-columns: 1fr; } }
.x-statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); padding-bottom: clamp(30px, 4vw, 56px); border-bottom: 1px solid var(--line5); }
.x-statement .x-h2 { color: var(--wine); }
.x-statement .x-text + .x-text { margin-top: 14px; }
@media (max-width: 760px) { .x-statement { grid-template-columns: 1fr; } }
.x-bento { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.x-bento__row1 { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: inherit; align-items: stretch; }
.x-bento__row2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.2fr); gap: inherit; }
.x-bento__shot { border-radius: var(--r-card); overflow: hidden; background: #111; min-height: 320px; }
.x-bento__shot img, .x-bento__shot video, .x-bento__shot iframe { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border: 0; }
.x-bento__shot--live { background: #fff; min-height: 460px; }
.x-bento__phone { display: grid; place-items: center; padding: 6% 12%; border-radius: var(--r-card); background: var(--blush); }
.x-bento__phone .dev-phone { max-width: 220px; }
.x-bento__photo { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 320px; background: var(--blush); }
.x-bento__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-bento__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(0deg, rgba(20, 8, 12, .7), rgba(20, 8, 12, 0)); color: var(--cream); font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
@media (max-width: 860px) { .x-bento__row1, .x-bento__row2 { grid-template-columns: 1fr; } .x-bento__photo { min-height: 280px; } }
.x-closing { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: var(--r-panel); overflow: hidden; }
.x-closing__img { min-height: 360px; background: var(--blush); }
.x-closing__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-closing__text { background: var(--blush); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.x-closing__text .x-h2 { color: var(--wine); font-size: clamp(30px, 3.2vw, 46px); }
.x-closing__text .x-text { margin-top: 18px; }
@media (max-width: 760px) { .x-closing { grid-template-columns: 1fr; } }
.x-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line5); }
.x-next a.x-next__link { display: flex; align-items: center; gap: 18px; color: inherit; }
.x-next__thumb { width: 110px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #111; }
.x-next__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.x-next__label { font-size: 12px; color: var(--muted5); }
.x-next__name { font-family: var(--serif); font-size: 24px; color: var(--wine); }
@media (max-width: 640px) { .x-next { flex-direction: column; align-items: flex-start; } }

/* footer, FAQ and nav on the cream canvas */
.nav { background: color-mix(in srgb, var(--cream) 92%, transparent); }
.nav__links a.nav__cta { height: 42px; padding: 0 20px; background: var(--wine); }
.faq__title, .x-faq-title { font-family: var(--serif); font-weight: 400; }

/* ---- homepage hero keeps the legacy hooks (scroll effects) without their old layout ---- */
.x-hero__panel.hero__panel {
  display: grid; flex-direction: initial; justify-content: initial;
  max-height: none; min-height: clamp(520px, 64vh, 720px);
  padding: clamp(32px, 5vw, 76px) clamp(56px, 7vw, 110px) 0 clamp(26px, 5vw, 80px);
}
.x-hero__text.hero__content { max-width: none; }
.x-hero__media.hero__media { position: relative; inset: auto; display: block; padding: 0; margin: 0; pointer-events: auto; }
.hero__h1 { margin: 0; font-weight: inherit; }
.hero__h1 .x-kicker { display: block; margin-bottom: 22px; color: var(--rose); }
.hero__h1 .x-h1.hero__title { display: block; margin: 0; font-size: clamp(52px, 6.6vw, 108px); font-weight: 400; letter-spacing: -.025em; line-height: .96; color: var(--cream); }
.hero__h1 .hero__title em { color: var(--rose); }
.x-hero__media .hm-screen { aspect-ratio: auto; }
.x-hero__media .hm-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; opacity: 0; transition: opacity .9s var(--ease); scale: 1; }
.x-hero__media .hm-screen img.is-active { opacity: 1; }
@media (max-width: 900px) {
  .x-hero__panel.hero__panel { padding-right: clamp(26px, 5vw, 80px); min-height: 0; }
}

/* two phones on the pedestal (software) */
.x-stage--phones { display: flex; justify-content: center; align-items: flex-end; gap: 6%; padding-top: 20px; }
.x-stage--phones .dev-phone { width: 34%; }
.x-stage--phones .dev-phone:nth-child(2) { margin-bottom: 8%; }

/* software: intro cell + three icon cards */
.x-what { align-items: stretch; }
.x-what__intro { padding: 6px 10px 6px 0; }
@media (max-width: 900px) { .x-what__intro { grid-column: 1 / -1; } }

/* case feature card: phones on blush + story */
.x-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 12px; }
.x-feature__media { display: flex; justify-content: center; align-items: flex-end; gap: 6%; background: var(--blush); border-radius: 12px; padding: 8% 10% 0; overflow: hidden; }
.x-feature__body { padding: 18px 22px 18px 0; }
.x-feature__body .x-kicker { display: block; margin-bottom: 14px; }
.x-feature__body .x-text { margin: 16px 0 22px; }
@media (max-width: 760px) { .x-feature { grid-template-columns: 1fr; } .x-feature__body { padding: 8px 10px 14px; } }

/* service-card text spans behave as blocks */
.x-svc__body .x-h3 { display: block; }
.x-work .card__visual { width: 100%; }
.x-work__name, .x-work__tags { display: block; }

/* background SEO pages: the older sections on the new canvas */
.svc-sec__h { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.svc-card { background: var(--surface); border: 1px solid var(--line5); }
.svc-related { margin-top: clamp(28px, 4vw, 48px); }

/* fixes after the first render */
.x-hero__panel > .x-dots { position: absolute; z-index: 2; }
.work__grid.x-grid-3 > .card:nth-child(3):last-child { grid-column: auto; }
.work__grid.x-grid-3 > .card:nth-child(3):last-child .card__visual { aspect-ratio: 4 / 3; }
.x-pkg__cta { white-space: normal; height: auto; min-height: 50px; padding-block: 12px; }
/* case page polish */
.x-case-hero .x-h1 em { font-size: .6em; line-height: 1.08; margin-top: .25em; }
.x-case-hero .x-link { margin-bottom: clamp(20px, 3vw, 40px); }
.x-closing__img { position: relative; min-height: clamp(320px, 34vw, 460px); }
.x-closing__img img { position: absolute; inset: 0; }

/* ---- round 2: no pedestal, nothing floating, devices shown whole ---- */
.x-stage { padding-bottom: 0; }
.x-stage::after { display: none; }
.x-dots { display: none; }
/* hero laptop rises out of the bottom edge of the bordeaux panel */
.x-hero__media { align-self: end; }
.x-hero .x-stage__laptop { width: 100%; margin-bottom: -2px; }
.x-hero .dev-laptop__screen { box-shadow: 0 -10px 60px -20px rgba(20, 4, 10, .55); }
@media (max-width: 900px) { .x-hero__media { margin-top: 10px; } }
/* portfolio cards: the website in a laptop on blush */
.x-work .x-work__visual { display: grid; place-items: center; padding: 9% 9% 7%; background: var(--blush); }
.x-work .x-work__visual .dev-laptop { width: 100%; }
.x-work .x-work__visual .dev-laptop__screen { box-shadow: 0 22px 40px -24px rgba(20, 4, 10, .55); }
.x-work .card__img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; border-radius: 3px; }
/* case bento tiles: screenshots in a laptop on blush */
.x-bento__tile { display: grid; place-items: center; padding: 10% 8%; border-radius: var(--r-card); background: var(--blush); }
.x-bento__tile .dev-laptop { width: 100%; }
.x-closing__img img { object-position: 0 0; }
.work__grid.x-grid-3 .card:nth-child(even) { margin-top: 0; }
.work__grid.x-grid-3 .card.x-work:hover { transform: translateY(-4px); }
.work__grid.x-grid-3 .card.x-work { transition: transform .45s var(--ease), box-shadow .3s; }

/* ---- round 3: app screens as an overlapping pair rising out of the tile edge ---- */
.x-duo { position: relative; width: 100%; aspect-ratio: 20 / 17; clip-path: inset(-40% -40% 0 -40%); }
.x-duo .dev-phone--app {
  position: absolute; aspect-ratio: auto; height: auto; padding: 2%;
  border-radius: 15% / 7%; background: #1d1a1b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 34px 60px -26px rgba(20, 4, 10, .6);
}
.x-duo .dev-phone--app > img { height: auto; aspect-ratio: 600 / 1299; border-radius: 13% / 6%; background: #fdf8ef; }
.x-duo .x-duo__back { left: 6%; top: 0; width: 46%; }
.x-duo .x-duo__front { right: 6%; top: 10%; width: 48%; z-index: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), -18px 30px 60px -22px rgba(20, 4, 10, .6); }
.x-hero .x-stage--duo { padding-top: 6px; }
.x-hero .x-duo { max-width: 470px; margin: 0 auto; }
.x-svc__img--phone { display: flex; align-items: flex-end; padding: 9% 8% 0; }
.x-feature__media { display: flex; align-items: flex-end; align-self: stretch; padding: 12% 4% 0; min-height: clamp(320px, 36vw, 480px); }
@media (max-width: 900px) { .x-hero .x-duo { max-width: 380px; } }
/* case hero: room between the laptop and the statement below */
.x-case-hero .x-stage { padding-bottom: clamp(48px, 6vw, 96px); }
/* case phones: frame matches the phone videos (about 9:16.7), centred, a bit larger */
.x-bento__phone { padding: 7% 8%; }
.x-bento__phone .dev-phone { width: 100%; max-width: 280px; aspect-ratio: 10 / 18; }
.x-bento__phone .dev-phone > video, .x-bento__phone .dev-phone > img { object-position: 50% 0; }

/* No small uppercase overlines anywhere: labels read as plain sentence text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.x-kicker, .kicker { display: none; }
.chips legend, .checks legend, .intake__count, .intake__summary-t { font-size: 15px; letter-spacing: 0; text-transform: none; }
.x-next__label { font-size: 14px; }

/* ---- Hero: text left, a smaller laptop right, whole and vertically centred ---- */
.x-hero__media--side { align-self: center; display: flex; justify-content: flex-end; padding-bottom: clamp(32px, 5vw, 76px); }
.x-hero__device { width: 86%; max-width: 540px; }
.x-hero__device .dev-laptop__screen { box-shadow: 0 34px 70px -30px rgba(20, 4, 10, .7); }
.x-hero__device .hm-screen { position: relative; height: 100%; border-radius: 4px; overflow: hidden; background: #000; }
@media (max-width: 900px) {
  .x-hero__media--side { justify-content: center; padding-bottom: clamp(28px, 6vw, 48px); }
  .x-hero__device { width: 100%; max-width: 460px; }
}

/* ---- Live websites: rendered at real width, scaled into the laptop or phone ---- */
.live-frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; border-radius: 4px; }
.live-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }
.dev-phone--live .live-frame { border-radius: 28px; }
.x-bento__phone .dev-phone--live { aspect-ratio: 9 / 19.2; }

/* ---- Case house style colours (KD values as default) ---- */

/* ---- Headings: one typeface, upright, one colour (no italic accent) ---- */
h1 em, h2 em, h3 em, .x-h1 em, .x-h2 em, .x-h3 em, .hero__title em, .work__title em { font-style: normal !important; color: inherit !important; }
.x-case-hero .x-h1 em { font-size: .6em; margin-top: .25em; }

/* ---- Case breadcrumb instead of a back arrow ---- */
.case-crumb { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted5); margin-bottom: 22px; }
.case-crumb a { color: var(--ink5); border-bottom: 1px solid var(--line5); }
.case-crumb a:hover { color: var(--wine); border-color: currentColor; }

/* ---- Websites: three short choices ---- */
.x-choice { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); }
.x-choice__no { font-family: var(--serif); font-size: clamp(64px, 6vw, 92px); line-height: 1; color: var(--wine); margin-bottom: 18px; }
.x-choice .x-text { margin: 8px 0 18px; }
.x-choice__price { margin: auto 0 20px; font-size: 22px; color: var(--ink5); }
.x-choice__price small { display: block; font-size: 13px; color: var(--muted5); margin-top: 2px; }
.x-choice__cta { align-self: flex-start; }
@media (max-width: 900px) { .x-choices { grid-template-columns: 1fr; } }

/* ---- Money Reset case: the app in its own colours ---- */
.mr-tone--coral { background: #FF6958; }
.mr-tone--butter { background: #FFDC5B; }
.mr-tone--powder { background: #AACAFF; }
.mr-tone--lilac { background: #EDE0F0; }
.mr-hero { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 12% 10% 0; display: flex; align-items: flex-end; min-height: clamp(360px, 42vw, 560px); }
.x-case-hero .mr-hero { margin-bottom: clamp(48px, 6vw, 96px); }
.mr-hero__sun { position: absolute; left: -14%; bottom: -26%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: #FFDC5B; }
.mr-hero .x-duo { position: relative; max-width: 440px; margin: 0 auto; }
.x-feature__media.mr-tone--butter, .x-feature__media.mr-tone--powder { background-image: none; }
.x-feature__media.mr-tone--butter { background-color: #FFDC5B; }
.x-feature__media.mr-tone--powder { background-color: #AACAFF; }
.mr-feature .x-feature__media .x-duo { max-width: 420px; margin: 0 auto; }
.mr-feature--flip .x-feature__media { order: 2; }
.mr-feature--flip .x-feature__body { padding: 18px 0 18px 22px; }
@media (max-width: 760px) { .mr-feature--flip .x-feature__media { order: 0; } .mr-feature--flip .x-feature__body { padding: 8px 10px 14px; } }

.mr-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto; gap: clamp(14px, 1.8vw, 22px); }
.mr-brand__logo { grid-row: 1 / span 2; border-radius: var(--r-card); overflow: hidden; display: grid; place-items: center; aspect-ratio: 1; }
.mr-brand__logo img { width: 100%; height: 100%; object-fit: cover; }
.mr-brand__type { padding: clamp(22px, 3vw, 40px); background: #FFF9EE; color: #35102C; }
.mr-type__title { font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(38px, 4.4vw, 64px); line-height: .98; letter-spacing: -.03em; margin: 0; }
.mr-type__body { font-family: "Figtree", sans-serif; font-size: 17px; line-height: 1.5; color: #6D5773; margin: 14px 0 22px; }
.mr-type__names { display: flex; gap: clamp(18px, 3vw, 40px); margin: 0; }
.mr-type__names dt { font-family: "Figtree", sans-serif; font-weight: 600; font-size: 15px; }
.mr-type__names dd { margin: 2px 0 0; font-size: 13px; color: #6D5773; }
.mr-brand__palette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-radius: var(--r-card); overflow: hidden; min-height: 170px; box-shadow: 0 0 0 1px rgba(53, 16, 44, .08); }
.mr-swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px 10px; color: #35102C; font-size: 12px; line-height: 1.3; }
.mr-swatch span:first-child { font-weight: 500; }
.mr-swatch span:last-child { opacity: .75; font-size: 11px; }
.mr-swatch--dark { color: #FFF9EE; }
@media (max-width: 860px) {
  .mr-brand { grid-template-columns: 1fr; }
  .mr-brand__logo { grid-row: auto; max-width: 420px; }
  .mr-brand__palette { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mr-swatch { min-height: 96px; }
}

.mr-screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.mr-screen { margin: 0; border-radius: var(--r-card); padding: 12% 12% 0; overflow: hidden; display: flex; flex-direction: column; }
.mr-screen figcaption { order: -1; font-family: "Figtree", var(--sans, sans-serif); font-weight: 600; font-size: 15px; color: #35102C; margin: -4% 0 8%; }
.mr-phone { padding: 3%; border-radius: 15% / 7%; background: #1d1a1b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 50px -26px rgba(20, 4, 10, .55); margin-bottom: -18%; }
.mr-phone img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1299; border-radius: 13% / 6%; }
@media (max-width: 900px) { .mr-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mr-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.mr-post { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; }
.mr-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .mr-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Case house style (KD Sports): type specimen on the brand black, palette strip below ---- */
.cb-type { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-radius: var(--r-card); overflow: hidden; margin-bottom: clamp(14px, 1.8vw, 22px); }
.cb-type__head { background: var(--cb-dark, #1A1A1A); color: var(--cb-light, #F8F7F4); padding: clamp(26px, 4vw, 56px); }
.cb-type__body { background: var(--cb-light, #F8F7F4); color: var(--cb-ink, #1A1A1A); padding: clamp(26px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 0 1px rgba(26, 26, 26, .06); }
.cb-type__sample { font-weight: 700; font-size: clamp(44px, 6vw, 92px); line-height: .95; letter-spacing: -.02em; margin: 0 0 28px; color: var(--cb-accent, #C9A96E); }
.cb-type__text { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; margin: 0 0 28px; max-width: 18ch; }
.cb-type__name { margin: 0; font-size: 15px; font-weight: 500; }
.cb-type__name span { display: block; font-weight: 400; font-size: 13px; opacity: .65; margin-top: 2px; }
.cb-palette { min-height: 150px; }
@media (max-width: 760px) {
  .cb-type { grid-template-columns: 1fr; }
  .cb-palette { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cb-palette .mr-swatch { min-height: 96px; }
}

/* ---- Portfolio: four projects in a 2 x 2 grid ---- */
.work__grid.x-grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.work__grid.x-grid-work .card:nth-child(even) { margin-top: 0; }
.work__grid.x-grid-work .card.x-work { transition: transform .45s var(--ease), box-shadow .3s; }
.work__grid.x-grid-work .card.x-work:hover { transform: translateY(-4px); }
.x-grid-work .x-work .x-work__visual { aspect-ratio: 16 / 10; padding: 7% 15% 5%; }
.x-grid-work .x-work .x-work__visual--app { display: flex; align-items: flex-end; justify-content: center; padding: 6% 10% 0; }
.x-work__visual--app .x-duo { width: 62%; }
@media (max-width: 640px) {
  .work__grid.x-grid-work { grid-template-columns: 1fr; }
  .x-grid-work .x-work .x-work__visual { padding: 7% 10% 5%; }
}

/* ---- Water: flowing bordeaux under the hero ---- */
.x-hero__panel > .x-liquid { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.x-liquid i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.x-liquid i:nth-child(1) { width: 70%; height: 95%; left: -18%; top: 18%; background: radial-gradient(closest-side, rgba(158, 70, 86, .85), rgba(158, 70, 86, 0)); animation: xLiquidA 17s ease-in-out infinite alternate; }
.x-liquid i:nth-child(2) { width: 62%; height: 88%; right: -14%; top: -30%; background: radial-gradient(closest-side, rgba(70, 20, 30, .8), rgba(70, 20, 30, 0)); animation: xLiquidB 21s ease-in-out infinite alternate; }
.x-liquid i:nth-child(3) { width: 52%; height: 75%; left: 30%; bottom: -34%; background: radial-gradient(closest-side, rgba(142, 58, 74, .75), rgba(142, 58, 74, 0)); animation: xLiquidC 25s ease-in-out infinite alternate; }
@keyframes xLiquidA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28%, -16%) scale(1.18, .92); } 100% { transform: translate(52%, 6%) scale(.92, 1.1); } }
@keyframes xLiquidB { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30%, 22%) scale(.9, 1.15); } 100% { transform: translate(-12%, 40%) scale(1.12, .95); } }
@keyframes xLiquidC { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-36%, -28%) scale(1.15); } 100% { transform: translate(14%, -40%) scale(.95, 1.12); } }
@media (prefers-reduced-motion: reduce) { .x-liquid i { animation: none; } }

/* ---- Hero titles: sized to their column so no letter slides under the laptop, room for descenders (g, j, p) ---- */
.x-hero__panel { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.x-hero .x-h1 { font-size: clamp(40px, 4.7vw, 72px); line-height: 1.04; overflow-wrap: break-word; }
.hero__h1 .x-h1.hero__title { font-size: clamp(44px, 5vw, 78px); line-height: 1.02; }
.ht-line { padding-bottom: .24em; margin-bottom: -.24em; }
.x-case-hero .x-h1 { line-height: 1.04; }
@media (max-width: 900px) { .x-hero__panel, .x-hero__panel.hero__panel { grid-template-columns: minmax(0, 1fr); } }
.x-head > .x-link { justify-self: end; align-self: end; width: auto; }