:root {
  --navy: #09264d;
  --navy-2: #103968;
  --gold: #edcc56;
  --coral: #ef947e;
  --cream: #f6f1e7;
  --ink: #1b2635;
  --muted: #687485;
  --line: #dfe3e7;
  --shadow: 0 22px 60px rgba(9, 38, 77, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 14px/1.5 "DM Sans", sans-serif; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.skip-link { position: fixed; z-index: 50; left: 16px; top: -70px; padding: 12px 18px; border-radius: 0 0 10px 10px; background: white; color: var(--navy); font-weight: 700; box-shadow: var(--shadow); }
.skip-link:focus { top: 0; }
.announcement { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(4vw, calc((100vw - 1480px) / 2)); background: var(--navy); color: #dbe5f1; font-size: 10px; letter-spacing: .04em; }
.announcement p { margin: 0; }
.announcement p:first-child { display: flex; align-items: center; gap: 8px; }
.announcement p:first-child span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(237,204,86,.13); }

.studio-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 12px max(4vw, calc((100vw - 1480px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand img { width: 41px; height: 56px; object-fit: contain; }
.brand span { display: flex; flex-direction: column; }
.brand strong { color: var(--navy); font: 800 17px/1 "Manrope", sans-serif; letter-spacing: .04em; }
.brand small { margin-top: 6px; color: #7c8795; font-size: 7px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; gap: 9px; padding: 12px 17px; border: 1px solid var(--navy); border-radius: 999px; color: var(--navy); font-size: 11px; font-weight: 700; transition: .2s; }
.back-link:hover { background: var(--navy); color: white; }

main { overflow: hidden; }
.studio-intro { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; padding: 72px max(6vw, calc((100vw - 1380px) / 2)) 55px; background: var(--cream); }
.eyebrow { margin: 0 0 16px; color: var(--coral); font: 800 9px "Manrope", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.studio-intro h1 { margin: 0; color: var(--navy); font: 800 clamp(58px, 7.2vw, 108px)/.86 "Manrope", sans-serif; letter-spacing: -.07em; }
.studio-intro h1 em { color: var(--coral); font-style: normal; }
.studio-intro > p { max-width: 510px; margin: 0 0 8px; color: #5f6d7e; font-size: 16px; line-height: 1.8; }

.product-tabs-wrap { position: relative; z-index: 5; padding: 0 max(4vw, calc((100vw - 1480px) / 2)); border-top: 1px solid #e5dfd4; border-bottom: 1px solid var(--line); background: white; }
.product-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.product-tab { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 72px; padding: 0 18px; border: 0; background: transparent; color: #6e7885; cursor: pointer; scroll-snap-align: start; font-size: 11px; font-weight: 700; white-space: nowrap; }
.product-tab span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #f0f2f4; color: var(--navy); font: 800 9px "Manrope", sans-serif; }
.product-tab::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.product-tab:hover { color: var(--navy); }
.product-tab[aria-selected="true"] { color: var(--navy); }
.product-tab[aria-selected="true"] span { background: var(--gold); }
.product-tab[aria-selected="true"]::after { background: var(--navy); }

.designer { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(410px, .85fr); gap: clamp(45px, 6vw, 100px); padding: 70px max(5vw, calc((100vw - 1420px) / 2)) 110px; background: #f8fafb; }
.preview-column { align-self: start; position: sticky; top: 20px; min-width: 0; }
.preview-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.preview-heading .eyebrow { margin-bottom: 6px; }
.preview-heading h2 { margin: 0; color: var(--navy); font: 800 clamp(30px, 3vw, 46px)/1 "Manrope", sans-serif; letter-spacing: -.045em; }
.preview-badge { padding: 8px 11px; border-radius: 999px; background: #e7f0f6; color: var(--navy); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.preview-stage { aspect-ratio: 1; position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; border-radius: 32px; background: #eee9df; box-shadow: inset 0 0 0 1px rgba(9,38,77,.07), var(--shadow); touch-action: none; transition: background .25s; }
.stage-grid { position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); background-size: 8.333% 8.333%; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.product-preview { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; filter: none; transition: filter .25s; }
.business-card-mockup { width: 60%; aspect-ratio: 85 / 55; position: absolute; z-index: 1; left: 50%; top: 50%; display: none; transform: translate(-50%, -50%) rotate(-3deg); filter: drop-shadow(0 22px 18px rgba(9,38,77,.2)); pointer-events: none; }
.business-card-mockup .card-sheet { position: absolute; inset: 0; border: 1px solid rgba(9,38,77,.15); border-radius: 3px; background: linear-gradient(180deg, #fff, #d7dadd); box-shadow: 0 2px 0 rgba(9,38,77,.08); }
.business-card-mockup .card-sheet-two { transform: translate(-11px, 12px); opacity: .78; }
.business-card-mockup .card-sheet-one { transform: translate(-6px, 6px); background: linear-gradient(180deg, #fff, #e7e7e3); }
.business-card-mockup .card-face { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(9,38,77,.14); border-radius: 3px; background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 48%), var(--card-stock, #fff); box-shadow: inset 0 -2px 0 rgba(0,0,0,.06), inset 0 0 18px rgba(255,255,255,.04); transition: background .25s; }
.card-wave { position: absolute; z-index: 1; bottom: 0; display: block; background: var(--gold); }
.card-wave-left { width: 45%; height: 35%; left: 0; border-radius: 70% 55% 0 3px / 100% 85% 0 3px; }
.card-wave-centre { width: 52%; height: 47%; left: 24%; border-radius: 58% 58% 0 0 / 100% 100% 0 0; }
.card-wave-right { width: 38%; height: 39%; right: 0; border-radius: 60% 0 3px 0 / 100% 0 3px 0; }
.card-person { width: 43%; position: absolute; z-index: 2; right: 7%; top: 17%; display: flex; flex-direction: column; color: var(--card-ink, white); }
.card-person strong { overflow: hidden; font: 800 clamp(9px, 1.05vw, 16px)/1.1 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.card-person small { margin-top: clamp(2px, .25vw, 4px); font-size: clamp(5px, .48vw, 8px); font-weight: 600; opacity: .7; }
.card-contact-copy { width: 92%; position: absolute; z-index: 2; left: 4%; bottom: 7%; display: grid; grid-template-columns: .8fr 1.15fr 1.05fr; gap: 4%; color: var(--navy); line-height: 1.1; }
.card-contact-copy > span { min-width: 0; display: flex; align-items: center; gap: clamp(3px, .42vw, 7px); }
.card-contact-copy i { width: clamp(13px, 1.65vw, 25px); height: clamp(13px, 1.65vw, 25px); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold); font: 800 clamp(6px, .7vw, 10px) "Manrope", sans-serif; font-style: normal; }
.card-contact-copy > span > span { min-width: 0; display: flex; flex-direction: column; }
.card-contact-copy small { margin-bottom: 2px; font-size: clamp(4px, .38vw, 6px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-contact-copy b { overflow: hidden; font-size: clamp(4px, .45vw, 7px); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.preview-stage.business-card-stage { background: #bfddeb; }
.preview-stage.business-card-stage .stage-grid { opacity: .16; }
.preview-stage.business-card-stage .product-preview { display: none; }
.preview-stage.business-card-stage .business-card-mockup { display: block; }
.design-layer { --x: 50%; --y: 48%; --design-width: 18%; --rotation: 0deg; width: var(--design-width); position: absolute; z-index: 3; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -50%) rotate(var(--rotation)); cursor: grab; user-select: none; touch-action: none; filter: drop-shadow(0 2px 2px rgba(9,38,77,.09)); }
.design-layer:active { cursor: grabbing; }
.design-layer:focus-visible { outline: 2px dashed var(--coral); outline-offset: 7px; }
.design-layer img { width: 100%; max-height: 110px; display: block; object-fit: contain; pointer-events: none; }
.design-layer span { max-width: 180%; color: var(--design-ink, var(--navy)); font: 800 clamp(7px, .9vw, 13px)/1.15 "Manrope", sans-serif; text-align: center; white-space: pre-wrap; text-shadow: 0 1px 1px rgba(255,255,255,.25); pointer-events: none; }
.placement-label { position: absolute; z-index: 4; left: 17px; bottom: 17px; padding: 8px 11px; border-radius: 8px; background: rgba(255,255,255,.86); color: var(--navy); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; backdrop-filter: blur(8px); }
.preview-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.secondary-action, .download-action { min-height: 45px; padding: 0 17px; border-radius: 999px; cursor: pointer; font-size: 10px; font-weight: 800; }
.secondary-action { border: 1px solid #c8d0d8; background: white; color: var(--navy); }
.download-action { display: inline-flex; align-items: center; gap: 11px; border: 0; background: var(--navy); color: white; }
.download-action span { color: var(--gold); font-size: 18px; }
.privacy-note { display: flex; gap: 8px; margin: 14px 3px 0; color: #788493; font-size: 9px; }
.privacy-note span { color: #48a77d; }

.controls-column { min-width: 0; }
.control-block { position: relative; padding: 28px 0; border-bottom: 1px solid var(--line); }
.control-block:first-child { padding-top: 3px; }
.control-title { display: flex; align-items: flex-start; gap: 14px; }
.control-title > span { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--gold); font: 800 8px "Manrope", sans-serif; }
.control-title h3 { margin: 1px 0 3px; color: var(--navy); font: 800 15px "Manrope", sans-serif; }
.control-title p { margin: 0; color: #7b8592; font-size: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0 42px; }
.swatch { width: 38px; height: 38px; position: relative; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(9,38,77,.15); cursor: pointer; }
.swatch::after { content: ""; position: absolute; inset: -5px; border: 2px solid transparent; border-radius: 50%; }
.swatch[aria-checked="true"]::after { border-color: var(--navy); }
.swatch:focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }

.upload-zone { min-height: 96px; display: flex; align-items: center; gap: 15px; margin: 20px 0 0 42px; padding: 17px; border: 1px dashed #aab5c1; border-radius: 15px; background: white; cursor: pointer; transition: .2s; }
.upload-zone:hover, .upload-zone.dragging { border-color: var(--coral); background: #fff9f7; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--cream); color: var(--navy); font-size: 24px; }
.upload-zone > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.upload-zone strong { overflow: hidden; color: var(--navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.upload-zone small { margin-top: 4px; color: #7d8895; font-size: 9px; }
.remove-artwork { margin: 10px 0 0 42px; padding: 0; border: 0; background: transparent; color: #a24b40; cursor: pointer; font-size: 9px; text-decoration: underline; }
textarea { width: calc(100% - 42px); margin: 18px 0 0 42px; padding: 14px 16px 22px; resize: vertical; border: 1px solid #cfd6dd; border-radius: 13px; background: white; color: var(--navy); outline: 0; line-height: 1.5; }
textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(9,38,77,.08); }
.character-count { position: absolute; right: 12px; bottom: 35px; color: #929ca8; font-size: 8px; }
.card-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 0 42px; }
.card-field-grid label { display: flex; flex-direction: column; gap: 6px; color: var(--navy); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.card-field-grid input { width: 100%; min-width: 0; height: 43px; padding: 0 12px; border: 1px solid #cfd6dd; border-radius: 11px; background: white; color: var(--navy); outline: 0; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.card-field-grid input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(9,38,77,.08); }
.placement-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0 42px; }
.placement-option { padding: 10px 13px; border: 1px solid #cbd3db; border-radius: 999px; background: white; color: #5e6b79; cursor: pointer; font-size: 9px; font-weight: 700; }
.placement-option[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: white; }
.compact-controls { display: grid; grid-template-columns: 1fr auto; gap: 9px 18px; }
.compact-controls label { display: flex; justify-content: space-between; gap: 20px; color: var(--navy); font-size: 10px; font-weight: 700; }
.compact-controls label:nth-of-type(2) { margin-top: 13px; }
.compact-controls output { color: #7b8693; font-weight: 500; }
.compact-controls input { grid-column: 1 / -1; width: 100%; accent-color: var(--coral); cursor: pointer; }
.order-panel { margin-top: 30px; padding: 30px; border-radius: 22px; background: var(--navy); color: white; box-shadow: var(--shadow); }
.order-panel .eyebrow { color: var(--gold); }
.order-panel h3 { margin: 0; font: 800 27px/1.1 "Manrope", sans-serif; letter-spacing: -.035em; }
.order-panel > p:not(.eyebrow) { color: #b8c5d5; font-size: 11px; line-height: 1.7; }
.primary-action { min-height: 48px; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 18px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 10px; font-weight: 800; }
.primary-action span { font-size: 16px; }

footer { min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 35px max(5vw, calc((100vw - 1420px) / 2)); background: #061a35; color: #8192a9; }
.footer-brand strong { color: white; }
footer p { margin: 0; font-size: 9px; }
.toast { max-width: calc(100vw - 30px); position: fixed; z-index: 30; left: 50%; bottom: 24px; padding: 12px 17px; border-radius: 999px; background: var(--navy); color: white; box-shadow: var(--shadow); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .designer { grid-template-columns: minmax(0, 1fr) 390px; gap: 40px; padding-left: 4vw; padding-right: 4vw; }
}

@media (max-width: 820px) {
  .announcement p:last-child { display: none; }
  .studio-intro { grid-template-columns: 1fr; gap: 28px; padding-top: 58px; }
  .designer { grid-template-columns: 1fr; padding-top: 45px; }
  .preview-column { position: static; }
  .preview-stage { max-height: 680px; }
  .controls-column { max-width: 650px; }
}

@media (max-width: 560px) {
  .announcement { min-height: 34px; justify-content: center; }
  .studio-header { min-height: 76px; padding: 9px 5vw; }
  .brand img { width: 34px; height: 46px; }
  .brand small { display: none; }
  .back-link { padding: 10px 13px; font-size: 9px; }
  .studio-intro { padding: 46px 6vw 42px; }
  .studio-intro h1 { font-size: 60px; }
  .studio-intro > p { font-size: 14px; }
  .product-tabs-wrap { padding: 0; }
  .product-tab { min-height: 64px; padding: 0 14px; }
  .designer { gap: 30px; padding: 38px 5vw 80px; }
  .preview-stage { border-radius: 22px; }
  .preview-badge { display: none; }
  .preview-actions { flex-direction: column-reverse; }
  .secondary-action, .download-action { justify-content: center; }
  .swatches, .upload-zone, .remove-artwork, .placement-options { margin-left: 0; }
  .card-field-grid { grid-template-columns: 1fr; margin-left: 0; }
  textarea { width: 100%; margin-left: 0; }
  .order-panel { padding: 25px; }
  footer { align-items: flex-start; flex-direction: column; gap: 18px; padding: 45px 6vw; }
}

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