:root {
  color-scheme: dark;
  --bg: #0b1020;
  --bg-soft: #10182a;
  --surface: #141f33;
  --surface-hover: #192740;
  --text: #f5f7fb;
  --muted: #aab5c7;
  --line: rgba(197, 213, 239, .13);
  --mint: #9ef0d0;
  --mint-dark: #173e39;
  --peach: #ffb899;
  --font-body: 'DM Sans', sans-serif;
  --font-display: 'Manrope', sans-serif;
  --ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--mint); color: var(--bg); }
.container { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.site-header { position: relative; min-height: 720px; min-height: min(850px, 100svh); overflow: hidden; background: radial-gradient(ellipse at 78% 50%, rgba(34, 75, 77, .32), transparent 38%), radial-gradient(ellipse at 8% 2%, rgba(41, 56, 89, .45), transparent 42%), var(--bg); }
.site-header::after { position: absolute; right: -170px; bottom: -430px; width: 750px; height: 750px; border: 1px solid rgba(158, 240, 208, .08); border-radius: 50%; content: ''; pointer-events: none; }
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.08em; }
.brand span { color: var(--mint); }
.nav-links { display: flex; align-items: center; gap: clamp(22px, 3.4vw, 46px); list-style: none; }
.nav-links a { color: #d4dbea; font-size: 13px; font-weight: 600; transition: color .25s var(--ease); }
.nav-links a:hover { color: var(--mint); }
.nav-links .nav-contact { display: inline-flex; gap: 10px; align-items: center; padding: 11px 17px; border: 1px solid rgba(158, 240, 208, .4); border-radius: 999px; color: var(--mint); }
.nav-contact:hover { background: var(--mint); color: var(--bg) !important; }
.menu-toggle { display: none; border: 0; background: none; color: var(--text); font-size: 23px; }
.hero { position: relative; display: flex; align-items: center; min-height: 620px; padding: 100px 0 126px; }
.hero-copy { position: relative; z-index: 2; max-width: 720px; }
.eyebrow { color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.hero-kicker { margin-top: 35px; color: #c0cad9; font-size: clamp(16px, 2vw, 20px); }
.hero h1 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(46px, 7vw, 82px); font-weight: 700; line-height: 1.08; letter-spacing: -.065em; }
.hero h1 span, .section-title span { color: var(--mint); }
.hero h1 em { color: var(--peach); font-style: normal; }
.hero-description { max-width: 490px; margin-top: 22px; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 50px; padding: 0 21px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--mint); color: #0c1c1a; box-shadow: 0 8px 26px rgba(158, 240, 208, .12); }
.button-primary:hover { background: #b7f7df; box-shadow: 0 12px 35px rgba(158, 240, 208, .22); }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: #d7dfeb; font-size: 13px; font-weight: 600; transition: color .2s, gap .2s; }
.text-link:hover { gap: 15px; color: var(--mint); }
.hero-orbit { position: absolute; top: 50%; right: 5%; width: min(32vw, 370px); aspect-ratio: 1; transform: translateY(-48%); }
.orbit-ring { position: absolute; inset: 4%; border: 1px solid rgba(158, 240, 208, .19); border-radius: 50%; box-shadow: 0 0 85px rgba(81, 161, 139, .1), inset 0 0 70px rgba(81, 161, 139, .08); }
.orbit-ring::before, .orbit-ring::after { position: absolute; border: 1px solid rgba(158, 240, 208, .1); border-radius: 50%; content: ''; }
.orbit-ring::before { inset: 12%; }.orbit-ring::after { inset: 26%; }
.orbit-core { position: absolute; inset: 32%; display: grid; place-items: center; border: 1px solid rgba(158, 240, 208, .35); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #274e4b, #111c2c 72%); font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -.1em; box-shadow: 0 0 50px rgba(97, 207, 176, .12); }
.orbit-core span { position: absolute; top: 20%; right: 20%; color: var(--peach); font-size: 18px; }
.orbit-label { position: absolute; right: -8%; bottom: 18%; color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: .2em; line-height: 1.6; }
.scroll-cue { position: absolute; bottom: 35px; left: 0; display: flex; align-items: center; gap: 12px; color: #8d9ab0; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.scroll-cue span { width: 30px; height: 1px; background: var(--mint); }
.section { padding: 112px 0; }
.about-section { background: var(--bg-soft); }
.about-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(48px, 9vw, 118px); }
.about-visual { position: relative; width: 100%; max-width: 420px; }
.about-visual::before { position: absolute; inset: -14px 14px 14px -14px; border: 1px solid rgba(158, 240, 208, .4); border-radius: 100px; content: ''; }
.about-visual img { position: relative; display: block; width: 100%; aspect-ratio: .82; border: 1px solid var(--line); border-radius: 100px; background: linear-gradient(135deg, #17243a, #1e3c3a); object-fit: cover; }
.image-caption { position: fixed; right: 13px; bottom: 13px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; background: rgba(11,16,32,.72); color: #d9e2ed; font-size: 8px; font-weight: 700; letter-spacing: .12em; backdrop-filter: blur(8px); }
.section-title { margin-top: 13px; font-family: var(--font-display); font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.17; letter-spacing: -.055em; }
.body-copy { margin-top: 19px; color: var(--muted); font-size: 14px; }
.tabs { display: flex; gap: 27px; margin: 30px 0 22px; border-bottom: 1px solid var(--line); }
.tab-link { position: relative; padding: 0 0 12px; border: 0; background: none; color: #8f9cb1; cursor: pointer; font-size: 13px; font-weight: 600; transition: color .2s; }
.tab-link::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--mint); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.tab-link.active, .tab-link:hover { color: var(--mint); }.tab-link.active::after { transform: scaleX(1); }
.tab-panel { animation: panel-in .3s var(--ease); }.tab-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.detail-list { display: grid; gap: 14px; list-style: none; }.detail-list li { display: grid; gap: 2px; }.detail-list strong { color: var(--text); font-size: 13px; }.detail-list span { color: var(--muted); font-size: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 45px; }.heading-note { max-width: 310px; padding-bottom: 5px; color: var(--muted); font-size: 13px; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.service-card { position: relative; min-height: 290px; padding: 29px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(24,38,60,.88), rgba(17,26,43,.9)); transition: transform .35s var(--ease), border-color .35s, background .35s; }
.service-card:hover { transform: translateY(-7px); border-color: rgba(158, 240, 208, .45); background: linear-gradient(145deg, #1a2b43, #142338); }
.service-number { position: absolute; top: 25px; right: 27px; color: #738198; font-size: 10px; letter-spacing: .15em; }
.service-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 29px; border: 1px solid rgba(158,240,208,.23); border-radius: 12px; background: rgba(158,240,208,.07); color: var(--mint); font-size: 19px; }
.service-card h3 { font-family: var(--font-display); font-size: 19px; }.service-card p { max-width: 290px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.service-card > a { position: absolute; right: 25px; bottom: 24px; color: var(--mint); transition: transform .2s; }.service-card > a:hover { transform: translate(3px,-3px); }
.portfolio-section { padding-top: 60px; background: var(--bg-soft); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.work-card { position: relative; overflow: hidden; aspect-ratio: 1.08; border: 1px solid var(--line); border-radius: 13px; background: #1a2639; }
.work-card::after { position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, rgba(5,10,20,.9)); content: ''; }
.work-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }.work-card:hover img { transform: scale(1.06); filter: saturate(1.12); }
.work-overlay { position: absolute; z-index: 1; right: 20px; bottom: 20px; left: 20px; }.work-overlay > span { color: var(--mint); font-size: 9px; font-weight: 700; letter-spacing: .14em; }.work-overlay h3 { max-width: 80%; margin-top: 5px; font-family: var(--font-display); font-size: 19px; }.work-overlay a { position: absolute; right: 0; bottom: 2px; display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: var(--mint); color: var(--bg); transition: transform .2s; }.work-overlay a:hover { transform: rotate(45deg); }
.portfolio-note { margin-top: 24px; color: #8793a7; text-align: center; font-size: 12px; }
.contact-section { background: radial-gradient(ellipse at 90% 85%, rgba(33, 81, 71, .18), transparent 40%); }
.contact-grid { display: grid; grid-template-columns: 1fr .88fr; gap: clamp(45px, 10vw, 130px); align-items: start; }.contact-copy .section-title { font-size: clamp(40px, 5vw, 62px); }.contact-copy .body-copy { max-width: 380px; margin-bottom: 25px; }
.contact-detail { display: flex; align-items: center; gap: 12px; margin-top: 13px; color: #d7dfeb; font-size: 13px; transition: color .2s; }.contact-detail:hover { color: var(--mint); }.contact-detail i { width: 18px; color: var(--mint); }
.social-links { display: flex; gap: 10px; margin-top: 25px; }.social-links a { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #c4cedd; transition: color .2s, border-color .2s, background .2s; }.social-links a:hover { border-color: var(--mint); background: rgba(158,240,208,.08); color: var(--mint); }
.contact-form { display: grid; gap: 10px; padding: 29px; border: 1px solid var(--line); border-radius: 14px; background: rgba(20,31,51,.72); }.contact-form label { margin-top: 8px; color: #d6dfeb; font-size: 12px; font-weight: 600; }.contact-form input, .contact-form textarea { width: 100%; padding: 12px 13px; border: 1px solid rgba(197,213,239,.15); border-radius: 7px; outline: none; background: #0d1525; color: var(--text); font-size: 13px; transition: border-color .2s, box-shadow .2s; }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #728098; }.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(158,240,208,.7); box-shadow: 0 0 0 3px rgba(158,240,208,.08); }.contact-form textarea { min-height: 120px; resize: vertical; }.contact-form .button { justify-self: start; margin-top: 8px; }.form-note { color: #8290a5; font-size: 10px; }
.footer { border-top: 1px solid var(--line); }.footer-inner { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 20px; }.footer-inner p, .back-top { color: #8d9ab0; font-size: 11px; }.back-top { transition: color .2s; }.back-top:hover { color: var(--mint); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
@media (max-width: 850px) {
  .container { width: min(100% - 48px, 700px); }
  .hero { min-height: 580px; padding-top: 90px; }.hero-orbit { right: -8%; width: 34vw; opacity: .55; }
  .about-grid { grid-template-columns: .72fr 1.28fr; gap: 40px; }.about-visual { max-width: 300px; }
  .services-grid, .work-grid { gap: 13px; }.service-card { padding: 23px; }.service-card h3 { font-size: 17px; }
  .section { padding: 88px 0; }.portfolio-section { padding-top: 55px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 70px; }.container { width: calc(100% - 40px); }
  .site-header { min-height: 720px; min-height: 100svh; }.nav { min-height: 72px; }.menu-toggle { display: block; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; }
  .nav-links { position: absolute; top: 62px; right: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px; border: 1px solid var(--line); border-radius: 12px; background: #111a2b; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .22s, transform .22s; }.nav-links.open { opacity: 1; pointer-events: auto; transform: translateY(0); }.nav-links li { border-bottom: 1px solid var(--line); }.nav-links li:last-child { border-bottom: 0; }.nav-links a { display: block; padding: 13px 3px; }.nav-links .nav-contact { display: inline-flex; width: fit-content; margin: 9px 0; padding: 9px 14px; }
  .hero { align-items: flex-start; min-height: calc(100svh - 72px); padding: clamp(105px, 22vh, 160px) 0 105px; }.hero-copy { max-width: 100%; }.hero-kicker { margin-top: 27px; }.hero h1 { font-size: clamp(44px, 12vw, 68px); }.hero-description { max-width: 390px; font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 27px; }.hero-orbit { top: auto; right: -94px; bottom: 63px; width: 210px; opacity: .3; transform: none; }.orbit-label { display: none; }.scroll-cue { bottom: 24px; }
  .section { padding: 74px 0; }.about-grid { grid-template-columns: 1fr; gap: 43px; }.about-visual { width: 78%; max-width: 340px; margin: 0 auto; }.about-visual img { aspect-ratio: 1.05; }.section-title { font-size: clamp(34px, 9vw, 45px); }.body-copy { font-size: 13px; }
  .tabs { gap: clamp(18px, 7vw, 30px); }.tab-link { font-size: 12px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 30px; }.heading-note { max-width: 390px; }.services-grid, .work-grid { grid-template-columns: 1fr; gap: 14px; }.service-card { min-height: 250px; padding: 25px; }.service-icon { margin-bottom: 22px; }.work-card { aspect-ratio: 1.22; }.portfolio-section { padding-top: 50px; }
  .contact-grid { grid-template-columns: 1fr; gap: 35px; }.contact-form { padding: 22px; }.contact-copy .section-title { font-size: 48px; }
  .footer-inner { min-height: 76px; flex-wrap: wrap; padding: 17px 0; }.footer-inner p { order: 3; flex-basis: 100%; }.back-top { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Subtle motion for the SM mark and its orbit */
.orbit-ring { animation: orbit-drift 24s linear infinite; }
.orbit-ring::before { animation: orbit-drift 18s linear infinite reverse; }
.orbit-ring::after { animation: orbit-drift 13s linear infinite; }
.orbit-core { animation: core-float 4.5s ease-in-out infinite, core-glow 3.5s ease-in-out infinite alternate; }
.orbit-core span { transform-origin: 50% 50%; animation: sparkle-turn 8s linear infinite, sparkle-glow 2s ease-in-out infinite alternate; }
@keyframes orbit-drift { to { transform: rotate(360deg); } }
@keyframes core-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes core-glow { from { box-shadow: 0 0 35px rgba(97, 207, 176, .1); } to { box-shadow: 0 0 65px rgba(97, 207, 176, .27); } }
@keyframes sparkle-turn { to { rotate: 360deg; } }
@keyframes sparkle-glow { from { color: var(--peach); text-shadow: 0 0 0 transparent; } to { color: #ffe0b7; text-shadow: 0 0 12px rgba(255, 184, 153, .8); } }


/* Warm, cinematic direction for Team 18 Studios */
:root {
  color-scheme: dark;
  --bg: #11100e;
  --bg-soft: #191714;
  --surface: #211e19;
  --surface-hover: #2a251e;
  --text: #f4efe6;
  --muted: #b4aa9a;
  --line: rgba(229, 205, 166, .16);
  --mint: #e7ad68;
  --mint-dark: #4a3320;
  --peach: #f1d4a9;
  --font-display: 'Space Grotesk', sans-serif;
}

html { background: var(--bg); }
body { background: var(--bg); }
.site-header {
  background:
    radial-gradient(ellipse at 78% 48%, rgba(143, 91, 42, .2), transparent 38%),
    radial-gradient(ellipse at 8% 3%, rgba(98, 70, 43, .18), transparent 42%),
    var(--bg);
}
.site-header::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  pointer-events: none;
  opacity: .13;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.site-header::after { border-color: rgba(231, 173, 104, .1); }
.nav, .hero { z-index: 1; }
.nav-links .nav-contact { border-color: rgba(231, 173, 104, .48); }
.hero-kicker { color: #d5c6ae; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.hero h1 em { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }
.hero-orbit {
  border: 1px solid rgba(231, 173, 104, .13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 81, 40, .12), rgba(18, 16, 13, .04) 68%, transparent 69%);
}
.orbit-ring { border-color: rgba(231, 173, 104, .32); box-shadow: 0 0 85px rgba(170, 112, 55, .12), inset 0 0 70px rgba(170, 112, 55, .08); }
.orbit-ring::before, .orbit-ring::after { border-color: rgba(241, 212, 169, .19); }
.orbit-ring::before { border-style: dashed; }
.orbit-core { border-color: rgba(241, 212, 169, .54); background: radial-gradient(circle at 35% 30%, #6b4930, #211a14 72%); color: #f4e6cf; }
.orbit-label { color: var(--peach); }
.scroll-cue span { background: var(--mint); }
.section-title span, .hero h1 span { color: var(--mint); }
.about-section, .portfolio-section { background: var(--bg-soft); }
.about-visual::before { border-color: rgba(231, 173, 104, .58); }
.about-visual img { filter: saturate(.88) contrast(1.04); }
.image-caption { border-color: rgba(231, 173, 104, .28); }
.tab-link.active, .tab-link:hover { color: var(--peach); }
.tab-link::after { background: var(--mint); }
.service-card { background: linear-gradient(145deg, rgba(43,36,27,.9), rgba(26,23,19,.96)); }
.service-card:hover { border-color: rgba(231, 173, 104, .55); background: linear-gradient(145deg, #30271d, #211d17); }
.service-icon { border-color: rgba(231,173,104,.28); background: rgba(231,173,104,.08); }
.work-card { background: #211e19; }
.work-card::after { background: linear-gradient(transparent 12%, rgba(10,8,6,.87)); }
.work-card img { filter: saturate(.9); }
.work-card:hover img { filter: saturate(1.08); }
.work-overlay > span { color: var(--peach); }
.work-overlay a { background: var(--mint); color: #17110b; }
.contact-section { background: radial-gradient(ellipse at 90% 85%, rgba(125, 76, 35, .15), transparent 40%); }
.contact-form { background: rgba(33,30,25,.78); }
.contact-form input, .contact-form textarea { background: #151310; }
.contact-detail i, .social-links a:hover { color: var(--mint); }
.social-links a:hover { border-color: var(--mint); }
:focus-visible { outline-color: var(--peach); }
@keyframes core-glow {
  from { box-shadow: 0 0 35px rgba(190, 128, 64, .12); }
  to { box-shadow: 0 0 65px rgba(214, 151, 81, .3); }
}
@media (max-width: 620px) {
  .nav-links { background: #1a1713; }
}


/* New midnight violet studio palette */
:root {
  color-scheme: dark;
  --bg: #100e17;
  --bg-soft: #181522;
  --surface: #211d2e;
  --surface-hover: #2a2440;
  --text: #f4f0fc;
  --muted: #b3acc3;
  --line: rgba(206, 185, 255, .16);
  --mint: #c5a2ff;
  --mint-dark: #3c2b59;
  --peach: #ff927d;
}

.site-header {
  background:
    radial-gradient(ellipse at 78% 48%, rgba(105, 70, 160, .25), transparent 40%),
    radial-gradient(ellipse at 9% 3%, rgba(49, 70, 121, .22), transparent 43%),
    var(--bg);
}
.site-header::after { border-color: rgba(197, 162, 255, .12); }
.nav-links .nav-contact { border-color: rgba(197, 162, 255, .48); }
.hero-kicker { color: #d6c9ee; }
.button-primary { color: #1a1327; }
.button-primary:hover { background: #d5bcff; }
.section-title span, .hero h1 span { color: var(--mint); }
.about-section, .portfolio-section { background: var(--bg-soft); }
.about-visual::before { border-color: rgba(197, 162, 255, .58); }
.image-caption { border-color: rgba(197, 162, 255, .28); }
.tab-link.active, .tab-link:hover { color: var(--mint); }
.service-card { background: linear-gradient(145deg, rgba(43,36,61,.92), rgba(25,22,36,.97)); }
.service-card:hover { border-color: rgba(197, 162, 255, .56); background: linear-gradient(145deg, #302746, #211d2e); }
.service-icon { border-color: rgba(197,162,255,.28); background: rgba(197,162,255,.08); }
.work-card { background: #201c2b; }
.work-overlay > span { color: var(--peach); }
.work-overlay a { background: var(--mint); color: #1a1327; }
.contact-section { background: radial-gradient(ellipse at 90% 85%, rgba(102, 65, 155, .18), transparent 42%); }
.contact-form { background: rgba(33,29,46,.8); }
.contact-form input, .contact-form textarea { background: #14111e; }
.social-links a:hover { border-color: var(--mint); color: var(--mint); }
:focus-visible { outline-color: var(--peach); }

/* A floating, dimensional camera replaces the orbit graphic */
.camera-scene {
  position: absolute;
  top: 50%;
  right: 1%;
  width: min(37vw, 440px);
  aspect-ratio: 1.22;
  perspective: 950px;
  transform: translateY(-46%);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.32));
}
.camera-scene::before {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(153,112,228,.22), rgba(90,63,145,.1) 48%, transparent 72%);
  content: '';
  filter: blur(12px);
}
.camera-object {
  position: absolute;
  inset: 12% 3% 16%;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-20deg) rotateZ(-3deg);
  animation: camera-float 6s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.2,.75,.25,1);
}
.camera-scene:hover .camera-object { transform: rotateX(2deg) rotateY(-10deg) rotateZ(1deg) translateY(-5px); }
.camera-body {
  position: absolute;
  top: 25%;
  left: 7%;
  width: 84%;
  height: 57%;
  border: 1px solid rgba(237,224,255,.35);
  border-radius: 28px 30px 32px 24px;
  background: linear-gradient(150deg, #49415b 0%, #292438 40%, #171522 100%);
  box-shadow: 12px 17px 0 -3px #17131f, 25px 34px 30px rgba(0,0,0,.35), inset 0 2px 1px rgba(255,255,255,.16);
  transform: translateZ(16px);
}
.camera-body::after {
  position: absolute;
  top: 12px;
  right: -21px;
  bottom: 15px;
  width: 22px;
  border: 1px solid rgba(237,224,255,.18);
  border-radius: 0 12px 13px 0;
  background: linear-gradient(90deg, #211d2d, #13111b);
  content: '';
  transform: skewY(-5deg) translateZ(-9px);
}
.camera-hump {
  position: absolute;
  top: -18px;
  left: 17%;
  width: 31%;
  height: 33px;
  border: 1px solid rgba(237,224,255,.28);
  border-radius: 9px 11px 2px 2px;
  background: linear-gradient(145deg, #504761, #282335);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.16);
  transform: translateZ(18px);
}
.camera-viewfinder {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 17%;
  height: 11%;
  border: 1px solid rgba(237,224,255,.32);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(145deg, #322d40, #16141f);
  transform: translateZ(25px);
}
.camera-flash {
  position: absolute;
  top: 12%;
  right: 13%;
  width: 11%;
  height: 9%;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  background: linear-gradient(135deg, #e9dfff, #85779e 55%, #42394f);
  box-shadow: 0 0 24px rgba(197,162,255,.2);
  transform: translateZ(23px);
}
.camera-brand {
  position: absolute;
  right: 9%;
  bottom: 14%;
  color: #d2c7e6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.2;
  text-align: right;
  transform: translateZ(23px);
}
.camera-brand b { color: var(--peach); }
.camera-lens {
  position: absolute;
  top: 50%;
  left: 43%;
  display: grid;
  width: 48%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(244,234,255,.42);
  border-radius: 50%;
  background: linear-gradient(145deg, #625a70, #211d2a 32%, #100f17 78%);
  box-shadow: 0 9px 0 -3px #17131f, 0 18px 24px rgba(0,0,0,.42), inset 0 2px 2px rgba(255,255,255,.26);
  transform: translate(-50%,-50%) translateZ(45px);
}
.camera-lens::before, .camera-lens::after {
  position: absolute;
  border: 1px solid rgba(222,208,255,.27);
  border-radius: 50%;
  content: '';
}
.camera-lens::before { inset: 8%; box-shadow: inset 0 0 0 5px rgba(10,9,15,.35); }
.camera-lens::after { inset: 18%; border-color: rgba(197,162,255,.38); }
.lens-glass {
  position: relative;
  display: grid;
  width: 58%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(211,194,255,.48);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(197,162,255,.65), transparent 15%), radial-gradient(circle at 50% 48%, #090b14 4%, #29304a 28%, #171420 58%, #08080d 72%);
  box-shadow: inset 0 0 15px rgba(146,118,214,.45), 0 0 22px rgba(143,107,225,.22);
  animation: lens-shimmer 4s ease-in-out infinite alternate;
}
.lens-glass span {
  color: rgba(246,239,255,.76);
  font-family: var(--font-display);
  font-size: clamp(17px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: -.1em;
  text-shadow: 0 0 14px rgba(197,162,255,.8);
}
.camera-caption {
  position: absolute;
  right: 4%;
  bottom: 8%;
  color: #d8c9f1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .23em;
}
@keyframes camera-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -11px; }
}
@keyframes lens-shimmer {
  from { box-shadow: inset 0 0 12px rgba(146,118,214,.32), 0 0 15px rgba(143,107,225,.15); }
  to { box-shadow: inset 0 0 19px rgba(146,118,214,.58), 0 0 27px rgba(143,107,225,.35); }
}
.work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-card:nth-child(1) img { object-position: center 22%; }
.work-card:nth-child(2) img { object-position: center 43%; }
.work-card:nth-child(3) img { object-position: center 63%; }
.work-card:nth-child(4) img { object-position: center 80%; }
@media (max-width: 850px) {
  .camera-scene { right: -3%; width: min(41vw, 340px); opacity: .85; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .camera-scene { top: auto; right: -45px; bottom: 58px; width: min(68vw, 260px); opacity: .58; transform: none; }
  .camera-caption { right: 12%; bottom: 3%; font-size: 7px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .work-card { aspect-ratio: .78; }
  .work-overlay { right: 11px; bottom: 12px; left: 11px; }
  .work-overlay h3 { max-width: calc(100% - 24px); font-size: 14px; }
  .work-overlay > span { font-size: 7px; letter-spacing: .08em; }
  .work-overlay a { width: 30px; height: 30px; font-size: 11px; }
}


/* Mobile layout and motion refinements */
@media (max-width: 620px) {
  .container { width: calc(100% - 36px); }
  .nav { display: flex; flex-wrap: wrap; min-height: 72px; }
  .menu-toggle { flex: 0 0 42px; transition: color .2s, background .2s, transform .2s; }
  .menu-toggle:hover { color: var(--mint); transform: scale(1.04); }
  .nav-links {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    order: 3;
    flex: 0 0 100%;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    margin: 0;
    padding: 0 16px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #1b1728;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px);
    transition: max-height .35s ease, margin .3s ease, padding .3s ease, opacity .22s ease, transform .3s ease, border-color .3s ease;
  }
  .nav-links.open {
    max-height: 380px;
    margin: 10px 0 14px;
    padding: 8px 16px;
    border-color: var(--line);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { padding: 11px 3px; font-size: 14px; }
  .nav-links .nav-contact { margin: 8px 0; padding: 9px 13px; }
  .hero {
    min-height: calc(100svh - 72px);
    padding: clamp(54px, 10svh, 88px) 0 132px;
  }
  .hero h1 { max-width: 100%; font-size: clamp(35px, 10vw, 54px); line-height: 1.08; letter-spacing: -.06em; overflow-wrap: normal; }
  .hero-kicker { margin-top: 21px; font-size: 10px; letter-spacing: .13em; }
  .eyebrow { font-size: 9px; letter-spacing: .14em; }
  .hero-description { max-width: 34ch; margin-top: 17px; font-size: 14px; line-height: 1.65; }
  .hero-actions { gap: 15px; margin-top: 22px; }
  .camera-scene { right: -48px; bottom: 42px; width: min(62vw, 235px); opacity: .3; z-index: 0; pointer-events: none; }
  .hero-copy { z-index: 2; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .hero h1 { font-size: clamp(33px, 9.5vw, 38px); }
  .hero-actions .button { min-height: 46px; padding: 0 17px; }
}

/* Gentle entrance reveals for sections and portfolio cards */
body.has-motion .motion-item {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .65s ease, translate .65s cubic-bezier(.2,.75,.25,1);
}
body.has-motion .motion-item.in-view { opacity: 1; translate: 0 0; }
body.has-motion .service-card.in-view,
body.has-motion .work-card.in-view { animation: card-arrive .58s cubic-bezier(.2,.75,.25,1) both; }
body.has-motion .work-card:nth-child(2).in-view { animation-delay: .07s; }
body.has-motion .work-card:nth-child(3).in-view { animation-delay: .14s; }
body.has-motion .work-card:nth-child(4).in-view { animation-delay: .21s; }
.hero-copy > .eyebrow, .hero-copy > .hero-kicker, .hero-copy > h1,
.hero-copy > .hero-description, .hero-copy > .hero-actions { animation: hero-arrive .72s cubic-bezier(.2,.75,.25,1) both; }
.hero-copy > .hero-kicker { animation-delay: .08s; }
.hero-copy > h1 { animation-delay: .16s; }
.hero-copy > .hero-description { animation-delay: .24s; }
.hero-copy > .hero-actions { animation-delay: .32s; }
.camera-object { will-change: transform, translate; }
.service-card, .work-card { transition: transform .35s cubic-bezier(.2,.75,.25,1), border-color .35s, box-shadow .35s; }
.service-card:hover, .work-card:hover { box-shadow: 0 18px 45px rgba(0,0,0,.2); }
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes card-arrive {
  from { opacity: 0; translate: 0 16px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.has-motion .motion-item,
  body.has-motion .motion-item.in-view { opacity: 1 !important; translate: none !important; transition: none !important; animation: none !important; }
  .hero-copy > *, .camera-object, .lens-glass { animation: none !important; }
}


/* Circular presentation for the transparent Team 18 logo PNG */
.about-visual {
  isolation: isolate;
  width: min(100%, 370px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
}
.about-visual::before {
  inset: -10px;
  border: 1px solid rgba(197, 162, 255, .65);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 34px rgba(154, 112, 225, .12);
}
.about-visual::after {
  position: absolute;
  z-index: -1;
  inset: -21px;
  border: 1px dashed rgba(197, 162, 255, .28);
  border-radius: 50%;
  content: '';
  pointer-events: none;
  animation: logo-ring-turn 42s linear infinite;
}
.about-visual img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  padding: clamp(8px, 1.6vw, 17px);
  border: 1px solid rgba(197, 162, 255, .2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #241c36, #100e17 72%);
  object-fit: contain;
  filter: none;
  box-shadow: 0 22px 60px rgba(0,0,0,.28), inset 0 0 35px rgba(197,162,255,.07);
}
.image-caption {
  right: 50%;
  bottom: -34px;
  white-space: nowrap;
  transform: translateX(50%);
}
@keyframes logo-ring-turn { to { rotate: 360deg; } }
@media (max-width: 620px) {
  .about-visual { width: min(76vw, 320px); max-width: none; margin: 0 auto 10px; }
  .about-visual::before { inset: -8px; }
  .about-visual::after { inset: -17px; }
  .about-visual img { aspect-ratio: 1; }
  .image-caption { bottom: -29px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-visual::after { animation: none !important; }
}


/* Our members */
.members-section { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }
.member-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.member-card {
  min-width: 0;
  min-height: 220px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(37,32,53,.9), rgba(24,21,34,.96));
  transition: transform .32s cubic-bezier(.2,.75,.25,1), border-color .3s, box-shadow .3s;
}
.member-card:hover { transform: translateY(-6px); border-color: rgba(197,162,255,.5); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.member-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.member-avatar {
  display: grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(197,162,255,.45);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #55417a, #241c35 67%, #181522);
  box-shadow: inset 0 1px 8px rgba(255,255,255,.08), 0 0 22px rgba(153,112,228,.12);
  color: #f2eaff;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.07em;
}
.member-social {
  display: grid;
  width: 39px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(197,162,255,.07);
  color: var(--peach);
  font-size: 17px;
  transition: transform .25s, color .25s, background .25s;
}
.member-social:hover { transform: translateY(-2px) scale(1.06); background: rgba(197,162,255,.16); color: var(--mint); }
.member-card h3 { font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.member-position { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.member-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; list-style: none; }
.member-roles li { padding: 4px 8px; border: 1px solid rgba(197,162,255,.14); border-radius: 999px; background: rgba(197,162,255,.06); color: #d6cbe9; font-size: 10px; line-height: 1.35; }
@media (max-width: 950px) { .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .members-section .section-heading { margin-bottom: 26px; }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .member-card { min-height: 195px; padding: 16px; }
  .member-top { margin-bottom: 16px; }
  .member-avatar { width: 54px; font-size: 18px; }
  .member-social { width: 35px; font-size: 15px; }
  .member-card h3 { font-size: 15px; }
}
@media (max-width: 350px) { .member-grid { grid-template-columns: 1fr; } }

.footer-inner p.footer-copyright { color: #8d849d; font-size: 10px; }


.portfolio-more-wrap { display: flex; justify-content: center; margin-top: 34px; }
.portfolio-more {
  display: inline-flex;
  min-width: 152px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 21px;
  border: 1px solid rgba(197,162,255,.52);
  border-radius: 999px;
  background: rgba(197,162,255,.08);
  color: #eee5ff;
  font-size: 13px;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.portfolio-more i { color: var(--peach); font-size: 12px; transition: transform .25s ease; }
.portfolio-more:hover { transform: translateY(-3px); border-color: var(--mint); background: rgba(197,162,255,.16); box-shadow: 0 10px 28px rgba(110,78,166,.2); }
.portfolio-more:hover i { transform: translate(2px,-2px); }