/* A distinct design studio, using the website's Coastal colors and type. */
.design-hero { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; gap:65px; padding-top:65px; padding-bottom:80px; }
.design-hero h1 { font-size:clamp(44px,4.6vw,65px); line-height:1.06; letter-spacing:-2.6px; margin:25px 0; }
.design-hero .page-lead { max-width:480px; font-size:18px; }
.design-hero .button { margin-top:29px; }
.design-hero-tags { display:flex; flex-wrap:wrap; gap:10px 17px; margin-top:27px; color:var(--muted); font-size:11px; }
.design-hero-tags span::before { content:'·'; color:var(--cta); margin-right:7px; }
.design-studio { min-width:0; padding:28px; color:#edf4ee; background:radial-gradient(ellipse at 100% 0,#2e6463,transparent 65%),#102f37; border:1px solid #33575c; border-radius:20px 65px 20px 20px; box-shadow:0 30px 60px #143e461c; }
.studio-topline { display:flex; justify-content:space-between; align-items:center; color:#f2c679; font-size:10px; letter-spacing:1.5px; }
.studio-topline > span:last-child { font-size:32px; margin-right:5px; }
.studio-tabs { display:flex; gap:8px; margin:24px 0; }
.studio-tabs button { background:transparent; color:#dceae5; border:1px solid #73938e; padding:10px 18px; border-radius:24px; font:inherit; font-size:13px; cursor:pointer; }
.studio-tabs button span { margin-left:12px; }
.studio-tabs button[aria-selected=true] { background:#f4d39a; border-color:#f4d39a; color:#183c42; }
.studio-tabs button:focus-visible,.studio-panel:focus-visible { outline:3px solid #edaa92; outline-offset:4px; }
.studio-panel { min-width:0; }
.studio-panel:not([hidden]) { animation:studio-arrive .35s ease-out both; }
.concept-browser { border-radius:10px; overflow:hidden; background:#f8f4e9; color:#263d39; box-shadow:0 15px 25px #00191d40; }
.concept-chrome { height:32px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; background:#dce5dc; color:#536d65; font-size:8px; letter-spacing:1px; }
.concept-chrome > span:first-child { letter-spacing:3px; font-size:7px; }
.concept-brand { padding:20px 22px; display:flex; justify-content:space-between; align-items:center; font-size:9px; }
.concept-brand strong { font-size:13px; letter-spacing:1px; }
.concept-brand strong span { color:#a9563e; }
.concept-editorial { display:grid; grid-template-columns:1.1fr 1fr; min-height:264px; }
.concept-editorial > div:first-child { padding:25px 0 28px 22px; z-index:1; }
.concept-editorial small { font-size:7px; letter-spacing:.7px; display:block; margin-bottom:17px; }
.concept-editorial strong { display:block; font-size:clamp(25px,2.5vw,35px); line-height:1.08; letter-spacing:-1.1px; font-weight:500; }
.concept-editorial em { color:#48766c; background:none; -webkit-text-fill-color:currentColor; }
.concept-cta { display:inline-block; margin-top:22px; padding:10px 13px; border-radius:4px; background:#b15439; color:white; font-size:8px; }
.concept-sculpture { position:relative; overflow:hidden; background:linear-gradient(150deg,#e9d8b7,#d29a75); border-radius:100px 0 0 0; }
.sculpture-arch { position:absolute; width:62%; height:77%; bottom:0; left:21%; border-radius:100px 100px 0 0; background:linear-gradient(120deg,#d4a77c,#f2e3c7 50%,#ceac86); box-shadow:12px 6px 23px #593c3929,inset 6px 0 10px #fff6; }
.sculpture-arch::after { content:''; position:absolute; inset:25px 22% 0; border-radius:100px 100px 0 0; background:linear-gradient(135deg,#435f51,#284841); box-shadow:inset 9px 0 12px #0003; }
.sculpture-ball { position:absolute; width:70px; height:70px; right:2%; bottom:38px; border-radius:50%; background:radial-gradient(circle at 28% 25%,#f5cca0,#af5c3d 65%,#713d33); box-shadow:12px 16px 20px #5128193a; z-index:2; }
.sculpture-plinth { position:absolute; width:47%; height:45px; right:0; bottom:0; background:linear-gradient(90deg,#b15b3d,#cb7958); z-index:1; }
.concept-bottom { display:flex; justify-content:space-between; gap:10px; padding:19px 22px; font-size:7px; letter-spacing:.5px; }
.page-main .studio-panel-caption { font-size:12px; color:#e0eae5; text-align:center; margin-top:23px; }
.page-main .studio-footnote { font-size:10px; color:#b9d0c6; text-align:center; margin-top:14px; }
.workspace-heading { padding:21px 20px; display:flex; align-items:center; gap:9px; font-size:12px; border-bottom:1px solid #e0e5dd; }
.workspace-symbol { background:#215751; color:white; padding:5px 7px; border-radius:5px; font-size:11px; }
.workspace-avatar { margin-left:auto; border-radius:50%; width:26px; height:26px; display:grid; place-items:center; font-size:9px; background:#e6cfaa; }
.workspace-content { padding:24px 20px; }
.workspace-content > small { display:block; font-size:7px; letter-spacing:1px; color:#50716a; }
.workspace-greeting { display:block; font-size:24px; letter-spacing:-.7px; margin:12px 0 21px; }
.workspace-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.workspace-metrics > div { padding:12px; background:#e5ede3; border-radius:6px; }
.workspace-metrics > div:nth-child(2) { background:#efdec0; }
.workspace-metrics span { font-size:8px; display:block; }
.workspace-metrics b { font-size:24px; display:block; margin-top:6px; font-weight:500; }
.workspace-tasks { padding-top:22px; }
.workspace-tasks > strong { display:flex; justify-content:space-between; font-size:10px; }
.workspace-tasks > strong span { font-size:7px; font-weight:400; color:#61786e; }
.workspace-tasks > div { display:flex; align-items:center; gap:9px; border-top:1px solid #dbe3d8; margin-top:12px; padding-top:12px; }
.workspace-tasks i { width:20px; height:20px; display:grid; place-items:center; background:#e5ede3; border-radius:50%; font-size:9px; font-style:normal; }
.workspace-tasks div span { font-size:10px; }
.workspace-tasks small { display:block; color:#5f766c; font-size:8px; margin-top:4px; }
.workspace-tasks b { margin-left:auto; background:#d6e8d8; color:#2a5748; font-size:7px; font-weight:500; padding:5px; border-radius:4px; white-space:nowrap; }
.workspace-tasks b.task-progress { background:#efdec0; color:#775331; }
.design-intro-band { background:#dfeae3; border-top:1px solid #c7d9ce; border-bottom:1px solid #c7d9ce; }
.design-intro-band > div { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-top:23px; padding-bottom:23px; color:#2e5855; font-size:12px; letter-spacing:2px; }
.design-intro-band i { font-size:25px; font-style:normal; color:#a44c37; }
.design-offering-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:45px; }
.design-offering-grid article { border:1px solid #d2ded6; background:#fffefa; padding:32px; border-radius:12px; }
.design-offering-grid article:nth-child(2) { background:#e6eee7; }
.design-service-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #b9cfc3; border-radius:50%; margin-bottom:35px; font-size:24px; color:#2e695b; }
.design-offering-grid .service-number { display:block; margin-bottom:20px; }
.design-offering-grid h3 { font-size:26px; margin-bottom:18px; }
.design-offering-grid p { color:var(--muted); }
.design-offering-grid ul { list-style:none; padding:0; margin:24px 0 0; }
.design-offering-grid li { padding:10px 0; border-top:1px solid #d4dfd6; font-size:13px; }
.design-detail-section { background:#123940; color:#eef4ec; padding:85px 0; }
.design-detail-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:100px; }
.design-detail-title h2 { margin:23px 0; font-size:54px; }
.design-detail-title em { color:#f0c989; -webkit-text-fill-color:currentColor; background:none; }
.design-detail-title p:not(.eyebrow) { color:#c2d6cd; max-width:350px; }
.design-detail-title .eyebrow { color:#f0c989; }
.design-detail-title .text-link { color:#f0c989; margin-top:30px; }
.design-details article { display:flex; gap:23px; padding:25px 0; border-top:1px solid #547169; }
.design-details article:first-child { padding-top:0; border-top:0; }
.design-details article > span { color:#e5b978; font-size:12px; padding-top:5px; }
.design-details h3 { margin-bottom:10px; font-size:23px; }
.design-details p { color:#c2d6cd; }
.design-process { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:50px; }
.design-process article { border-top:2px solid #aac5b6; padding-top:24px; }
.design-process article > span { font-size:11px; letter-spacing:1px; color:#7d442f; }
.design-process h3 { margin:21px 0 16px; font-size:22px; }
.design-process p { color:var(--muted); }
.design-proof { display:grid; grid-template-columns:.8fr 1.6fr .7fr; align-items:center; gap:35px; padding:30px; background:#e8eee7; margin-top:55px; border-radius:10px; }
.design-proof > span { font-size:10px; font-weight:600; letter-spacing:1.2px; }
.design-proof p { font-size:14px; color:var(--muted); }
.design-proof a { font-size:13px; text-decoration:underline; text-underline-offset:5px; }
.design-final { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:55px; margin-bottom:45px; border-radius:14px 70px 14px 14px; color:#fff8e8; background:radial-gradient(ellipse at top right,#397269,transparent 60%),#123940; }
.design-final .eyebrow { color:#efc889; }
.design-final h2 { margin:22px 0; }
.design-final em { color:#efc889; -webkit-text-fill-color:currentColor; background:none; }
.design-final p:not(.eyebrow) { color:#d9e6dc; max-width:470px; }
.design-discovery { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:50px; background:radial-gradient(ellipse at top right,#356965,transparent 60%),#123940; color:#f4f6ef; border-radius:14px; padding:42px; overflow:hidden; }
.design-discovery .service-number { color:#e8c792; }
.design-discovery h3 { font-size:40px; line-height:1.1; letter-spacing:-1px; margin:22px 0; }
.design-discovery h3 em { color:#efc889; -webkit-text-fill-color:currentColor; background:none; }
.design-discovery p,.page-main .design-discovery p { color:#d5e3d9; font-size:16px; line-height:1.8; max-width:430px; }
.design-discovery-link { display:inline-block; margin-top:27px; color:#efc889; font-size:13px; }
.design-discovery-link span { margin-left:12px; }
.design-discovery-art { align-self:center; min-width:0; padding:10px 0; }
.mini-browser { background:#f6efe1; border-radius:9px; box-shadow:0 18px 32px #00141735; transform:rotate(-3deg); overflow:hidden; transition:transform .3s; }
.design-discovery:hover .mini-browser { transform:rotate(0); }
.mini-chrome { padding:12px 16px; display:flex; align-items:center; gap:4px; background:#dfdfcb; }
.mini-chrome i { width:5px; height:5px; border-radius:50%; background:#849385; }
.mini-chrome span { color:#516253; font-size:7px; letter-spacing:1.5px; margin-left:auto; }
.mini-canvas { display:flex; justify-content:space-between; align-items:center; padding:30px; color:#24483e; }
.mini-canvas > span { font-size:33px; letter-spacing:-1.3px; line-height:1.1; }
.mini-canvas em { color:#537c60; -webkit-text-fill-color:currentColor; background:none; }
.design-orbit { width:130px; height:130px; border:22px solid #d5a176; border-radius:50%; transform:rotate(-35deg); box-shadow:inset 5px 4px 15px #9a633344,4px 6px 12px #9b654533; }
.design-orbit i { display:block; width:40px; height:40px; margin:21px auto; border-radius:50%; background:radial-gradient(circle at 25% 25%,#d5b996,#aa5a3a); }
.mini-lines { display:flex; gap:12px; padding:0 30px 25px; }
.mini-lines i { height:6px; border-radius:3px; width:33%; background:#d9d9c7; }
.design-art-label { display:block; margin-top:26px; font-size:10px; text-align:center; color:#cee0d3; }
@keyframes studio-arrive { from { opacity:.3; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) {
  .design-hero { gap:35px; }
  .design-hero h1 { font-size:49px; }
  .design-studio { padding:22px; }
  .concept-brand > span { display:none; }
  .design-offering-grid article { padding:25px; }
  .design-detail-grid { gap:50px; }
  .design-final { padding:40px; }
}
@media(max-width:850px) {
  .design-hero { grid-template-columns:1fr; gap:40px; }
  .design-hero-copy { max-width:640px; }
  .design-hero h1 { font-size:57px; }
  .design-hero h1 br:nth-child(2) { display:none; }
  .design-hero .page-lead { max-width:600px; }
  .design-studio { width:100%; max-width:640px; margin:auto; padding:28px; }
  .concept-editorial strong { font-size:38px; }
  .design-offering-grid,.design-detail-grid { grid-template-columns:1fr; }
  .design-service-icon { margin-bottom:25px; }
  .design-process { grid-template-columns:1fr 1fr; }
  .design-proof { grid-template-columns:1fr; gap:15px; }
  .design-final { flex-direction:column; align-items:flex-start; }
  .design-discovery { gap:28px; padding:30px; }
  .mini-canvas { padding:23px; }
  .mini-canvas > span { font-size:26px; }
  .design-orbit { width:86px; height:86px; border-width:14px; }
  .design-orbit i { width:26px; height:26px; margin:15px auto; }
}
@media(max-width:550px) {
  .design-hero { padding-top:40px; padding-bottom:50px; }
  .design-hero h1 { font-size:45px; letter-spacing:-1.8px; }
  .design-hero h1 br:nth-child(2) { display:block; }
  .design-hero-tags { font-size:10px; gap:10px; }
  .design-studio { padding:18px; border-radius:15px 45px 15px 15px; }
  .studio-topline { font-size:8px; }
  .concept-brand { padding:18px 14px; }
  .concept-editorial { min-height:235px; }
  .concept-editorial > div:first-child { padding:20px 0 20px 14px; }
  .concept-editorial strong { font-size:26px; }
  .concept-editorial small { font-size:6px; line-height:1.5; max-width:125px; }
  .concept-bottom { padding:18px 14px; font-size:6px; }
  .concept-cta { padding:9px 7px; font-size:7px; }
  .sculpture-ball { width:50px; height:50px; }
  .sculpture-arch::after { inset:18px 22% 0; }
  .workspace-heading,.workspace-content { padding:18px 13px; }
  .workspace-greeting { font-size:21px; }
  .workspace-metrics { gap:6px; }
  .workspace-metrics > div { padding:10px 8px; }
  .workspace-metrics span { font-size:7px; }
  .workspace-tasks div span { font-size:9px; }
  .workspace-tasks b { font-size:6px; }
  .workspace-tasks > div { gap:5px; }
  .design-intro-band > div { font-size:8px; letter-spacing:.7px; gap:8px; }
  .design-intro-band i { font-size:15px; }
  .design-detail-title h2 { font-size:43px; }
  .design-process { grid-template-columns:1fr; }
  .design-final { padding:30px 25px; border-radius:12px 40px 12px 12px; }
  .design-final .button { font-size:12px; }
  .design-discovery { grid-template-columns:1fr; }
  .design-discovery h3 { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-panel:not([hidden]) { animation:none; }
  .mini-browser { transition:none; }
}