:root {
  --paper: #f5f3ee;
  --paper-deep: #ebe9e2;
  --ink: #17191d;
  --muted: #686c72;
  --line: #d7d5ce;
  --blue: #365cf5;
  --sans: "DM Sans", Arial, sans-serif;
  --display: Manrope, "DM Sans", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.header { height: 86px; padding: 0 7%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; gap: 10px; align-items: center; }
.brand-mark { font: 800 34px/.9 var(--display); letter-spacing: -5px; }
.brand-mark span { color: var(--blue); }
.brand-name { font: 800 16px/.9 var(--display); letter-spacing: -.8px; }
.brand-name span { display: block; margin-top: 6px; color: var(--muted); font: 8px var(--mono); letter-spacing: 1.4px; }
.nav { display: flex; gap: 38px; align-items: center; font-size: 13px; font-weight: 500; }
.nav a:not(.nav-contact):hover,.text-link:hover { color: var(--blue); }
.nav-contact { padding: 13px 17px; border: 1px solid var(--ink); transition: color .2s, background .2s; }
.nav-contact span { margin-left: 18px; color: var(--blue); }
.nav-contact:hover { background: var(--ink); color: var(--paper); }
.menu-toggle { display: none; }

.hero { min-height: min(760px, calc(100svh - 86px)); padding: 72px 7% 55px; display: grid; grid-template-columns: .88fr 1.12fr; gap: 7%; align-items: center; position: relative; }
.hero-copy { padding: 15px 0 50px; }
.eyebrow { margin: 0 0 25px; color: var(--muted); font: 10px var(--mono); letter-spacing: 1.2px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--blue); }
h1,h2,h3,p { margin-top: 0; }
.hero h1 { margin: 0; font: 600 clamp(54px,6.4vw,92px)/.98 var(--display); letter-spacing: -.085em; }
.hero h1 em,.section-head h2 em,.services-heading h2 em,.contact h2 em { color: var(--blue); font-style: normal; }
.hero-description { max-width: 440px; margin: 28px 0 30px; color: #52565d; font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 16px 19px; font-size: 13px; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button-dark { min-width: 174px; background: var(--ink); color: white; }
.button-dark span { color: #a9bbff; font-size: 18px; }
.text-link { padding-bottom: 7px; border-bottom: 1px solid #a4a5a7; font-size: 13px; font-weight: 500; }
.text-link span { margin-left: 8px; color: var(--blue); }
.hero-note { display: flex; align-items: center; gap: 12px; margin-top: 70px; color: #74777c; font: 9px var(--mono); letter-spacing: .8px; }
.hero-note i { width: 3px; height: 3px; border-radius: 50%; background: var(--blue); }
.hero-visual { min-height: 510px; height: min(60vh, 590px); position: relative; overflow: hidden; background: #bbc0c3; }
.hero-visual>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.55) contrast(1.03); }
.hero-image-wash { position: absolute; inset: 0; background: linear-gradient(145deg,#19202c12 30%,#15192380 100%); }
.hero-stamp { position: absolute; right: 8%; top: 8%; width: 126px; height: 126px; border: 1px solid #ffffffa0; border-radius: 50%; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; backdrop-filter: blur(5px); }
.hero-stamp span { font: 8px var(--mono); letter-spacing: 1.3px; }
.hero-stamp b { font: 600 40px/.9 var(--display); letter-spacing: -5px; }
.hero-image-index { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 18px 21px; color: white; background: linear-gradient(transparent,#10151b9c); font: 9px var(--mono); letter-spacing: 1px; }
.hero-orbit { position: absolute; width: 180px; height: 180px; left: 50%; top: 52%; transform: translate(-50%,-50%); border: 1px solid #ffffff50; border-radius: 50%; }
.hero-orbit:before,.hero-orbit:after { content: ""; position: absolute; inset: -25px 27px; border: 1px solid #ffffff40; border-radius: 50%; transform: rotate(55deg); }
.hero-orbit:after { inset: 28px -24px; transform: rotate(-50deg); }
.hero-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: white; box-shadow: 0 0 18px #fff; }
.hero-orbit i:nth-child(1) { left: 8%; top: 22%; }.hero-orbit i:nth-child(2) { right: 8%; top: 50%; width: 5px; height: 5px; }.hero-orbit i:nth-child(3) { left: 48%; bottom: -2px; width: 4px; height: 4px; }
.hero-scroll { position: absolute; left: 7%; bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--muted); font: 8px var(--mono); letter-spacing: .8px; }
.hero-scroll span { width: 26px; height: 1px; background: var(--blue); }

.section { padding: 120px 9%; }
.work { background: var(--paper-deep); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 52px; }
.section-head .eyebrow,.services-heading .eyebrow { margin-bottom: 17px; }
.section-head h2,.services-heading h2 { margin: 0; font: 600 clamp(42px,5vw,68px)/1.02 var(--display); letter-spacing: -.075em; }
.section-intro { max-width: 330px; margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 22px; }
.work-card-wide { grid-column: 1/-1; }
.work-image { min-height: 370px; height: clamp(340px,36vw,500px); position: relative; display: block; overflow: hidden; background: #b5b9b9; color: white; isolation: isolate; }
.work-card-wide .work-image { height: clamp(390px,47vw,600px); }
.work-image img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) brightness(.72); transition: transform .8s cubic-bezier(.2,.7,.2,1),filter .5s; }
.work-image:hover img { transform: scale(1.045); filter: saturate(.85) brightness(.78); }
.work-image:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#10141ac9 0%,transparent 65%); }
.work-index { position: absolute; left: 22px; top: 22px; font: 9px var(--mono); letter-spacing: 1px; }
.work-arrow { position: absolute; right: 22px; top: 17px; font-size: 24px; transition: transform .2s; }
.work-image:hover .work-arrow { transform: translate(3px,-3px); }
.work-title { position: absolute; left: 6%; bottom: 8%; }
.work-title>span { font: 9px var(--mono); letter-spacing: 1.2px; }
.work-title h3 { margin: 12px 0 0; font: 500 clamp(38px,5vw,70px)/.98 var(--display); letter-spacing: -.07em; }
.work-card:not(.work-card-wide) .work-image { height: 410px; }
.work-card:not(.work-card-wide) .work-title h3 { font-size: clamp(38px,4vw,56px); }
.work-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 15px 0 0; }
.work-caption h3 { margin: 0; font-size: 16px; font-weight: 600; }
.work-caption p { margin: 0; color: var(--muted); font-size: 12px; }
.work-disclaimer { margin: 30px 0 0; color: var(--muted); font-size: 12px; }

.services { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9%; align-items: start; background: var(--paper); }
.services-heading h2 { font-size: clamp(42px,4.7vw,62px); }
.services-heading>p:last-child { max-width: 310px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.service-card { min-height: 190px; padding: 23px 20px 22px 0; border-bottom: 1px solid var(--line); }
.service-card:nth-child(odd) { border-right: 1px solid var(--line); }
.service-card:nth-child(even) { padding-left: 24px; }
.service-card>span { color: var(--blue); font: 10px var(--mono); }
.service-card h3 { margin: 20px 0 8px; font: 600 19px var(--display); letter-spacing: -.5px; }
.service-card p { max-width: 250px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.contact { min-height: 590px; padding: 86px 9%; position: relative; overflow: hidden; background: #171c27; color: white; isolation: isolate; }
.contact-content { position: relative; z-index: 2; max-width: 58%; }
.contact .eyebrow { color: #b7becd; }
.contact h2 { margin: 0; font: 600 clamp(52px,5.5vw,78px)/.96 var(--display); letter-spacing: -.08em; }
.contact h2 em { color: #9fb1ff; }
.contact-content>p:not(.eyebrow) { margin: 20px 0 26px; color: #c2c7d0; font-size: 15px; }
.button-light { min-width: 250px; background: white; color: var(--ink); }
.button-light span { color: var(--blue); font-size: 18px; }
.contact-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.contact-email { color: #e6e9ef; font-size: 13px; border-bottom: 1px solid #ffffff60; padding: 0 0 6px; }
.contact-email span { color: #9fb1ff; margin-left: 5px; }
.contact-orbit { position: absolute; width: 520px; height: 520px; right: 5%; top: -30px; border: 1px solid #ffffff1c; border-radius: 50%; box-shadow: 0 0 0 48px #ffffff06,0 0 0 96px #ffffff05; }
.contact-orbit:after { content: ""; position: absolute; inset: 16%; border: 1px solid #9fb1ff30; border-radius: 50%; }
.contact-preview { position: absolute; z-index: 1; width: min(530px,39vw); right: 8%; top: 50%; transform: translateY(-50%) perspective(1200px) rotateY(-7deg) rotateX(2deg); }
.preview-label { display: flex; align-items: center; gap: 9px; margin: 0 0 14px 7px; color: #c5cee1; font: 9px var(--mono); letter-spacing: 1px; }
.preview-label>span { width: 6px; height: 6px; border-radius: 50%; background: #9fb1ff; box-shadow: 0 0 12px #9fb1ff; }
.preview-window { padding: 7px; border: 1px solid #ffffff38; border-radius: 10px; background: #e9eaf0; box-shadow: 0 35px 90px #0007,0 0 45px #547aff16; }
.preview-browser { height: 29px; padding: 0 9px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; color: #747986; font: 8px var(--mono); }
.preview-browser>span { text-align: center; }.preview-browser>b { text-align: right; font-size: 12px; color: var(--blue); font-weight: 400; }
.preview-dots { display: flex; gap: 4px; }.preview-dots i { width: 5px; height: 5px; border-radius: 50%; background: #b9bcc5; }.preview-dots i:first-child { background: #ef8174; }.preview-dots i:nth-child(2) { background: #e6c16b; }.preview-dots i:last-child { background: #77bd8c; }
.preview-page { min-height: 260px; padding: 0 20px 12px; background: #f5f3ee; color: #17191d; }
.preview-nav { height: 39px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d7d5ce; }
.preview-nav strong { font: 700 12px var(--display); letter-spacing: -.5px; }.preview-nav strong span { color: var(--blue); }
.preview-nav>span { font: 6px var(--mono); color: #70747c; }
.preview-hero { min-height: 182px; display: grid; grid-template-columns: 1fr .78fr; align-items: center; gap: 12px; padding: 17px 0; }
.preview-copy>small { color: #696e78; font: 7px var(--mono); letter-spacing: .8px; }
.preview-copy h3 { margin: 10px 0 17px; font: 600 clamp(21px,2.5vw,33px)/.98 var(--display); letter-spacing: -.07em; }
.preview-copy>b { font: 7px var(--mono); letter-spacing: .6px; }.preview-copy>b span { color: var(--blue); font-size: 12px; }
.preview-hero img { height: 148px; object-fit: cover; }
.preview-foot { display: flex; justify-content: space-between; border-top: 1px solid #d7d5ce; padding-top: 9px; color: #747986; font: 6px var(--mono); letter-spacing: .7px; }
.preview-note { margin: 12px 0 0 7px; color: #aeb8c9; font-size: 11px; }
.contact-side { position: absolute; right: 9%; bottom: 27px; color: #b7becd; font: 9px var(--mono); letter-spacing: 1px; }
.footer { min-height: 90px; padding: 20px 7%; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.footer .brand-mark { font-size: 28px; }.footer .brand-name { font-size: 14px; }.footer .brand-name span { font-size: 7px; }
.footer-note,.footer-copy { color: var(--muted); font-size: 11px; }
.footer-copy { font: 9px var(--mono); }
.footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-admin { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); letter-spacing: 1.2px; transition: color .2s, border-color .2s; }
.footer-admin svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.footer-admin:hover { color: var(--blue); border-color: var(--blue); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media(max-width:1000px) {
  .header { padding-inline: 5%; }
  .hero { min-height: unset; padding: 65px 5% 70px; gap: 5%; grid-template-columns: .9fr 1.1fr; }
  .hero-visual { min-height: 440px; height: 52vw; }
  .hero h1 { font-size: clamp(52px,7vw,76px); }
  .hero-note { margin-top: 48px; }
  .section { padding: 95px 6%; }
  .services { gap: 5%; }
  .contact { padding-inline: 6%; min-height: 540px; }
  .contact-content { max-width: 55%; }
  .contact-preview { right: 5%; width: 40vw; }
  .preview-page { min-height: 225px; padding-inline: 13px; }
  .preview-hero { min-height: 155px; }.preview-hero img { height: 128px; }
}
@media(max-width:700px) {
  html { scroll-padding-top: 72px; }
  .header { height: 72px; padding-inline: 5%; }
  .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px; border: 0; background: transparent; }
  .menu-toggle span { height: 1px; width: 23px; background: var(--ink); }
  .nav { display: none; position: absolute; top: 71px; left: 0; right: 0; padding: 22px 5% 26px; flex-direction: column; align-items: stretch; gap: 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav-contact { text-align: center; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 34px; padding: 58px 5% 58px; }
  .hero-copy { padding: 0; }
  .eyebrow { font-size: 9px; letter-spacing: .9px; margin-bottom: 19px; }
  .hero h1 { font-size: clamp(53px,13vw,78px); }
  .hero-description { max-width: 440px; margin: 21px 0 24px; font-size: 15px; }
  .hero-actions { gap: 20px; }
  .button { padding: 15px 16px; font-size: 12px; }
  .button-dark { min-width: 160px; }
  .hero-note { margin-top: 33px; font-size: 8px; }
  .hero-visual { min-height: 370px; height: 104vw; max-height: 470px; }
  .hero-stamp { width: 100px; height: 100px; }.hero-stamp b { font-size: 34px; }
  .hero-scroll { display: none; }
  .section { padding: 75px 5%; }
  .section-head { display: block; margin-bottom: 30px; }
  .section-head h2,.services-heading h2 { font-size: clamp(42px,10vw,58px); }
  .section-intro { margin: 18px 0 0; font-size: 14px; }
  .work-grid { grid-template-columns: 1fr; gap: 27px; }
  .work-card-wide { grid-column: auto; }
  .work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image { min-height: 350px; height: 92vw; max-height: 460px; }
  .work-title h3,.work-card:not(.work-card-wide) .work-title h3 { font-size: clamp(39px,10vw,58px); }
  .work-caption { display: block; padding-top: 12px; }
  .work-caption h3 { font-size: 15px; }.work-caption p { margin-top: 5px; font-size: 12px; }
  .work-disclaimer { font-size: 11px; line-height: 1.6; }
  .services { display: block; }
  .services-heading>p:last-child { margin-top: 15px; font-size: 14px; }
  .services-grid { margin-top: 35px; grid-template-columns: 1fr; }
  .service-card,.service-card:nth-child(even) { min-height: unset; padding: 19px 0 22px; border-right: 0; }
  .service-card h3 { margin: 11px 0 6px; font-size: 18px; }.service-card p { font-size: 13px; }
  .contact { min-height: 410px; padding: 68px 5% 80px; }
  .contact-content { max-width: 100%; }
  .contact h2 { font-size: clamp(50px,12vw,72px); }
  .contact-content>p:not(.eyebrow) { max-width: 340px; font-size: 14px; line-height: 1.6; }
  .contact-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .contact-preview { display: none; }
  .contact-orbit { width: 360px; height: 360px; right: -220px; top: 70px; }
  .contact-side { left: 5%; right: auto; bottom: 23px; font-size: 8px; }
  .footer { padding: 22px 5%; flex-wrap: wrap; }
  .footer-note { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*:before,*:after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
  .reveal { opacity: 1; transform: none; }
}

/* Immersive full-screen 3D cover */
.header{position:fixed;top:0;left:0;right:0;height:86px;background:transparent;border:0;color:#f6f8ff;padding-inline:7%;z-index:20;transition:height .25s,background .25s,color .25s,box-shadow .25s,backdrop-filter .25s}
.header.is-scrolled{height:76px;background:#f5f3eef0;color:var(--ink);border-bottom:1px solid #17191d18;box-shadow:0 8px 28px #10131b0c;backdrop-filter:blur(16px)}
.header.is-scrolled .brand-name span{color:var(--muted)}
.header.is-scrolled .nav{color:var(--ink)}
.header.is-scrolled .nav-contact{border-color:#17191d}
.header.is-scrolled .nav-contact:hover{background:#17191d;color:#f5f3ee}
.header .brand-name span{color:#aeb6c8}.header .brand-mark span{color:#8da6ff}
.header .nav{color:#e3e8f2}.header .nav-contact{border-color:#ffffff65}.header .nav-contact span{color:#a9bcff}.header .nav-contact:hover{background:#fff;color:#151922}
.hero-immersive{min-height:100svh;height:100svh;padding:120px 7% 80px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;position:relative;isolation:isolate;background:#080d18;color:#f6f8ff}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 76% 48%,#173d7a12,transparent 46%),linear-gradient(90deg,#080d18f5 0%,#080d18e8 30%,#080d1855 58%,#080d1820 100%),linear-gradient(0deg,#080d18a8,transparent 30%,#080d1866)}
.hero-immersive .hero-copy{width:min(650px,55vw);padding:0;position:relative;z-index:2}
.hero-immersive .eyebrow{color:#bcc5d6;margin-bottom:28px;font-size:10px}
.hero-immersive .status-dot{background:#9eb5ff;box-shadow:0 0 14px #9eb5ff}
.hero-immersive h1{font-size:clamp(65px,8vw,116px);font-weight:500;line-height:.91;letter-spacing:-.09em;color:#f5f6fa}
.hero-immersive h1 em{color:#a7bcff}
.hero-immersive .hero-description{max-width:470px;color:#c0c7d5;font-size:17px;line-height:1.7;margin:26px 0 30px}
.hero-immersive .button-dark{background:#f5f6fa;color:#111721}.hero-immersive .button-dark span{color:#365cf5}
.hero-immersive .text-link{color:#f3f5fa;border-color:#ffffff65}.hero-immersive .text-link span{color:#a9bcff}
.hero-immersive .hero-note{color:#aeb8c9;margin-top:58px}
.hero-immersive .hero-note i{background:#a9bcff}
.hero-immersive .hero-scroll{left:7%;bottom:29px;z-index:2;color:#aeb8c9}.hero-immersive .hero-scroll span{background:#a9bcff}
.hero-coordinate{position:absolute;z-index:2;right:7%;bottom:31px;color:#aeb8c9;font:9px var(--mono);letter-spacing:1px}
@media(max-width:1000px){.header{padding-inline:5%}.hero-immersive{padding-inline:5%}.hero-immersive .hero-copy{width:min(600px,65vw)}.hero-immersive h1{font-size:clamp(62px,9vw,96px)}}
@media(max-width:700px){
  .header{height:72px;padding-inline:5%}.header .menu-toggle span{background:#f5f6fa}
  .header.is-scrolled{height:68px}.header.is-scrolled .menu-toggle span{background:var(--ink)}
  .header .nav{top:71px;left:0;right:0;padding:22px 5% 26px;background:#0b111e;color:#f4f6fb;border-color:#ffffff20}
  .header.is-scrolled .nav{top:67px;background:#f5f3ee;color:var(--ink);border-color:var(--line)}
  .header .nav-contact{border-color:#ffffff55}.header .brand-name span{color:#aeb6c8}
  .header.is-scrolled .brand-name span{color:var(--muted)}
  .hero-immersive{height:100svh;min-height:690px;padding:110px 5% 86px;justify-content:center;align-items:flex-start}
  .hero-immersive .hero-copy{width:100%;max-width:540px}
  .hero-immersive .eyebrow{font-size:8px;letter-spacing:.7px;margin-bottom:22px}
  .hero-immersive h1{font-size:clamp(54px,13.6vw,82px);line-height:.95}
  .hero-immersive .hero-description{max-width:390px;font-size:15px;margin:20px 0 24px}
  .hero-immersive .hero-note{margin-top:38px;font-size:7px}
  .hero-immersive .hero-scroll{left:5%;bottom:27px;font-size:7px}
  .hero-coordinate{right:5%;bottom:28px;font-size:7px}
  .hero-atmosphere{background:linear-gradient(90deg,#080d18e8,#080d18a0 65%,#080d1840),linear-gradient(0deg,#080d18c9,transparent 34%,#080d1866)}
}
@media(prefers-reduced-motion:reduce){.hero-canvas{visibility:hidden}.hero-immersive{background:radial-gradient(ellipse at 78% 45%,#142f61,#080d18 62%)}}

/* Clearer, more compact services section */
.services{display:block;padding:94px 9% 100px}
.services-heading{display:grid;grid-template-columns:1fr .8fr;align-items:end;gap:18px 7%;margin-bottom:36px}
.services-heading .eyebrow{grid-column:1/-1;margin:0}
.services-heading h2{font-size:clamp(42px,5vw,64px);line-height:.98}
.services-heading>p:last-child{max-width:390px;margin:0 0 4px;font-size:15px;line-height:1.7;color:var(--muted)}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0;border:0}
.service-card,.service-card:nth-child(even),.service-card:nth-child(odd){min-height:160px;padding:18px 22px 0 0;border:0;border-top:1px solid var(--line)}
.service-card h3{margin:14px 0 7px;font-size:20px}
.service-card p{max-width:300px;font-size:14px;line-height:1.65}
@media(max-width:700px){
  .services{padding:72px 5%}
  .services-heading{grid-template-columns:1fr;gap:14px;margin-bottom:26px}
  .services-heading .eyebrow{grid-column:auto;margin:0}
  .services-heading h2{font-size:clamp(39px,9.5vw,54px)}
  .services-heading>p:last-child{max-width:360px;font-size:14px}
  .services-grid{grid-template-columns:1fr;gap:0;margin:0}
  .service-card,.service-card:nth-child(even),.service-card:nth-child(odd){min-height:0;padding:16px 0;border:0;border-top:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;column-gap:10px}
  .service-card>span{grid-row:1 / span 2;align-self:start;padding-top:3px}
  .service-card h3{margin:0 0 5px;font-size:17px}
  .service-card p{font-size:12px;line-height:1.5}
}

/* Show more kinds of work without one oversized featured card */
.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
.work-card-wide{grid-column:auto}
.work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image{height:clamp(300px,27vw,380px);min-height:300px}
.work-title{left:5%;bottom:7%}
.work-title h3,.work-card:not(.work-card-wide) .work-title h3{font-size:clamp(31px,3.2vw,48px)}
.work-index{font-size:8px;letter-spacing:.8px}
.work-caption{min-height:58px;align-items:flex-start}
.work-caption h3{font-size:15px}
.work-caption p{max-width:48%;text-align:right;line-height:1.5}
@media(max-width:700px){
  .work-grid{grid-template-columns:1fr;gap:22px}
  .work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image{height:78vw;min-height:280px;max-height:350px}
  .work-title h3,.work-card:not(.work-card-wide) .work-title h3{font-size:clamp(34px,8.8vw,48px)}
  .work-caption{min-height:0}
  .work-caption p{max-width:52%;font-size:11px}
}

/* Compact, navigable 3D concept carousel */
.icon-arrow,.icon-down{display:inline-block;width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.nav-contact .icon-arrow{margin-left:18px;color:#a9bcff}.header.is-scrolled .nav-contact .icon-arrow{color:var(--blue)}
.button-dark .icon-down{width:19px;height:19px;color:#365cf5}
.text-link .icon-arrow{width:14px;height:14px;margin-left:8px;color:#a9bcff}
.work-carousel{position:relative;width:min(100%,1100px);margin:0 auto;padding:0 52px 44px}
.work-stage{height:440px;position:relative;display:grid;place-items:center;perspective:1200px;overflow:hidden;touch-action:pan-y;cursor:grab}
.work-stage:before{content:"";position:absolute;z-index:0;left:50%;top:52%;width:min(780px,82%);height:270px;border:1px solid #365cf52b;border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg);box-shadow:0 0 0 28px #365cf508;pointer-events:none}
.work-stage:active{cursor:grabbing}
.work-track{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.work-card{position:absolute;left:50%;top:50%;width:min(430px,58vw);height:355px;margin:0;background:#f5f3ee;box-shadow:0 22px 55px #11131b24;transform:translate(-50%,-50%) translateZ(-220px) scale(.62);transform-style:preserve-3d;backface-visibility:hidden;opacity:0;pointer-events:none;transition:transform .8s cubic-bezier(.2,.72,.18,1),opacity .65s,filter .65s}
.work-card[data-position="0"]{z-index:4;transform:translate(-50%,-50%) translateZ(55px) rotateY(0) scale(1);opacity:1;pointer-events:auto;filter:none}
.work-card[data-position="1"]{z-index:3;transform:translate(calc(-50% + var(--side-offset,300px)),-50%) translateZ(-70px) rotateY(-38deg) scale(.78);opacity:.86;filter:saturate(.78)}
.work-card[data-position="-1"]{z-index:3;transform:translate(calc(-50% - var(--side-offset,300px)),-50%) translateZ(-70px) rotateY(38deg) scale(.78);opacity:.86;filter:saturate(.78)}
.work-card .work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image{height:272px;min-height:0;width:100%}
.work-card .work-title{left:6%;bottom:8%}
.work-card .work-title h3,.work-card:not(.work-card-wide) .work-title h3{font-size:clamp(31px,3.1vw,43px)}
.work-card .work-caption{display:block;min-height:82px;padding:12px 15px 10px;background:#f5f3ee}
.work-card .work-caption h3{font-size:15px;margin:0 0 4px}
.work-card .work-caption p{max-width:none;margin:0;text-align:left;font-size:11px;line-height:1.4}
.work-arrow{display:grid;place-items:center;width:30px;height:30px}
.work-arrow .icon-arrow{width:22px;height:22px}
.carousel-control{position:absolute;z-index:5;top:46%;width:42px;height:42px;display:grid;place-items:center;border:1px solid #17191d45;border-radius:50%;background:#f5f3eef0;color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.carousel-control:hover{background:var(--ink);color:#fff;transform:scale(1.06)}
.carousel-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.carousel-prev{left:0}.carousel-next{right:0}
.carousel-count{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);color:var(--ink);font:10px var(--mono);letter-spacing:1px}
.carousel-count i{color:#a3a5aa;font-style:normal;margin:0 5px}
.contact-actions .icon-arrow{color:var(--blue)}.contact-email .icon-arrow{width:14px;height:14px;margin-left:5px;color:#9fb1ff}
.preview-browser>b .icon-arrow,.preview-copy>b .icon-arrow{width:11px;height:11px;color:var(--blue)}
@media(max-width:700px){
  .work{padding-bottom:35px}
  .work-carousel{width:100%;padding:0 0 48px}
  .work-stage{height:315px;perspective:900px}
  .work-stage:before{width:95%;height:190px;top:52%}
  .work-card{width:min(240px,72vw);height:278px;--side-offset:clamp(130px,36vw,165px)}
  .work-card .work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image{height:205px}
  .work-card .work-title h3,.work-card:not(.work-card-wide) .work-title h3{font-size:clamp(30px,8vw,39px)}
  .work-card .work-title>span{font-size:7px;letter-spacing:.7px}
  .work-card .work-index{left:12px;top:13px;font-size:6px}
  .work-card .work-arrow{right:10px;top:8px;width:26px;height:26px}
  .work-card .work-arrow .icon-arrow{width:18px;height:18px}
  .work-card .work-caption{min-height:73px;padding:10px 12px 8px}
  .work-card .work-caption h3{font-size:13px}
  .work-card .work-caption p{font-size:10px}
  .carousel-control{top:auto;bottom:0;width:36px;height:36px}
  .carousel-control svg{width:17px;height:17px}
  .carousel-prev{left:calc(50% - 72px)}.carousel-next{right:auto;left:calc(50% + 36px)}
  .carousel-count{bottom:11px;font-size:9px}
  .work-disclaimer{margin-top:14px}
  .services{padding-top:28px}
}
@media(prefers-reduced-motion:reduce){.work-card{transition:none}.carousel-control{transition:none}}

/* Refined, compact carousel presentation */
.work.section{padding-top:88px;padding-bottom:72px}
.work .section-head{align-items:end;margin-bottom:26px}
.work .section-head .eyebrow{margin-bottom:14px}
.work .section-head h2{font-size:clamp(40px,4.3vw,60px)}
.work .section-intro{max-width:280px;font-size:14px;line-height:1.6}
.work-carousel{padding:0 0 28px}
.work-stage{height:390px;perspective:1350px}
.work-stage:before{width:min(700px,76%);height:230px;opacity:.62}
.work-card{width:min(410px,54vw);height:326px;box-shadow:0 24px 60px #11131b20}
.work-card[data-position="1"],.work-card[data-position="-1"]{opacity:.78}
.work-card .work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image{height:250px}
.work-card .work-index{font-size:8px;letter-spacing:1.2px}
.work-card .work-title{bottom:7%}
.work-card .work-title>span{font-size:8px;letter-spacing:1px}
.work-card .work-title h3,.work-card:not(.work-card-wide) .work-title h3{font-size:clamp(30px,3vw,40px)}
.work-card .work-caption{min-height:76px;padding:15px 17px}
.work-card .work-caption h3{font-size:14px;font-weight:600}
.carousel-count{bottom:0;font-size:9px;letter-spacing:1.5px}
@media(max-width:700px){
  .work.section{padding:56px 5% 40px}
  .work .section-head{margin-bottom:14px}
  .work .section-head .eyebrow{margin-bottom:10px}
  .work .section-head h2{font-size:clamp(39px,10vw,52px);line-height:.99}
  .work .section-intro{margin-top:11px;max-width:300px;font-size:13px;line-height:1.5}
  .work-carousel{padding:0 0 25px}
  .work-stage{height:278px;perspective:1000px}
  .work-stage:before{width:98%;height:155px;top:52%}
  .work-card{width:min(218px,68vw);height:260px;--side-offset:clamp(125px,39vw,150px)}
  .work-card .work-image,.work-card-wide .work-image,.work-card:not(.work-card-wide) .work-image{height:202px}
  .work-card .work-index{left:12px;top:12px;font-size:6px;letter-spacing:.8px}
  .work-card .work-title{left:6%;bottom:7%}
  .work-card .work-title>span{font-size:6px;letter-spacing:.7px}
  .work-card .work-title h3,.work-card:not(.work-card-wide) .work-title h3{font-size:clamp(27px,7.5vw,34px)}
  .work-card .work-caption{min-height:58px;padding:11px 12px}
  .work-card .work-caption h3{margin:0;font-size:12px}
  .carousel-count{font-size:8px}
}