:root { --ink: #10120f; --paper: #f1f0e9; --white: #fffefa; --lime: #c9f36a; --lime-dark: #a8d94b; --muted: #777970; --line: rgba(16,18,15,.17); --dark-line: rgba(255,255,255,.17); --display: Arial,Helvetica,sans-serif; --body: Arial,Helvetica,sans-serif; --wrap: 1240px; --ease: cubic-bezier(.22,.7,.25,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0px; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body, button, input, textarea { font-family: var(--body); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-size: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }
.wrap { width: min(calc(100% - 64px),var(--wrap)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 12px 18px; background: var(--lime); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0px); }
.site-header { position: absolute; z-index: 20; inset: 0px 0px auto; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; }
.site-branding { display: flex; align-items: center; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--white); }
.brand-mark { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--white); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font-size: 18px; line-height: 1; font-weight: 700; letter-spacing: -0.075em; }
.brand-name span { font-weight: 400; color: rgb(197, 198, 191); letter-spacing: -0.055em; }
.custom-logo { max-width: 190px; max-height: 56px; width: auto; }
.primary-navigation { display: flex; align-items: center; gap: 38px; }
.nav-list { display: flex; list-style: none; padding: 0px; margin: 0px; gap: 32px; }
.nav-list a { font-size: 12px; color: rgb(211, 212, 207); transition: color 0.2s; }
.nav-list a:hover, .nav-list a:focus-visible { color: var(--lime); }
.nav-cta { display: inline-flex; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 2px; font-size: 12px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.nav-cta span { font-size: 16px; }
.nav-cta:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.menu-toggle { display: none; }
.menu-toggle-icon { display: inline-flex; width: 22px; flex-direction: column; gap: 5px; }
.menu-toggle-icon i { display: block; height: 1px; width: 100%; background: currentcolor; transition: transform 0.2s; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
.hero-section { position: relative; overflow: hidden; min-height: min(900px, 100svh); padding-top: 88px; background: var(--ink); color: var(--white); display: flex; flex-direction: column; }
.hero-grain { position: absolute; inset: 0px; pointer-events: none; opacity: 0.17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(340px, 1fr); align-items: center; gap: 40px; flex: 1 1 0%; padding-top: 70px; padding-bottom: 70px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0px 0px 26px; font-size: 10px; line-height: 1.3; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(200, 201, 194); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: rgba(201, 243, 106, 0.7) 0px 0px 14px; }
.hero-copy h1 { max-width: 760px; margin: 0px; font-size: clamp(52px, 7.7vw, 106px); line-height: 0.94; letter-spacing: -0.078em; font-weight: 500; }
.hero-copy h1::selection { background: var(--lime); color: var(--ink); }
.hero-description { max-width: 510px; margin: 30px 0px 0px; color: rgb(174, 176, 168); font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 30px; min-height: 52px; padding: 0px 20px; font-size: 12px; font-weight: 700; transition: transform 0.2s, background 0.2s, color 0.2s; }
.button:hover { transform: translateY(-3px); }
.button span { font-size: 18px; font-weight: 400; }
.button-lime { background: var(--lime); color: var(--ink); }
.button-lime:hover { background: rgb(216, 255, 139); }
.text-link { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; }
.text-link span { font-size: 17px; transition: transform 0.2s; }
.text-link:hover span { transform: translate(3px, -3px); }
.hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 550px; width: 100%; justify-self: end; isolation: isolate; }
.hero-art::before { position: absolute; content: ""; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(201, 243, 106, 0.16), rgba(201, 243, 106, 0) 69%); filter: blur(8px); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 52%; height: 52%; border-color: rgba(201, 243, 106, 0.55); box-shadow: rgba(201, 243, 106, 0.07) 0px 0px 45px; }
.orbit-two { width: 76%; height: 76%; border-style: dashed; animation: 56s linear 0s infinite normal none running spin; }
.orbit-three { width: 98%; height: 98%; border-color: rgba(255, 255, 255, 0.1); }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: rgba(201, 243, 106, 0.2) 0px 0px 80px; }
.core-symbol { font-size: clamp(42px, 7vw, 76px); font-weight: 700; line-height: 0.9; letter-spacing: -0.11em; }
.core-symbol span { color: rgb(113, 139, 60); }
.core-caption { margin-top: 8px; font-size: 7px; line-height: 1.2; letter-spacing: 0.22em; text-align: center; font-weight: 700; }
.orbit-tag { position: absolute; z-index: 2; padding: 8px 11px; background: rgb(26, 29, 24); border: 1px solid rgba(255, 255, 255, 0.23); font-size: 8px; font-weight: 700; letter-spacing: 0.13em; }
.tag-top { top: 9%; left: 49%; transform: translateX(-50%); }
.tag-right { right: -1%; top: 49%; }
.tag-bottom { bottom: 9%; left: 49%; transform: translateX(-50%); }
.tag-left { left: -2%; top: 49%; }
.art-cross { position: absolute; color: var(--lime); font-size: 18px; font-weight: 200; }
.cross-a { left: 17%; top: 27%; }
.cross-b { right: 16%; bottom: 22%; }
.art-caption { position: absolute; right: 0px; bottom: 10%; font-size: 8px; line-height: 1.5; letter-spacing: 0.12em; text-align: right; color: rgb(133, 135, 127); }
.hero-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 20px; color: rgb(137, 139, 131); border-top: 1px solid rgba(255, 255, 255, 0.17); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-bottom a { font-size: 21px; color: var(--lime); transition: transform 0.2s; }
.hero-bottom a:hover { transform: translateY(4px); }
@keyframes spin { 
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.ticker { overflow: hidden; background: var(--lime); color: var(--ink); padding: 14px 0px; }
.ticker-track { width: max-content; animation: 32s linear 0s infinite normal none running ticker; }
.ticker-track span { font-size: 11px; letter-spacing: 0.19em; font-weight: 700; white-space: nowrap; }
.ticker-track b { margin: 0px 25px; font-size: 14px; font-weight: 400; }
@keyframes ticker { 
  100% { transform: translateX(-50%); }
}
.section { padding: 120px 0px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 55px; }
.eyebrow-dark { color: rgb(102, 104, 95); }
.section-heading h2, .contact-copy h2 { max-width: 750px; margin: 0px; font-size: clamp(42px, 5.5vw, 72px); line-height: 0.98; font-weight: 500; letter-spacing: -0.07em; }
.section-intro { max-width: 290px; margin: 0px 0px 7px; color: rgb(112, 113, 104); font-size: 14px; line-height: 1.7; }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 62px minmax(240px, 1fr) minmax(175px, 0.55fr) 44px; align-items: center; gap: 25px; padding: 27px 0px; border-bottom: 1px solid var(--line); transition: padding .25s var(--ease); }
.service-row:hover { padding-inline: 10px; }
.service-number { align-self: start; padding-top: 7px; color: rgb(119, 121, 112); font-size: 11px; }
.service-main h3 { margin: 0px; font-size: clamp(21px, 2.5vw, 30px); line-height: 1.1; letter-spacing: -0.05em; font-weight: 500; }
.service-main p { margin: 8px 0px 0px; color: rgb(121, 122, 114); font-size: 12px; }
.service-tags { justify-self: end; color: rgb(121, 122, 114); font-size: 10px; letter-spacing: 0.04em; }
.round-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; font-size: 17px; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.service-row:hover .round-arrow { background: var(--lime); border-color: var(--lime); transform: rotate(45deg); }
.studio-section { overflow: hidden; background: var(--ink); color: var(--white); padding: 112px 0px; }
.studio-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 11%; }
.studio-side { position: relative; min-height: 400px; }
.studio-side .eyebrow { margin-bottom: 65px; }
.studio-index { font-size: clamp(44px, 5.4vw, 72px); line-height: 0.95; letter-spacing: -0.075em; font-weight: 500; }
.studio-index span { color: var(--lime); }
.studio-stamp { position: absolute; left: 0px; bottom: 4px; display: flex; gap: 15px; align-items: center; color: rgb(116, 118, 110); font-size: 9px; letter-spacing: 0.17em; }
.studio-stamp::before { content: ""; width: 34px; height: 1px; background: var(--lime); }
.studio-copy { padding-top: 75px; }
.studio-copy h2 { margin: 0px; max-width: 670px; font-size: clamp(34px, 4.15vw, 56px); line-height: 1.02; letter-spacing: -0.065em; font-weight: 500; }
.studio-copy > p { max-width: 550px; margin: 24px 0px; color: rgb(155, 157, 149); font-size: 14px; line-height: 1.8; }
.text-link-light { color: var(--lime); margin-top: 3px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 66px; padding-top: 20px; border-top: 1px solid var(--dark-line); }
.principles div { display: flex; flex-direction: column; gap: 12px; color: rgb(212, 213, 208); font-size: 11px; }
.principles span { color: var(--lime); font-size: 10px; }
.work-section { padding-bottom: 130px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 22px; }
.work-card-wide { grid-column: 1 / -1; }
.work-visual { position: relative; overflow: hidden; min-height: 320px; background: rgb(216, 215, 207); display: flex; align-items: center; justify-content: center; }
.work-card-wide .work-visual { min-height: 450px; }
.visual-commerce { background: rgb(212, 213, 206); }
.mock-window { width: 76%; height: 72%; background: rgb(247, 247, 242); box-shadow: rgba(23, 25, 20, 0.17) 0px 25px 60px; transform: translateY(13px); }
.mock-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0px 12px; background: rgb(233, 234, 227); }
.mock-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgb(157, 159, 150); }
.mock-bar span { margin: auto; font-size: 6px; color: rgb(115, 117, 108); }
.mock-commerce { height: calc(100% - 30px); position: relative; display: flex; align-items: center; justify-content: space-between; padding: 4% 8%; overflow: hidden; background: linear-gradient(110deg, rgb(245, 243, 232) 0px, rgb(245, 243, 232) 50%, rgb(195, 210, 141) 50%, rgb(195, 210, 141) 100%); }
.mock-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.mock-copy span { font-size: 8px; letter-spacing: 0.15em; }
.mock-copy b { font-size: clamp(27px, 5vw, 60px); line-height: 0.9; font-weight: 500; letter-spacing: -0.08em; }
.mock-copy i { margin-top: 9px; font-size: 8px; font-style: normal; text-decoration: underline; text-underline-offset: 4px; }
.mock-product { position: relative; display: grid; place-items: center; width: 39%; height: 79%; background: rgb(23, 26, 23); color: rgb(244, 242, 235); transform: rotate(4deg); box-shadow: rgba(0, 0, 0, 0.12) 0px 15px 30px; }
.mock-product::before { position: absolute; content: ""; inset: 8%; border: 1px solid rgba(255, 255, 255, 0.2); }
.mock-product span { position: absolute; left: 13%; top: 12%; font-size: 8px; color: var(--lime); }
.mock-product b { font-size: clamp(12px, 2vw, 24px); line-height: 0.9; text-align: center; letter-spacing: -0.04em; }
.visual-label { position: absolute; left: 19px; bottom: 17px; z-index: 3; color: rgb(85, 87, 79); font-size: 8px; letter-spacing: 0.14em; }
.visual-brand { background: rgb(200, 208, 193); }
.brand-poster { position: relative; display: flex; flex-direction: column; justify-content: center; width: 65%; height: 70%; padding: 27px; background: rgb(232, 232, 223); box-shadow: rgba(20, 23, 20, 0.14) 0px 18px 45px; }
.brand-poster::after { content: ""; position: absolute; right: -23px; top: -18px; width: 47%; height: 115%; background: var(--lime); z-index: 0; clip-path: polygon(35% 0px, 100% 0px, 100% 100%, 0px 100%); }
.brand-poster > * { position: relative; z-index: 1; }
.brand-poster span, .brand-poster i { font-size: 7px; letter-spacing: 0.15em; font-style: normal; }
.brand-poster b { margin: 17px 0px; font-size: clamp(30px, 4vw, 54px); line-height: 0.91; letter-spacing: -0.08em; font-weight: 500; }
.visual-digital { background: rgb(217, 211, 197); }
.digital-card { position: relative; overflow: hidden; width: 69%; height: 70%; padding: 24px; background: rgb(199, 242, 103); color: rgb(20, 22, 18); display: flex; flex-direction: column; justify-content: space-between; }
.digital-card > span, .digital-card > i { z-index: 1; font-size: 7px; letter-spacing: 0.14em; font-style: normal; }
.digital-card > b { z-index: 1; font-size: clamp(26px, 4vw, 45px); line-height: 0.95; letter-spacing: -0.07em; font-weight: 500; }
.digital-orb { position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -16px; top: -25px; background: radial-gradient(circle at 38% 32%, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 4%, rgba(255, 255, 255, 0.6) 5%, rgba(255, 255, 255, 0.6) 6%, transparent 7%), linear-gradient(135deg, rgb(165, 207, 72), rgb(228, 255, 158)); box-shadow: rgba(31, 47, 4, 0.16) -16px -14px 27px inset; }
.work-caption { display: flex; justify-content: space-between; align-items: start; padding: 16px 1px 0px; }
.work-caption h3 { margin: 0px; font-size: 19px; letter-spacing: -0.04em; font-weight: 500; }
.work-caption p { margin: 5px 0px 0px; color: rgb(116, 118, 110); font-size: 12px; }
.work-caption > span { font-size: 17px; }
.work-note { margin: 30px 0px 0px; color: rgb(129, 130, 120); font-size: 10px; }
.contact-section { padding: 112px 0px; background: var(--lime); color: var(--ink); }
.contact-layout { display: grid; grid-template-columns: 1fr 0.78fr; gap: 11%; align-items: start; }
.contact-copy .eyebrow { color: rgb(78, 94, 45); }
.contact-copy .status-dot { background: var(--ink); box-shadow: none; }
.contact-copy h2 { max-width: 620px; font-size: clamp(44px, 5.6vw, 76px); }
.contact-copy > p:not(.eyebrow) { max-width: 430px; margin: 23px 0px; color: rgb(65, 75, 48); font-size: 14px; }
.contact-direct { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(16, 18, 15, 0.25); }
.contact-direct span { font-size: 11px; color: rgb(77, 88, 56); }
.contact-direct a { font-size: 20px; font-weight: 600; letter-spacing: -0.04em; }
.contact-direct a span { margin-left: 7px; font-size: 17px; color: var(--ink); }
.contact-form-wrap { padding-top: 20px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(16, 18, 15, 0.4); border-image: none; border-radius: 0px; background: transparent; color: var(--ink); outline: none; resize: vertical; font-size: 14px; font-weight: 400; letter-spacing: 0px; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom: 2px solid var(--ink); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgb(103, 113, 78); }
.contact-form .button { align-self: flex-start; margin-top: 3px; border: 0px; }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover { background: rgb(48, 51, 45); }
.form-privacy { margin: -9px 0px 0px; color: rgb(89, 100, 67); font-size: 9px; }
.form-notice { padding: 12px 15px; font-size: 12px; line-height: 1.5; }
.form-notice.success { background: rgba(255, 255, 255, 0.48); }
.form-notice.error { background: rgb(245, 216, 204); color: rgb(92, 37, 24); }
.honeypot { width: 1px; height: 1px; overflow: hidden; position: absolute !important; left: -10000px !important; }
.content-page { min-height: 70vh; padding-top: 155px; padding-bottom: 110px; }
.page-heading { max-width: 900px; margin-bottom: 55px; }
.page-heading h1, .single-heading h1 { margin: 0px; font-size: clamp(48px, 7vw, 88px); line-height: 0.95; font-weight: 500; letter-spacing: -0.075em; }
.entry-content { max-width: 900px; margin: 0px auto; }
.entry-content > :first-child { margin-top: 0px; }
.entry-content p, .prose { font-size: 17px; line-height: 1.85; }
.entry-content h2, .prose h2 { margin-top: 2em; font-size: 34px; line-height: 1.1; letter-spacing: -0.06em; font-weight: 500; }
.entry-content h3, .prose h3 { font-size: 25px; letter-spacing: -0.04em; font-weight: 500; }
.entry-content a, .prose a { color: rgb(85, 115, 34); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { height: auto; }
.page-featured-image, .single-featured-image { margin: 0px 0px 38px; }
.page-featured-image img, .single-featured-image img { width: 100%; max-height: 600px; object-fit: cover; }
.single-shell { max-width: 970px; margin: 0px auto; }
.single-heading { max-width: 850px; margin-bottom: 38px; }
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 45px 25px; }
.post-card { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.post-thumb { display: block; margin-bottom: 20px; overflow: hidden; background: rgb(222, 221, 213); }
.post-thumb img { display: block; width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover; transition: transform .5s var(--ease); }
.post-thumb:hover img { transform: scale(1.03); }
.post-card h2 { margin: 0px; font-size: 27px; line-height: 1.1; letter-spacing: -0.055em; font-weight: 500; }
.post-card h2 a:hover { color: rgb(88, 117, 43); }
.post-card > p:not(.eyebrow) { color: rgb(111, 112, 104); font-size: 13px; }
.text-link-dark { margin-top: 8px; color: rgb(51, 73, 26); }
.archive-description { color: rgb(114, 115, 108); }
.navigation.pagination { margin-top: 45px; }
.nav-links { display: flex; gap: 12px; }
.nav-links a, .nav-links span { padding: 8px 12px; border: 1px solid var(--line); }
.not-found { min-height: 80vh; padding-top: 210px; padding-bottom: 100px; background: var(--ink); color: var(--white); }
.not-found h1 { max-width: 800px; font-size: clamp(48px, 8vw, 100px); line-height: 0.95; letter-spacing: -0.075em; font-weight: 500; }
.not-found > p:not(.eyebrow) { margin: 24px 0px; color: rgb(166, 168, 159); }
.not-found .button { margin-top: 15px; }
.site-footer { padding: 58px 0px 22px; background: var(--ink); color: var(--white); }
.footer-top { display: grid; grid-template-columns: 0.8fr 1fr 0.7fr; gap: 50px; align-items: start; padding-bottom: 52px; }
.footer-brand { align-self: start; }
.footer-manifesto { max-width: 310px; margin: 0px; color: rgb(153, 155, 147); font-size: 14px; line-height: 1.6; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-contact .eyebrow { margin: 0px 0px 3px; color: rgb(128, 130, 121); font-size: 9px; }
.footer-contact > a { font-size: 17px; }
.footer-contact > span:last-child { color: rgb(153, 155, 147); font-size: 11px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-top: 17px; border-top: 1px solid var(--dark-line); color: rgb(130, 132, 124); font-size: 9px; }
.footer-nav { display: flex; list-style: none; gap: 18px; padding: 0px; margin: 0px; }
.footer-nav a:hover, .back-to-top:hover { color: var(--lime); }
.back-to-top { white-space: nowrap; }
.comments-area { margin-top: 60px; padding-top: 25px; border-top: 1px solid var(--line); }
:focus-visible { outline: rgb(109, 148, 43) solid 2px; outline-offset: 4px; }
.site-header :focus-visible, .hero-section :focus-visible, .studio-section :focus-visible, .not-found :focus-visible, .site-footer :focus-visible { outline-color: var(--lime); }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 1000px) {
  .wrap { width: min(calc(100% - 48px),var(--wrap)); }
  .hero-layout { grid-template-columns: minmax(0px, 0.95fr) minmax(300px, 1fr); gap: 20px; }
  .hero-copy h1 { font-size: clamp(54px, 8vw, 82px); }
  .primary-navigation { gap: 20px; }
  .nav-list { gap: 20px; }
  .nav-cta { gap: 10px; }
  .service-row { grid-template-columns: 38px minmax(230px, 1fr) minmax(140px, 0.55fr) 40px; gap: 17px; }
  .studio-layout { gap: 7%; }
  .contact-layout { gap: 8%; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 72px; }
  .menu-toggle { position: relative; z-index: 24; display: flex; align-items: center; gap: 12px; padding: 9px 0px; border: 0px; background: transparent; color: var(--white); font-size: 11px; }
  .primary-navigation { position: absolute; inset: 71px 0px auto; display: none; flex-direction: column; align-items: stretch; gap: 23px; padding: 25px 20px 30px; background: var(--ink); border-bottom: 1px solid var(--dark-line); }
  .primary-navigation.is-open { display: flex; }
  .nav-list { flex-direction: column; gap: 0px; }
  .nav-list li { border-bottom: 1px solid var(--dark-line); }
  .nav-list a { display: block; padding: 13px 0px; font-size: 14px; }
  .nav-cta { justify-content: space-between; }
  .hero-section { min-height: auto; padding-top: 72px; }
  .hero-layout { grid-template-columns: 1fr; padding-top: 75px; padding-bottom: 38px; }
  .hero-copy h1 { max-width: 620px; font-size: clamp(55px, 13vw, 94px); }
  .hero-description { max-width: 490px; margin-top: 22px; font-size: 14px; }
  .hero-actions { margin-top: 25px; }
  .hero-art { justify-self: center; width: min(88%, 400px); margin-top: 7px; }
  .hero-bottom { padding-top: 13px; padding-bottom: 15px; }
  .section { padding: 83px 0px; }
  .section-heading { display: block; margin-bottom: 35px; }
  .section-heading h2, .contact-copy h2 { font-size: clamp(41px, 10vw, 65px); }
  .section-intro { margin-top: 18px; }
  .service-row { grid-template-columns: 32px 1fr 38px; gap: 12px; padding: 20px 0px; }
  .service-main h3 { font-size: 21px; }
  .service-main p { max-width: 420px; font-size: 11px; }
  .service-tags { grid-area: 2 / 2; justify-self: start; font-size: 9px; }
  .round-arrow { grid-area: 1 / 3 / span 2; width: 35px; height: 35px; }
  .studio-section { padding: 80px 0px; }
  .studio-layout { grid-template-columns: 1fr; gap: 45px; }
  .studio-side { min-height: 245px; }
  .studio-side .eyebrow { margin-bottom: 34px; }
  .studio-index { font-size: 57px; }
  .studio-copy { padding-top: 0px; }
  .studio-copy h2 { font-size: clamp(38px, 9vw, 56px); }
  .principles { margin-top: 42px; }
  .work-section { padding-bottom: 85px; }
  .work-grid { gap: 35px 16px; }
  .work-card-wide .work-visual { min-height: 330px; }
  .work-visual { min-height: 255px; }
  .mock-window { width: 84%; height: 72%; }
  .contact-section { padding: 82px 0px; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-direct { margin-top: 29px; }
  .contact-form-wrap { padding-top: 0px; }
  .contact-form { gap: 17px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; }
  .footer-nav { order: 3; width: 100%; padding-top: 10px; border-top: 1px solid var(--dark-line); }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 36px); }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 17px; }
  .hero-copy h1 { font-size: clamp(50px, 14vw, 72px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .hero-art { width: 100%; max-width: 340px; }
  .orbit-tag { font-size: 7px; padding: 7px 8px; }
  .art-caption { right: 2%; font-size: 7px; }
  .section-heading h2, .contact-copy h2 { font-size: 43px; }
  .service-row { grid-template-columns: 25px 1fr 34px; gap: 9px; }
  .service-number { font-size: 9px; }
  .service-main h3 { font-size: 19px; }
  .work-grid { grid-template-columns: 1fr; gap: 30px; }
  .work-card-wide { grid-column: auto; }
  .work-card-wide .work-visual { min-height: 300px; }
  .work-visual { min-height: 290px; }
  .mock-copy b { font-size: 37px; }
  .brand-poster b { font-size: 45px; }
  .digital-card > b { font-size: 37px; }
  .principles { grid-template-columns: 1fr; gap: 13px; }
  .principles div { flex-direction: row; gap: 12px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand { grid-column: auto; }
  .footer-manifesto { font-size: 13px; }
  .footer-contact { padding-top: 10px; }
  .footer-bottom { align-items: flex-start; }
  .footer-nav { flex-wrap: wrap; }
  .content-page { padding-top: 125px; padding-bottom: 75px; }
  .page-heading h1, .single-heading h1 { font-size: 52px; }
  .post-grid { grid-template-columns: 1fr; gap: 32px; }
  .entry-content p, .prose { font-size: 15px; }
  .footer-bottom > span { max-width: 65%; }
}
.hero-particle-art { aspect-ratio: 1 / 1; max-width: 560px; width: 100%; min-height: 0px; }
.hero-particle-art::before { inset: 8%; background: radial-gradient(rgba(237, 107, 44, 0.18), rgba(237, 107, 44, 0.043) 42%, transparent 72%); filter: blur(17px); }
.particle-canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.particle-fallback { position: absolute; inset: 0px; display: grid; place-items: center; color: rgb(237, 107, 44); font-size: clamp(190px, 34vw, 440px); font-weight: 900; line-height: 1; letter-spacing: -0.12em; font-family: "Arial Black", Arial, sans-serif; }
.hero-particle-art.has-canvas .particle-fallback { display: none; }
@media (max-width: 760px) {
  .hero-particle-art { min-height: 0px; max-width: 560px; width: min(92%, 560px); aspect-ratio: 1 / 1; }
}
@media (max-width: 520px) {
  .hero-particle-art { width: 100%; aspect-ratio: 1 / 1; }
}
:root { --process-orange: #f47735; }
.process-section { position: relative; overflow: hidden; padding: 104px 0px; background: rgb(9, 10, 9); color: var(--white); }
.process-sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.process-layout { display: grid; grid-template-columns: minmax(190px, 0.82fr) minmax(235px, 1fr) minmax(360px, 1.45fr); gap: 44px; align-items: center; }
.process-nav { align-self: stretch; padding: 14px 34px 14px 0px; border-right: 1px solid var(--dark-line); }
.process-nav-eyebrow { margin: 0px 0px 11px; color: rgb(137, 139, 132); font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.process-nav-label { margin: 0px 0px 18px; color: rgb(195, 196, 191); font-size: 12px; }
.process-tabs { display: flex; flex-direction: column; gap: 3px; }
.process-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 0px 8px 12px; border-width: 0px 0px 0px 3px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor transparent; border-image: none; background: transparent; color: rgb(137, 139, 132); text-align: left; font-size: 13px; font-weight: 600; line-height: 1.35; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.process-tab:hover { color: var(--white); }
.process-tab.is-active, .process-tab[aria-selected="true"] { border-left-color: var(--process-orange); color: var(--process-orange); }
.process-tab-number { color: rgb(101, 103, 95); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; }
.process-tab.is-active .process-tab-number { color: var(--process-orange); }
.process-visual { width: 100%; max-width: 370px; aspect-ratio: 1 / 1; justify-self: center; display: grid; place-items: center; }
.process-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.process-diagonal { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 1.5; stroke-dasharray: 2, 7; stroke-linecap: round; }
.process-main-orbit { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5; }
.process-crosshair { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5; stroke-linecap: round; }
.process-nodes { fill: rgb(9, 10, 9); stroke: rgba(255, 255, 255, 0.94); stroke-width: 1.7; }
.process-core { fill: var(--process-orange); transform-box: fill-box; transform-origin: center center; animation: 2.8s ease-in-out 0s infinite normal none running process-pulse; }
@keyframes process-pulse { 
  50% { transform: scale(1.11); filter: drop-shadow(rgba(244, 119, 53, 0.32) 0px 0px 8px); }
}
.process-panels { min-width: 0px; }
.process-panel[hidden] { display: none !important; }
.process-panel-heading { display: grid; grid-template-columns: auto minmax(0px, 1fr); align-items: center; gap: 17px; }
.process-number { color: var(--process-orange); font-size: clamp(52px, 5.5vw, 84px); font-weight: 600; line-height: 0.9; letter-spacing: -0.075em; white-space: nowrap; }
.process-number > span { font-weight: 400; }
.process-panel h3 { margin: 0px; color: var(--white); font-size: clamp(27px, 3.1vw, 42px); line-height: 1.05; letter-spacing: -0.055em; font-weight: 600; }
.process-description { margin: 28px 0px 24px; color: rgb(210, 211, 207); font-size: 14px; line-height: 1.65; }
.process-checklist { display: grid; gap: 13px; padding: 0px; margin: 0px; list-style: none; }
.process-checklist li { display: flex; align-items: flex-start; gap: 13px; color: rgb(224, 225, 221); font-size: 13px; line-height: 1.5; }
.process-check { flex: 0 0 23px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--process-orange); color: rgb(17, 18, 15); font-size: 14px; font-weight: 700; line-height: 1; }
.process-section :focus-visible { outline-color: var(--process-orange); }
@media (max-width: 1050px) {
  .process-layout { grid-template-columns: minmax(170px, 0.78fr) minmax(210px, 0.9fr) minmax(300px, 1.35fr); gap: 28px; }
  .process-nav { padding-right: 22px; }
  .process-tab { font-size: 12px; }
  .process-panel-heading { gap: 11px; }
}
@media (max-width: 760px) {
  .process-section { padding: 80px 0px; }
  .process-layout { grid-template-columns: 1fr; gap: 25px; }
  .process-nav { padding: 0px 0px 15px; border-right: 0px; border-bottom: 1px solid var(--dark-line); }
  .process-nav-label { margin-bottom: 12px; }
  .process-tabs { flex-direction: row; gap: 15px; overflow-x: auto; padding: 0px 0px 5px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .process-tab { flex: 0 0 auto; width: auto; min-width: 140px; padding: 9px 0px; border-left: 0px; border-bottom: 2px solid transparent; white-space: nowrap; scroll-snap-align: start; }
  .process-tab.is-active, .process-tab[aria-selected="true"] { border-bottom-color: var(--process-orange); }
  .process-visual { width: min(68%, 320px); max-width: 320px; }
  .process-panels { width: 100%; max-width: 680px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .process-section { padding: 68px 0px; }
  .process-layout { gap: 21px; }
  .process-tabs { gap: 12px; }
  .process-tab { min-width: 132px; font-size: 11px; }
  .process-visual { width: min(78%, 270px); }
  .process-panel-heading { gap: 9px; }
  .process-number { font-size: 53px; }
  .process-panel h3 { font-size: 29px; }
  .process-description { margin: 19px 0px; font-size: 13px; }
  .process-checklist { gap: 11px; }
  .process-checklist li { font-size: 12px; }
}


/* Work intro band — portfolio title, expertise tags, and project CTA. */
.work-section{padding:0 0 130px}
.work-intro-band{background:#090a09;color:var(--white)}
.work-intro{width:min(calc(100% - 80px),1640px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);align-items:center;gap:56px;padding-top:68px;padding-bottom:72px}
.work-intro-eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 20px;color:#f8f8f6;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.work-intro-eyebrow>span{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#fff}
.work-intro h2{margin:0;color:#fff;font-size:clamp(46px,5.1vw,74px);font-weight:600;line-height:.98;letter-spacing:-.075em}
.work-intro-meta{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.work-tags{display:flex;flex-wrap:wrap;gap:8px 9px;padding:0;margin:0;list-style:none}
.work-tags li{padding:6px 12px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:#f2f2ef;font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.work-all-button{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:42px;padding:0 21px;border-radius:999px;background:#ff782f;color:#10110f;font-size:11px;font-weight:700;text-transform:uppercase;transition:transform .2s ease,background .2s ease}
.work-all-button span{font-size:20px;font-weight:400;line-height:1}
.work-all-button:hover{transform:translateY(-2px);background:#ff914d;color:#10110f}
.work-all-button:focus-visible{outline-color:#fff}
.work-content{padding-top:82px}
@media(max-width:1000px){.work-intro{width:min(calc(100% - 48px),1640px);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px}.work-intro h2{font-size:clamp(44px,6vw,62px)}.work-tags{gap:7px}.work-tags li{font-size:8px;padding:6px 10px}}
@media(max-width:760px){.work-section{padding-bottom:85px}.work-intro{width:calc(100% - 40px);grid-template-columns:1fr;gap:25px;padding-top:55px;padding-bottom:56px}.work-intro-eyebrow{margin-bottom:14px}.work-intro h2{font-size:clamp(44px,9vw,62px)}.work-intro-meta{gap:18px}.work-tags li{font-size:9px}.work-content{padding-top:60px}}
@media(max-width:520px){.work-section{padding-bottom:75px}.work-intro{width:calc(100% - 36px);gap:21px;padding-top:47px;padding-bottom:48px}.work-intro h2{font-size:46px}.work-tags{gap:7px}.work-tags li{font-size:8px;padding:6px 9px}.work-all-button{min-height:40px;font-size:10px}.work-content{padding-top:45px}}


/* Sorwebtasarım logo lockup and footer contact/social links. */
.brand-logo-image{display:block;width:220px;max-width:100%;height:auto}
.footer-contact .footer-phone{font-size:17px}
.footer-contact .footer-contact-link{display:inline-flex;align-items:center;gap:5px;color:rgba(255,254,250,.82);font-size:12px;transition:color .2s}
.footer-contact .footer-contact-link:hover,.footer-social-link:hover{color:var(--lime)}
.footer-contact .footer-location{color:rgb(153,155,147);font-size:11px}
.footer-social{margin-top:7px}
.footer-social .eyebrow{display:block;margin:4px 0 8px;color:rgb(128,130,121);font-size:9px}
.footer-social-list{display:flex;flex-wrap:wrap;gap:8px 14px;list-style:none;padding:0;margin:0}
.footer-social-link{display:inline-flex;align-items:center;gap:3px;color:rgba(255,254,250,.82);font-size:11px;transition:color .2s}
.footer-social-arrow{font-size:11px}
@media(max-width:520px){.brand-logo-image{width:190px}}


/* Helpful, people-first SEO FAQ section. */
.faq-section{padding:110px 0;background:#f1f0e9;color:#10120f}
.faq-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(42px,8vw,118px);align-items:start}
.faq-intro{max-width:510px}
.faq-intro h2{margin:16px 0 18px;font-size:clamp(34px,4.1vw,57px);font-weight:500;line-height:1.04;letter-spacing:-.065em}
.faq-intro>p:not(.eyebrow){max-width:430px;color:#65665f;font-size:15px;line-height:1.7}
.faq-intro .text-link{display:inline-flex;align-items:center;gap:9px;margin-top:16px;color:#11120f;font-size:13px;font-weight:700}
.faq-list{border-top:1px solid rgba(16,18,15,.18)}
.faq-item{border-bottom:1px solid rgba(16,18,15,.18)}
.faq-item summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;padding:18px 3px;cursor:pointer;list-style:none;font-size:17px;font-weight:600;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';flex:0 0 auto;color:#f27036;font-size:25px;font-weight:400;line-height:1}
.faq-item[open] summary::after{content:'−'}
.faq-item summary:focus-visible{outline:2px solid #f27036;outline-offset:4px}
.faq-answer{padding:0 32px 18px 3px;color:#5b5d56;font-size:14px;line-height:1.75}
.faq-answer p{margin:0}
@media(max-width:760px){.faq-section{padding:78px 0}.faq-layout{grid-template-columns:1fr;gap:30px}.faq-intro{max-width:640px}.faq-intro h2{max-width:600px;font-size:clamp(34px,8vw,50px)}.faq-item summary{min-height:64px;font-size:15px}.faq-answer{font-size:13px}}
@media(max-width:520px){.faq-section{padding:64px 0}.faq-layout{gap:25px}.faq-item summary{gap:12px;padding:15px 2px;font-size:14px}.faq-answer{padding-right:16px}}

.coverage-section { padding: 92px 0px; background: rgb(231, 231, 223); }
.coverage-heading { display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(260px, 0.65fr); align-items: end; gap: 56px; margin-bottom: 38px; }
.coverage-heading .eyebrow { margin-bottom: 20px; }
.coverage-heading h2 { max-width: 760px; margin: 0px; font-size: clamp(40px, 5.2vw, 68px); line-height: 0.98; font-weight: 500; letter-spacing: -0.07em; }
.coverage-intro { max-width: 390px; margin: 0px 0px 5px; color: rgb(105, 107, 99); font-size: 13px; line-height: 1.75; }
.coverage-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.coverage-details summary { display: flex; align-items: center; gap: 16px; min-height: 66px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }
.coverage-details summary::-webkit-details-marker { display: none; }
.coverage-count { color: rgb(108, 110, 101); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; }
.coverage-toggle { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; font-size: 19px; font-weight: 400; transition: transform 0.2s, background 0.2s; }
.coverage-details[open] .coverage-toggle { transform: rotate(45deg); background: var(--lime); }
.province-tags { display: grid; grid-template-columns: repeat(9, minmax(0px, 1fr)); gap: 8px; padding: 0px 0px 23px; margin: 0px; list-style: none; }
.province-tags li { display: grid; place-items: center; min-height: 36px; padding: 6px 4px; border: 1px solid rgba(16, 18, 15, 0.14); background: rgba(255, 254, 250, 0.62); color: rgb(76, 78, 71); text-align: center; font-size: 10px; line-height: 1.25; }
@media (max-width: 1000px) { .province-tags { grid-template-columns: repeat(6, minmax(0px, 1fr)); } }
@media (max-width: 760px) {
  .coverage-section { padding: 72px 0px; }
  .coverage-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .coverage-heading h2 { font-size: clamp(39px, 9vw, 58px); }
  .coverage-intro { max-width: 550px; }
  .province-tags { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 7px; }
}
@media (max-width: 520px) { .province-tags { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; } .province-tags li { min-height: 34px; padding-inline: 2px; font-size: 9px; } }