.design-studio-page { --ds-lilac:#f3effd; --ds-sage:#eef2ec; }
.design-studio-page [id] { scroll-margin-top:110px; }
.ds-hero { padding:26px 0 0; overflow:hidden; }
.ds-hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:36px; padding:42px 0 52px; }
.ds-hero-copy { position:relative; z-index:2; }
.ds-hero h1 { font-size:clamp(48px,4.8vw,68px); line-height:1.07; letter-spacing:-3.3px; margin:22px 0 24px; }
.ds-hero h1 span { color:var(--purple); }
.ds-lead { color:var(--muted); font-size:18px; line-height:1.7; max-width:480px; margin:0 0 28px; }
.ds-lead strong { color:var(--ink); font-weight:700; }
.ds-hero .actions { gap:12px; flex-wrap:wrap; }
.ds-hero .button { padding:15px 21px; }
.ds-hero-art { position:relative; height:548px; margin:0; isolation:isolate; }
.ds-art-orbit { position:absolute; inset:5% -3% 9% 0; border-radius:50%; background:radial-gradient(ellipse,#eae2fc 0%,#f3effc 54%,#faf9fd 70%); transform:rotate(-8deg); z-index:-1; }
.ds-hero-art img { position:absolute; display:block; height:auto; box-shadow:0 18px 40px -13px #29203644; border:5px solid white; border-radius:3px; }
.ds-hero-post { width:45%; left:26%; top:22%; z-index:3; transform:rotate(-5deg); }
.ds-hero-story { width:28%; left:1%; top:8%; z-index:1; transform:rotate(-10deg); }
.ds-hero-flyer { width:37%; right:0; top:5%; z-index:2; transform:rotate(8deg); }
.ds-hero-art figcaption { position:absolute; bottom:0; left:0; width:100%; display:flex; justify-content:center; align-items:center; gap:9px; font-size:12px; color:var(--muted); }
.ds-caption-dot { width:7px; height:7px; border-radius:50%; background:var(--purple); }
.ds-page-nav { display:flex; justify-content:space-between; align-items:center; gap:26px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ds-page-nav>span { font-size:11px; font-weight:700; letter-spacing:1.8px; color:var(--muted); }
.ds-page-nav a { display:flex; gap:20px; align-items:center; font-size:14px; font-weight:600; }
.ds-page-nav .icon { width:16px; height:16px; }
.ds-page-nav a:hover { color:var(--purple); }
.ds-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:55px; margin-bottom:44px; }
.ds-section-heading h2 { font-size:clamp(34px,3.8vw,48px); letter-spacing:-1.8px; line-height:1.16; margin:16px 0 0; }
.ds-section-heading>p { max-width:365px; color:var(--muted); line-height:1.75; margin:0 0 3px; }
.ds-studios { padding-top:90px; padding-bottom:78px; }
.ds-studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ds-studio-card { border-radius:22px; padding:36px 38px 0; overflow:hidden; }
.ds-content-card { background:var(--ds-sage); }
.ds-design-card { background:var(--ds-lilac); }
.ds-card-label { display:flex; gap:12px; align-items:center; font-size:11px; letter-spacing:1.4px; font-weight:700; }
.ds-card-label .icon { width:22px; height:22px; }
.ds-card-index { margin-left:auto; font-size:13px; opacity:.5; }
.ds-studio-card h3 { font-size:32px; line-height:1.2; letter-spacing:-1.1px; margin:29px 0 16px; }
.ds-studio-card>p { max-width:410px; color:var(--muted); line-height:1.75; margin:0; }
.ds-studio-card ul { list-style:none; padding:0; display:grid; gap:14px; margin:28px 0 34px; }
.ds-studio-card li { display:flex; gap:11px; font-size:14px; line-height:1.5; }
.ds-studio-card li .icon { flex:none; width:18px; height:18px; color:#456146; }
.ds-design-card li .icon { color:var(--purple); }
.ds-card-foot { border-top:1px solid #182e2320; padding:22px 0; font-size:12px; font-weight:500; color:var(--muted); }
.ds-shared-note { display:flex; justify-content:center; align-items:center; gap:10px; color:var(--muted); font-size:13px; line-height:1.6; margin:24px 0 0; }
.ds-shared-note .icon { width:18px; height:18px; flex:none; }
.ds-gallery { background:#faf9fc; border-block:1px solid #eeedf3; padding-top:80px; padding-bottom:74px; }
.ds-gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.ds-filters { display:flex; flex-wrap:wrap; gap:7px; }
.ds-filters[hidden] { display:none; }
.ds-filters button { border:1px solid transparent; border-radius:100px; background:transparent; color:var(--muted); font:inherit; font-size:13px; padding:10px 18px; cursor:pointer; }
.ds-filters button[aria-pressed=true] { border-color:var(--ink); background:var(--ink); color:white; }
.ds-filters button:hover:not([aria-pressed=true]) { background:#ebe7f3; color:var(--ink); }
.ds-gallery-count { color:var(--muted); font-size:12px; }
.ds-template-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:start; }
.ds-template-card[hidden] { display:none; }
.ds-template-image { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; background:#edeaf2; border-radius:14px; padding:22px; overflow:hidden; }
.ds-template-image img { display:block; object-fit:contain; width:auto; height:auto; max-width:100%; max-height:100%; box-shadow:0 8px 19px #171a2e1f; transition:transform .2s; }
.ds-template-story { background:#e7ece5; }
.ds-template-print { background:#eeeae1; }
.ds-template-image:hover img { transform:translateY(-5px); }
.ds-expand { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; white-space:nowrap; align-items:center; gap:16px; padding:9px 14px; border-radius:99px; color:var(--ink); background:#ffffffee; box-shadow:0 3px 14px #171a2e14; font-size:11px; font-weight:600; opacity:0; transition:opacity .2s; }
.ds-expand .icon { width:14px; height:14px; }
.ds-template-image:hover .ds-expand,.ds-template-image:focus-visible .ds-expand { opacity:1; }
.ds-template-meta { padding:18px 2px 0; }
.ds-template-meta h3 { font-size:16px; margin:0 0 5px; font-weight:600; letter-spacing:-.25px; }
.ds-template-meta>span { font-size:12px; color:var(--muted); }
.ds-gallery-note { font-size:12px; color:var(--muted); line-height:1.6; margin:28px 0 0; }
.ds-workflow { padding-top:85px; padding-bottom:80px; }
.ds-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.ds-steps li { border-top:1px solid var(--line); padding-top:25px; }
.ds-steps li>span { color:var(--purple); font-size:12px; font-weight:700; }
.ds-steps h3 { font-size:21px; line-height:1.3; margin:24px 0 12px; letter-spacing:-.5px; }
.ds-steps p { color:var(--muted); font-size:14px; line-height:1.75; margin:0; }
.ds-brand-link { display:flex; justify-content:space-between; align-items:center; gap:24px; background:#f6f4fb; border-radius:14px; padding:25px 28px; margin-top:48px; }
.ds-brand-link>div { display:flex; align-items:center; gap:19px; }
.ds-brand-link .icon { flex:none; width:24px; height:24px; color:var(--purple); }
.ds-brand-link p { margin:0; }
.ds-brand-link strong { display:block; font-size:15px; margin-bottom:4px; }
.ds-brand-link p span { color:var(--muted); font-size:13px; line-height:1.6; }
.ds-brand-link .text-link { font-size:13px; white-space:nowrap; }
.ds-lightbox { padding:0; border:0; border-radius:18px; background:#f4f2f7; color:var(--ink); width:min(850px,94vw); max-height:94dvh; }
.ds-lightbox::backdrop { background:#171525bc; }
.ds-lightbox-bar { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; background:white; }
.ds-lightbox-bar h2 { font-size:18px; line-height:1.4; letter-spacing:-.3px; margin:0; }
.ds-lightbox-bar p { font-size:12px; margin:3px 0 0; color:var(--muted); }
.ds-lightbox-bar button { display:grid; place-items:center; flex:none; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:white; cursor:pointer; color:var(--ink); }
.ds-lightbox-bar .icon { width:20px; height:20px; }
.ds-lightbox-body { padding:24px; display:flex; justify-content:center; }
.ds-lightbox-body img { display:block; max-width:100%; width:auto; height:auto; max-height:calc(94dvh - 177px); object-fit:contain; box-shadow:0 5px 22px #171a2e24; }
.ds-lightbox-note { text-align:center; margin:0 0 20px; color:var(--muted); font-size:12px; }
.design-studio-page :is(button,a):focus-visible { outline:3px solid var(--purple); outline-offset:4px; }
@media (min-width:1400px) { .ds-hero-art { height:590px; } }
@media (max-width:1050px) { .ds-hero-grid { gap:15px; } .ds-hero-art { height:480px; } .ds-hero h1 { font-size:54px; } .ds-hero-art img { border-width:3px; } .ds-hero-post { top:29%; width:51%; left:24%; } .ds-hero-story { width:31%; top:15%; } .ds-hero-flyer { width:40%; top:10%; } .ds-template-image { padding:14px; } .ds-template-grid { gap:16px; } .ds-page-nav { gap:16px; } .ds-studio-card { padding:30px 28px 0; } .ds-section-heading { gap:32px; } }
@media (max-width:800px) { .ds-hero-grid { grid-template-columns:1fr; gap:10px; padding-top:30px; } .ds-hero-copy { max-width:580px; } .ds-hero h1 { font-size:60px; } .ds-lead { max-width:520px; } .ds-hero-art { width:min(590px,100%); height:auto; aspect-ratio:1.12; justify-self:center; } .ds-hero-story { top:8%; width:28%; } .ds-hero-flyer { top:5%; width:37%; } .ds-hero-post { top:20%; left:26%; width:45%; } .ds-page-nav { flex-wrap:wrap; justify-content:flex-start; column-gap:36px; row-gap:19px; } .ds-page-nav>span { width:100%; } .ds-section-heading { display:block; } .ds-section-heading>p { max-width:530px; margin-top:22px; } .ds-studio-grid { gap:18px; } .ds-studio-card { padding:26px 24px 0; } .ds-studio-card h3 { font-size:27px; } .ds-studio-card>p { font-size:14px; } .ds-studio-card li { font-size:13px; } .ds-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 22px; } .ds-template-image { padding:24px; } .ds-steps { gap:24px; } .ds-steps h3 { font-size:19px; } .ds-brand-link { align-items:flex-start; } .ds-brand-link .text-link { white-space:normal; } }
@media (max-width:560px) { .ds-hero { padding-top:18px; } .ds-hero h1 { font-size:48px; letter-spacing:-2.4px; } .ds-lead { font-size:16px; } .ds-hero .actions { align-items:stretch; } .ds-hero .button { padding:14px 16px; font-size:13px; } .ds-hero-grid { padding-bottom:30px; gap:22px; } .ds-hero-art { aspect-ratio:1.05; } .ds-hero-art figcaption { font-size:10px; } .ds-hero-post { top:22%; } .ds-page-nav { gap:18px 23px; padding-block:23px; } .ds-page-nav a { font-size:12px; gap:8px; } .ds-page-nav a .icon { width:13px; height:13px; } .ds-page-nav>span { font-size:10px; } .ds-studios,.ds-gallery,.ds-workflow { padding-top:56px; padding-bottom:54px; } .ds-section-heading { margin-bottom:30px; } .ds-section-heading h2 { font-size:33px; letter-spacing:-1.3px; } .ds-section-heading>p { font-size:14px; margin-top:18px; } .ds-studio-grid { grid-template-columns:1fr; } .ds-studio-card { padding:28px 27px 0; } .ds-studio-card h3 { font-size:31px; } .ds-studio-card ul { gap:13px; } .ds-studio-card li { font-size:14px; } .ds-shared-note { align-items:flex-start; font-size:12px; text-align:left; } .ds-gallery-toolbar { flex-direction:column; align-items:flex-start; gap:14px; } .ds-filters { gap:2px; } .ds-filters button { font-size:12px; padding:9px 12px; } .ds-template-grid { gap:25px 14px; } .ds-template-image { padding:12px; border-radius:10px; } .ds-template-meta { padding-top:13px; } .ds-template-meta h3 { font-size:14px; } .ds-template-meta>span { font-size:11px; } .ds-expand { display:none; } .ds-gallery-note { font-size:11px; } .ds-steps { grid-template-columns:1fr; gap:25px; } .ds-steps li { padding-top:20px; } .ds-steps h3 { font-size:21px; margin-top:15px; } .ds-brand-link { flex-direction:column; padding:24px; margin-top:32px; } .ds-brand-link>div { align-items:flex-start; } .ds-brand-link .text-link { margin-left:43px; } .ds-lightbox-bar { padding:15px 17px; } .ds-lightbox-body { padding:16px; } }
@media (prefers-reduced-motion:reduce) { .ds-template-image img,.ds-expand { transition:none; } }