/* assets/mag28-logo-TM.css */
/* Each SVG contains its own contrasting TM mark. */
.brand-mark.brand-mark{aspect-ratio:2180/260;background:url("assets/mag28-logo-gold-TM.svg") center/100% 100% no-repeat}
.brand-mark.brand-mark::before{content:none}
.hero-logo-face .brand-mark,.hero-mini-logo .brand-mark{background-image:url("assets/mag28-logo-white-gold-TM.svg")}
.hero h1 .hero-mini-logo .brand-mark{aspect-ratio:2180/260}

/* mobile-header.css */
/* Independent mobile header handle; desktop stays unchanged. */
@media(max-width:800px){
  body>button.mobile-header-toggle{display:flex!important;position:fixed;inset:0 auto auto 50%;transform:translateX(-50%);width:48px;height:25.5px;align-items:center;justify-content:center;padding:0;margin:0;background:#f1f0eb;color:#000;border:1px solid #000;border-radius:0 0 6px 6px;box-shadow:none;opacity:1!important;visibility:visible!important;z-index:90;pointer-events:auto;appearance:none}
  body>button.mobile-header-toggle.is-open{top:var(--header-h)}
  body>button.mobile-header-toggle .mobile-header-dots{display:grid;grid-template-columns:repeat(3,3px);grid-template-rows:repeat(2,3px);gap:3px;transform:none}
  .mobile-header-dots i{display:block;width:3px;height:3px;border-radius:50%;background:#000}
  .site-header.is-mobile-open{transform:translateY(0);visibility:visible;pointer-events:auto}
  .full-menu .menu-links a{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:start;line-height:1.35;padding-block:8px}
  .full-menu .menu-links a em{width:auto}
}

/* language-menu.css */
/* Hover opens one white tab: message on the left, spinning globe on the right. */
.language-trigger:lang(es){--language-hover-width:310px}
.language-trigger[hidden]{display:none!important}
.language-trigger{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:110;display:flex;align-items:center;justify-content:center;width:48px;height:44px;padding:4px;box-sizing:border-box;background:#fff;color:#000;border:.5px solid rgba(8,8,8,.3);border-left:0;border-radius:0 6px 6px 0;cursor:pointer;overflow:hidden;transform-origin:left center;transition:width 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1),color .5s ease}
.language-globe{position:absolute;right:6px;top:4px;display:block;width:34px;height:34px;flex-shrink:0;transform:perspective(160px) rotateY(0);transform-origin:center;transition:transform 1.3s ease}
.language-tooltip{position:absolute;left:14px;top:50%;transform:translateY(-50%);padding:0;white-space:nowrap;font:500 13px/1.4 Inter,Arial,sans-serif;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s ease}
.language-trigger:focus-visible,.language-panel button:focus-visible{outline:2px solid #b38b34;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.language-trigger:focus-visible{width:var(--language-hover-width,250px);transform:translateY(-50%) scale(1.71);color:#b38b34}@media (hover: hover) and (pointer: fine){.language-trigger:hover{width:var(--language-hover-width,250px);transform:translateY(-50%) scale(1.71);color:#b38b34}}.language-trigger:focus-visible .language-globe{transform:perspective(160px) rotateY(360deg)}@media (hover: hover) and (pointer: fine){.language-trigger:hover .language-globe{transform:perspective(160px) rotateY(360deg)}}.language-trigger:focus-visible .language-tooltip{opacity:1;visibility:visible;transition-delay:.4s}@media (hover: hover) and (pointer: fine){.language-trigger:hover .language-tooltip{opacity:1;visibility:visible;transition-delay:.4s}}
}
@media(max-width:800px){
 header .language-trigger,header .language-trigger:focus-visible{position:relative;inset:auto;transform:none;width:40px;height:44px;padding:7px;background:transparent;color:#000;border:0;border-radius:0;overflow:visible;flex-shrink:0;transition:none}
 header .language-trigger .language-globe{position:static;width:28px;height:28px;transform:none;transition:none}
 header .language-trigger .language-tooltip{display:none}
 .site-header{grid-template-columns:auto minmax(0,1fr) 40px 48px;column-gap:4px}
 .site-header .logo{grid-column:1;grid-row:1}
 .site-header .header-contact{position:static;grid-column:2;grid-row:1;justify-self:center;transform:none;font-size:9px;letter-spacing:.02em}
 .site-header .language-trigger{grid-column:3;grid-row:1}
 .site-header .menu-trigger{grid-column:4;grid-row:1;width:48px;height:44px}
 .about-header .language-trigger{order:1}
}
@media(prefers-reduced-motion:reduce){.language-trigger,.language-globe,.language-tooltip{transition:none}.language-trigger:focus-visible .language-globe{transform:none}@media (hover: hover) and (pointer: fine){.language-trigger:hover .language-globe{transform:none}}}
.language-panel{position:fixed;inset:0 auto 0 0;width:26.5vw;max-width:520px;height:100dvh;max-height:none;margin:0;padding:clamp(28px,3vw,48px);border:0;background:#f1f0eb;color:#080808;overflow:auto;box-sizing:border-box;transform:translateX(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
.language-panel.is-open{transform:translateX(0)}
.language-panel::backdrop{background:#0003;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.language-close{display:grid;place-items:center;width:40px;height:40px;margin:-8px 0 0 -8px;padding:0;border:0;background:none;color:#080808;cursor:pointer}
.language-close svg{width:30px;height:30px;stroke-width:1.3}
.language-caption{margin:clamp(36px,8vh,90px) 0 32px;font:500 11px/1.5 Inter,Arial,sans-serif;letter-spacing:.2em}
.language-caption::before{content:'';display:block;width:40px;height:2px;background:#b38b34;margin-bottom:14px}
.language-options{display:flex;flex-direction:column}
.language-option{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:clamp(100px,18vh,180px);padding:20px 0 20px 16px;text-align:left;background:none;border:0;border-bottom:1px solid #08080820;color:#080808;font:400 clamp(22px,2.7vw,48px)/1.15 Inter,Arial,sans-serif;letter-spacing:-.05em;cursor:pointer}
.language-option img{flex-shrink:0;width:72px;height:44px;object-fit:cover;border:1px solid #08080820;margin-left:auto}
@media(max-width:1100px){.language-panel{width:38vw}.language-option{font-size:clamp(22px,3.6vw,40px)}}
@media(max-width:800px){.language-panel{width:100vw;max-width:none;padding:28px}.language-option{font-size:clamp(25px,7.6vw,42px);min-height:18vh}.language-option img{width:48px;height:32px}.language-caption{margin-top:48px}}
@media(prefers-reduced-motion:reduce){.language-panel{transition:none}}

/* Lift the existing cursor above the modal without moving its viewport coordinates. */
.target-cursor:popover-open{position:fixed;inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none}


/* Shared Close size, right alignment and left-to-right gold underline. */
.language-panel .language-close{display:flex;align-items:center;justify-content:flex-start;position:relative;gap:21px;width:max-content;height:70px;margin:0 0 0 auto;padding:0;background:none;border:0;color:#080808;font:400 19.25px/1.4 Inter,Arial,sans-serif;letter-spacing:.12em;transition:color .25s ease}.language-panel .language-close:focus-visible{color:#b38b34}@media (hover: hover) and (pointer: fine){.language-panel .language-close:hover{color:#b38b34}}
.language-panel .language-close::after{content:'';position:absolute;left:0;bottom:8px;width:100%;height:1px;background:#b38b34;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}.language-panel .language-close:focus-visible::after{transform:scaleX(1)}@media (hover: hover) and (pointer: fine){.language-panel .language-close:hover::after{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.language-panel .language-close,.language-panel .language-close::after{transition:none}}
/* Match the main menu's language-label hover movement. */
.language-option>span{display:inline-block;transition:transform .3s ease,color .25s ease}.language-option:focus-visible>span{transform:translateX(12px);color:#b38b34}@media (hover: hover) and (pointer: fine){.language-option:hover>span{transform:translateX(12px);color:#b38b34}}
@media(prefers-reduced-motion:reduce){.language-option>span{transition:none}}

/* Preserve the handle's viewport position when promoted above project dialogs. */
.language-trigger:popover-open{right:auto;bottom:auto;margin:0;max-width:none;max-height:none;overflow:hidden}
.language-trigger::backdrop{background:transparent;pointer-events:none}

.language-option[aria-pressed=true]>span{color:#b38b34}.language-option[aria-pressed=true]:focus-visible>span{transform:none}@media (hover: hover) and (pointer: fine){.language-option[aria-pressed=true]:hover>span{transform:none}}


/* The language handle uses a black cursor in every page and modal. */
html.is-language-handle-hover .target-cursor{color:#080808!important}

/* Mobile language controls respond to taps without hover expansion or tooltips. */
@media(max-width:800px){
.language-trigger,.language-trigger:hover,.language-trigger:focus-visible{width:48px;transform:translateY(-50%);color:#000;transition:none}
header .language-trigger,header .language-trigger:hover,header .language-trigger:focus-visible{width:40px;transform:none}
.language-trigger .language-tooltip{display:none!important}
.language-trigger .language-globe,.language-trigger:hover .language-globe,.language-trigger:focus-visible .language-globe{transform:none;transition:none}
.language-option>span,.language-option:hover>span,.language-option:focus-visible>span{transform:none;transition:none;color:inherit}
.language-option[aria-pressed=true]>span{color:#b38b34}
.language-panel .language-close:hover{color:#080808}
.language-panel .language-close:hover::after{transform:scaleX(0)}
}
.reader-mobile-brand{display:none}
.spiral-reader-header{display:contents}
@media(max-width:800px){
.about-reader header.reader-mobile-header,.service-spiral header.reader-mobile-header{position:absolute;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:minmax(0,1fr) auto 40px;align-items:center;gap:16px;width:auto;height:101px;padding:14px 5vw;border:0;border-top:3px solid #b08b2e;background:#f1f0eb;color:#080808;pointer-events:auto}
.reader-mobile-header .reader-mobile-brand{display:block;grid-column:1;grid-row:1;min-width:0}
.reader-mobile-brand .brand-mark{width:130px;max-width:100%}
.reader-mobile-brand .brand-mark::before{background:linear-gradient(90deg,#090909 0 66%,#b08b2e 66% 100%)}
.reader-mobile-header .about-reader-close,.reader-mobile-header .spiral-close{position:relative;inset:auto;grid-column:2;grid-row:1;font:400 19.25px/1.4 Inter,Arial,sans-serif;letter-spacing:.12em;gap:21px;min-height:70px;padding:0;color:#080808}
.reader-mobile-header .language-trigger{grid-column:3;grid-row:1}
.about-reader .about-reader-nav,.service-spiral .spiral-steps{top:112px}
.about-reader .about-reader-chapter{padding-top:170px}
.about-reader .has-long-content .about-reader-chapter-heading{top:150px}
}
/* phone-cursor.css */
.target-phone-message{display:none;position:absolute;left:0;top:-48px;transform:translate(-50%,-50%);color:#ff59bf;font:400 clamp(25.2px,2.016vw,33.6px)/1.8 Consolas,'Courier New',monospace;font-style:normal;letter-spacing:.015em;white-space:nowrap;align-items:center;gap:16.8px;pointer-events:none}
.target-phone-message svg{width:42px;height:42px;flex:none}
.target-cursor.is-phone-message .target-phone-message{display:flex;animation:phone-cursor-type 1.3s steps(33,end) both}
.target-cursor.is-phone-message .target-contact-message{display:none}
.target-cursor.is-phone-message .target-dot::before,.target-cursor.is-phone-message .target-ring::before{opacity:0}
@keyframes phone-cursor-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media(max-width:650px){.target-phone-message{font-size:18.2px;gap:9.8px}.target-phone-message svg{width:32.2px;height:32.2px}}
@media(prefers-reduced-motion:reduce){.target-cursor.is-phone-message .target-phone-message{animation:none}}
.retained-action-hit-area{position:fixed;z-index:25;display:block;border:0;padding:0;border-radius:140px;background:transparent;cursor:pointer}
.global-phone a.is-radius-hover{background-size:100% 100%;color:#fff;text-decoration:none;transform:scale(1.3)}
.contact .contact-link.conversation-button.is-radius-hover{background-image:linear-gradient(#f1f0eb,#f1f0eb);background-size:100% 100%;color:#000;scale:1.3}

/* legal-documents.css */
.legal-reader { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 60vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; background: #f1f0eb; color: #080808; box-shadow: -16px 0 70px #0002; overflow: hidden; }
.legal-reader[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.legal-reader::backdrop { background: #1113; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.legal-reader .legal-reader-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(20px, 3vw, 48px); border: 0; border-bottom: 1px solid #b08b2e44; }
.legal-reader-header h2 { margin: 0; font: 500 clamp(16px, 1.5vw, 23px)/1.3 Inter, Arial, sans-serif; letter-spacing: -.02em; }
.legal-reader-close, .legal-reader-download { position: relative; display: inline-flex; align-items: center; gap: 21px; width: max-content; padding: 12px 0; border: 0; border-radius: 0; background: none; color: #080808; text-decoration: none; font: 400 19.25px/1.4 Inter, Arial, sans-serif; letter-spacing: .12em; cursor: pointer; transition: color .25s; }
.legal-reader-close::after, .legal-reader-download::after { content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 1px; background: #b08b2e; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.legal-reader-close:focus-visible, .legal-reader-download:focus-visible { color: #b08b2e; outline: 2px solid #b08b2e; outline-offset: 4px; }
.legal-reader-close:focus-visible::after, .legal-reader-download:focus-visible::after { transform: scaleX(1); }
.legal-reader-pages { overflow: auto; overscroll-behavior: contain; padding: 24px clamp(16px, 2.5vw, 40px); scrollbar-width: thin; scrollbar-color: #b08b2e #f1f0eb; }
.legal-reader-pages::-webkit-scrollbar { width: 6px; }
.legal-reader-pages::-webkit-scrollbar-thumb { background: #b08b2e; border-radius: 6px; }
.legal-reader-pages::-webkit-scrollbar-track { background: #f1f0eb; }
.legal-reader-pages::-webkit-scrollbar-button { display: none; }
.legal-pdf-page { position: relative; width: 100%; aspect-ratio: 210 / 297; margin: 0 auto 24px; background: white; box-shadow: 0 3px 18px #0001; overflow: hidden; }
.legal-pdf-page canvas { display: block; width: 100%; height: 100%; }
.legal-pdf-text { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; }
.legal-pdf-text :is(span, br) { position: absolute; color: transparent; white-space: pre; transform-origin: 0 0; cursor: text; }
.legal-pdf-text ::selection { background: #b08b2e55; color: transparent; }
.legal-reader .legal-reader-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0; padding: 12px clamp(20px, 3vw, 48px); border: 0; border-top: 1px solid #b08b2e44; background: #f1f0eb; }
.legal-reader-count { font: 400 13px/1.4 Consolas, monospace; letter-spacing: .1em; color: #777; }
.legal-reader-download { font-size: 13px; letter-spacing: .04em; }
.legal-reader-status { margin: 24px 0; color: #777; font: 400 14px/1.6 Inter, Arial, sans-serif; }
.legal-reader .target-cursor { color: #b08b2e !important; }
@media (hover: hover) and (pointer: fine) {
  .legal-reader-close:hover, .legal-reader-download:hover { color: #b08b2e; background: none; text-decoration: none; }
  .legal-reader-close:hover::after, .legal-reader-download:hover::after { transform: scaleX(1); }
}
@media (max-width: 800px) { .legal-reader { width: 100vw; } .legal-reader-close { font-size: 16px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .legal-reader *, .legal-reader *::after { transition: none !important; } }

.legal-reader-brand{display:none}
@media(max-width:800px){
.legal-reader .legal-reader-header{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;column-gap:16px;row-gap:12px;padding:14px 5vw;border-top:3px solid #b08b2e}
.legal-reader-brand{display:block;grid-column:1;grid-row:1;min-width:0}
.legal-reader-brand .brand-mark{width:130px;max-width:100%}
.legal-reader-brand .brand-mark::before{background:linear-gradient(90deg,#090909 0 66%,#b08b2e 66% 100%)}
.legal-reader-header .legal-reader-close{grid-column:2;grid-row:1;font-size:19.25px;gap:21px;min-height:70px;padding:0}
.legal-reader-header .language-trigger{grid-column:3;grid-row:1}
.legal-reader-header h2{grid-column:1/-1;grid-row:2;font-size:16px}
}
/* about-reader.css */
.about-reader { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; background: #f1f0eb; color: #080808; overflow: hidden; }
.about-reader { background: transparent; }
.about-reader::backdrop { background: #f1f0eb; }
.about-reader-growing-portrait { position: fixed; z-index: 4; display: block; object-fit: cover; object-position: center; filter: grayscale(1); pointer-events: none; }
.about-reader-opening .about-reader-visual { background: transparent; border-color: transparent; }
.about-reader-opening .about-reader-visual canvas, .about-reader-opening .about-reader-visual-label { visibility: hidden; }
.about-reader-scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: 43.5% minmax(0, 1fr); align-items: start; scrollbar-width: none; }
.about-reader-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.about-reader-scroll::-webkit-scrollbar-thumb { background: #b08b2e; border-radius: 6px; }
.about-reader-visual { position: sticky; top: 0; height: 100dvh; min-width: 0; border-right: 1px solid #b08b2e88; overflow: hidden; background: #f1f0eb; }
.about-reader-visual canvas { display: block; width: 100%; height: 100%; }
.about-decompile-complete { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(12px, 3vw, 56px); }
.about-decompile-complete[hidden] { display: none; }
.about-complete-code { width: 25ch; max-width: 100%; font: 400 clamp(12px, 1.5vw, 25px)/1.8 Consolas, 'Courier New', monospace; }
.about-code-comment { color: #777; font-size: .65em; }
.about-code-keyword { color: #ff24bd; }
.about-code-punctuation { color: #1677ff; }
.about-code-message { color: #118d35; }
.is-typed .about-code-message { animation: about-message-blink 2.4s ease-in-out infinite; }
.about-keep-scrolling { transform-origin: left center; transition: color .3s, scale .35s ease; }
.about-keep-scrolling:focus-visible { transform: scale(1.3); }
@media (hover: hover) and (pointer: fine) { .about-keep-scrolling:hover { transform: scale(1.3); } }
@keyframes about-message-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.about-keep-scrolling { position: relative; isolation: isolate; display: inline-block; margin: 20px 0 0; padding: 12px 16px; border: 0; background: linear-gradient(#080808, #080808) left center / 0% 100% no-repeat; color: #b08b2e; font: inherit; text-align: left; cursor: pointer; transition: color .3s, transform .35s ease, background-size .4s cubic-bezier(.22,1,.36,1); }
.about-keep-scrolling:focus-visible { color: #fff; }
.about-keep-scrolling:focus-visible { background-size: 100% 100%; }
@media (hover: hover) and (pointer: fine) {
  .about-keep-scrolling:hover { color: #fff; background-size: 100% 100%; }
}
.about-reader-opening .about-decompile-complete { visibility: hidden; }
@media (max-width: 700px) {
  .about-complete-code { font-size: clamp(7px, 1.75vw, 12px); }
  .about-keep-scrolling { padding: 10px 3px; }
}
@media (prefers-reduced-motion: reduce) { .about-complete-code, .about-code-message { animation: none; } }
.about-reader-visual-label { position: absolute; left: 28px; bottom: 32px; color: #b08b2e; font: 10px/1.8 Consolas, monospace; letter-spacing: .14em; pointer-events: none; }
.about-reader-visual-label span { color: #777; letter-spacing: .05em; }
.about-reader-story { min-width: 0; background: #f1f0eb; }
.about-reader-chapter { display: flex; align-items: center; min-height: 100dvh; padding: 120px clamp(170px, 12vw, 220px) 100px clamp(28px, 3.8vw, 72px); }
.about-reader-chapter-inner { width: 100%; }
.about-reader-chapter.has-long-content { align-items: flex-start; }
.has-long-content .about-reader-chapter-heading { position: sticky; top: 80px; z-index: 1; display: flow-root; background: #f1f0eb; }
.about-reader-kicker { margin: 0 0 26px; color: #b08b2e; font: 500 10px/1.5 Inter, Arial, sans-serif; letter-spacing: .13em; }
.about-reader-chapter h2 { margin: 0 0 32px; font: 400 clamp(32px, 3.4vw, 64px)/1 'Archivo Black', Arial, sans-serif; letter-spacing: -.065em; }
.about-reader-chapter h2 span { color: #b08b2e; }
.about-reader-chapter h2 span { display: inline-block; transform-origin: center; animation: about-number-turn 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .about-reader-chapter h2 span { animation: none; } }
.about-reader-lead { margin: 0 0 24px; font: 400 clamp(23px, 2.3vw, 42px)/1.16 Inter, Arial, sans-serif; letter-spacing: -.045em; }
.about-reader-body { margin: 0; font: 400 clamp(14px, 1.15vw, 20px)/1.55 Inter, Arial, sans-serif; letter-spacing: -.02em; }
.about-reader-cta { display: flex; justify-content: flex-end; margin-top: 24px; }
.about-reader-contact { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 14px 18px; color: #080808; text-decoration: none; font: 500 clamp(16px, 1.15vw, 22px)/1.4 Inter, Arial, sans-serif; background: linear-gradient(#080808, #080808) left center / 0% 100% no-repeat; transform-origin: right center; transition: background-size .35s ease, color .25s ease, transform .35s ease; }
.about-reader-contact span { display: inline-block; transition: transform .3s ease; }
.about-reader-contact:focus-visible { color: #f1f0eb; background-size: 100% 100%; transform: scale(1.3); outline: 2px solid #b08b2e; outline-offset: 4px; }
.about-reader-contact:focus-visible span { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .about-reader-contact:hover { color: #f1f0eb; background-size: 100% 100%; transform: scale(1.3); }
  .about-reader-contact:hover span { transform: translateX(4px); }
}
.about-reader-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; padding-top: 22px; border-top: 1px solid #b08b2e88; }
.about-reader-cards button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; border: 0; background: none; text-align: left; color: #444; cursor: pointer; font: 400 12px/1.45 Inter, Arial, sans-serif; }
.about-card-number { color: #b08b2e; font: 300 34px/1 Inter, Arial, sans-serif; letter-spacing: -.06em; }
.about-reader-cards strong { color: #111; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
.about-card-arrow { font-size: 23px; transition: transform .3s, color .3s; }
.about-reader-chapter-rule { width: 60%; height: 1px; margin-top: 38px; background: #b08b2e88; }
.about-reader-chapter-note { margin-top: 22px; color: #777; font: 10px/1.8 Consolas, monospace; letter-spacing: .09em; }
.about-reader .about-reader-header { position: absolute; top: 0; left: 43.5%; right: 0; z-index: 2; display: flex; align-items: center; gap: 20px; padding: 22px clamp(24px, 3vw, 56px); border: 0; background: #f1f0eb; }
.about-reader-header > span { color: #b08b2e; font: 500 10px/1.5 Inter, Arial, sans-serif; letter-spacing: .1em; white-space: nowrap; }
.about-reader .about-reader-header { justify-content: flex-end; }
.about-reader .about-reader-header { box-sizing: border-box; height: 80px; padding-block: 12px; pointer-events: none; }
.about-reader-header .about-reader-close { pointer-events: auto; }
.about-reader-header > i, .about-reader-footer > i { flex: 1; height: 1px; background: #a9a399; }
.about-reader-close { position: relative; display: inline-flex; align-items: center; gap: 21px; padding: 10px 0; border: 0; background: none; color: #080808; font: 400 19.25px/1.4 Inter, Arial, sans-serif; letter-spacing: .12em; cursor: pointer; transition: color .25s; }
.about-reader-close::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background: #b08b2e; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.about-reader-nav { position: absolute; z-index: 2; top: 145px; right: 24px; display: flex; flex-direction: column; width: clamp(135px, 10vw, 180px); padding: 24px 0 24px 16px; border-left: 1px solid #b08b2e99; }
.about-reader-nav button { position: relative; display: flex; gap: 14px; padding: 10px 0; border: 0; background: none; color: #999; text-align: left; font: 400 12px/1.4 Inter, Arial, sans-serif; cursor: pointer; transition: color .25s; }
.about-reader-nav button[aria-current] { color: #080808; font-weight: 600; }
.about-reader-nav button[aria-current]::before { content: ''; position: absolute; top: 15px; left: -19px; width: 5px; height: 5px; border-radius: 50%; background: #080808; }
.about-reader .about-reader-footer { position: absolute; z-index: 2; bottom: 0; left: 43.5%; right: 0; display: flex; align-items: center; gap: 20px; margin: 0; padding: 24px clamp(24px, 3vw, 56px); border: 0; background: #f1f0eb; }
.about-reader-footer b { font: 400 11px 'Archivo Black', Arial, sans-serif; }
.about-reader-footer > span { color: #666; font: 9px/1.5 Inter, Arial, sans-serif; letter-spacing: .13em; }
.about-reader .target-cursor { color: #b08b2e !important; }
.about-reader button:focus-visible { outline: 2px solid #b08b2e; outline-offset: 5px; }
.about-reader-close:focus-visible { color: #b08b2e; }
.about-reader-close:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .about-reader-close:hover, .about-reader-nav button:hover { color: #b08b2e; }
  .about-reader-close:hover::after { transform: scaleX(1); }
  .about-reader-cards button:hover .about-card-arrow { transform: translateX(8px); color: #b08b2e; }
}
@media (max-width: 1200px) {
  .has-long-content .about-reader-chapter-heading { top: 130px; }
  .about-reader .about-reader-header { height: 130px; align-items: flex-start; padding-top: 22px; }
  .about-reader-scroll { grid-template-columns: 40% minmax(0, 1fr); }
  .about-reader .about-reader-header, .about-reader .about-reader-footer { left: 40%; }
  .about-reader-chapter { padding: 145px 30px 100px; }
  .about-reader-nav { top: 85px; left: calc(40% + 30px); right: 30px; width: auto; flex-direction: row; gap: 18px; padding: 0 0 12px; border-left: 0; border-bottom: 1px solid #b08b2e55; }
  .about-reader-nav button { gap: 6px; font-size: 10px; }
  .about-reader-nav button[aria-current]::before { display: none; }
  .about-reader-cards { gap: 14px; }
  .about-reader-header > i { display: none; }
  .about-reader-header { justify-content: space-between; }
}
@media (max-width: 700px) {
  .has-long-content .about-reader-chapter-heading { top: 120px; }
  .about-reader .about-reader-header { height: 120px; }
  .about-reader-scroll { grid-template-columns: 32% minmax(0, 1fr); }
  .about-reader .about-reader-header, .about-reader .about-reader-footer { left: 32%; padding-inline: 16px; }
  .about-reader-header > span { font-size: 8px; }
  .about-reader-close { font-size: 14px; gap: 8px; }
  .about-reader-nav { left: calc(32% + 16px); right: 16px; gap: 8px; top: 78px; }
  .about-reader-nav button { flex: 1; justify-content: center; font-size: 0; }
  .about-reader-nav button > span { font-size: 12px; }
  .about-reader-chapter { padding: 140px 16px 100px; }
  .about-reader-chapter h2 { font-size: clamp(27px, 5vw, 36px); }
  .about-reader-lead { font-size: 22px; }
  .about-reader-body { font-size: 14px; }
  .about-reader-cards { grid-template-columns: 1fr; gap: 18px; }
  .about-reader-cards button { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
  .about-card-number { grid-row: span 2; font-size: 25px; }
  .about-reader-cards .about-card-arrow { display: none; }
  .about-reader-footer > span { font-size: 7px; }
  .about-reader-visual-label { left: 8px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { .about-reader *, .about-reader *::after { transition: none !important; } }

/* Mobile reader uses the whole viewport for editorial content. */
@media(max-width:800px){
.about-reader-scroll{grid-template-columns:minmax(0,1fr)}
.about-reader-visual,.about-reader-growing-portrait,.about-decompile-complete{display:none!important}
.about-reader .about-reader-header,.about-reader .about-reader-footer{left:0}
.about-reader-nav{left:16px;right:16px}
}

/* service-spiral.css */
.service-spiral { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; margin: 0; border: 0; overflow: hidden; color: #080808; background: transparent; }
.service-spiral::backdrop { background: transparent; backdrop-filter: none; }
.service-spiral.spiral-dark { color: #fff; }
.service-spiral.spiral-dark::backdrop { background: transparent; }
.spiral-dark .spiral-detail-card { background: #080808; }
.spiral-dark .spiral-title-card { background: #f1f0eb; }
.spiral-dark .spiral-title-card { border-right-color: #b08b2e; }
.spiral-dark .spiral-title-card h2 { color: #080808; }
.spiral-dark .spiral-node { fill: #080808; }
.service-spiral[open] { display: grid; grid-template-columns: 16.5% 83.5%; grid-template-rows: minmax(0, 1fr); }
.spiral-title-card, .spiral-detail-card { position: relative; min-width: 0; min-height: 0; height: 100dvh; overflow: hidden; background: #f1f0eb; }
.spiral-title-card { border-right: 1px solid #b08b2e; display: flex; align-items: center; justify-content: center; overflow: hidden;  }
.spiral-title-card h2 { position: absolute; left: 50%; top: 50%; width: 84dvh; writing-mode: horizontal-tb; transform: translate(-50%, -50%) rotate(-90deg); margin: 0; color: #080808; font: 400 min(7.8vw, 13dvh)/.94 'Archivo Black', Arial, sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.spiral-title-card h2 span { display: block; white-space: nowrap; }
.spiral-title-card h2.spiral-title-spacious { letter-spacing: -.025em; line-height: 1.12; }
.spiral-title-card h2 { transition: translate .45s ease-out; }
.spiral-text-motion { transition: translate .45s ease-out; }
.spiral-detail-card { container-type: size; box-shadow: inset 1px 0 0 #b08b2e; }
.spiral-close { position: absolute; z-index: 5; right: 30px; top: 22px; display: flex; gap: 20px; padding: 10px 0; background: none; border: 0; color: inherit; font: 400 18px/1.4 Inter, sans-serif; letter-spacing: .1em; cursor: pointer; }
.spiral-close:hover { color: #b08b2e; }
.spiral-close::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background: #b08b2e; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.spiral-close:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .spiral-close:hover::after { transform: scaleX(1); } }
.spiral-scroll { position: absolute; inset: 0; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; touch-action: pan-y; }
.spiral-scroll::-webkit-scrollbar { display: none; }
.spiral-track { height: 1540dvh; }
.spiral-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; container-type: size; }
.spiral-depth-shade { content: ''; position: absolute; z-index: 2; inset: 0; transform-origin: center top; transform: translateY(69%) scaleY(.31); pointer-events: none; opacity: .38; background: linear-gradient(to bottom, rgba(61,59,51,0), rgba(61,59,51,.32) 35%, rgba(46,44,38,.76)); }
.spiral-hint, .spiral-steps { z-index: 3; }
.spiral-world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.spiral-stage svg, .spiral-copy { position: absolute; inset: 0; width: 100%; height: 100%; }
.spiral-stage svg { overflow: visible; animation: spiral-fade-in 1.4s .45s both; }
.spiral-stage svg { /* Keep the SVG and HTML annotation coordinate systems identical. */ aspect-ratio: auto; }
.spiral-shadow { opacity: .25; pointer-events: none; }
.spiral-shadow use { fill: none; stroke: #85847f; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.spiral-rail-depth use, .spiral-crossbars, .spiral-trail path { fill: none; stroke: #b08b2e; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.spiral-crossbars { stroke-width: .8; opacity: .4; }
.spiral-trail path { stroke: #c6a24b; stroke-width: 3; }
.spiral-axis-fill { fill: url(#spiralGlass); stroke: #b08b2e; stroke-opacity: .22; stroke-width: .7; vector-effect: non-scaling-stroke; }
.spiral-depth-marks { pointer-events: none; }
.spiral-depth-marks path { fill: none; stroke: #b08b2e; stroke-width: .8; opacity: .7; vector-effect: non-scaling-stroke; }
.spiral-depth-marks text { fill: #b08b2e; font: 10px Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 1px; }

.spiral-node { fill: #f1f0eb; stroke: #b08b2e; opacity: .35; transition: opacity .5s; }
.spiral-node.is-active { opacity: 1; }
.spiral-checkpoint-pulse { fill: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spiral-node.is-active .spiral-checkpoint-pulse { animation: spiral-station-pulse 1.4s ease-out infinite; }
@keyframes spiral-station-pulse { from { opacity: .65; transform: scale(.8); } to { opacity: 0; transform: scale(1.9); } }
.spiral-node circle:last-child, .spiral-traveler { fill: #b08b2e; }
.spiral-copy { z-index: 3; transform-origin: 0 0; will-change: transform; pointer-events: none; animation: spiral-fade-in 1.2s .65s both; }
.spiral-copy article { position: absolute; width: 30%; opacity: 0; }
.spiral-copy article::before, .spiral-copy article::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; border-color: #b08b2e; border-style: solid; }
.spiral-copy article::before { top: -18px; left: -22px; border-width: 1px 0 0 1px; }
.spiral-copy article::after { bottom: -20px; right: -22px; border-width: 0 1px 1px 0; }
.spiral-copy article.is-active { opacity: 1; }
.spiral-number { display: block; color: #b08b2e; margin-bottom: 14px; font: 400 clamp(18px, 2.5cqw, 32px)/1 'IBM Plex Mono', monospace; }
.spiral-copy h3 { margin: 0 0 10px; font: 600 clamp(12px, 1.75cqw, 23px)/1.05 Inter, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.045em; }
.spiral-copy p { margin: 0; font: 400 clamp(11px, 1.42cqw, 18px)/1.3 Inter, Arial, sans-serif; letter-spacing: -.02em; }
.spiral-hint { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); white-space: nowrap; color: #b08b2e; font: 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .12em; animation: scroll-label-pulse 2.4s ease-in-out infinite; }
.spiral-hint span { display: inline-block; margin-left: 12px; }
.spiral-steps { position: absolute; z-index: 4; top: 145px; right: 24px; display: flex; flex-direction: column; width: clamp(135px, 10vw, 180px); padding: 24px 0 24px 16px; border-left: 1px solid #b08b2e99; }
.spiral-steps button { position: relative; display: flex; gap: 14px; padding: 10px 0; border: 0; background: none; color: #999; text-align: left; font: 400 12px/1.4 Inter, Arial, sans-serif; cursor: pointer; transition: color .25s; }
.spiral-steps button[aria-current] { color: #080808; font-weight: 600; }
.spiral-steps button[aria-current]::before { content: ''; position: absolute; top: 15px; left: -19px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.spiral-dark .spiral-steps button[aria-current] { color: #fff; }
@media (hover: hover) and (pointer: fine) { .spiral-steps button:hover { color: #b08b2e; } }
@media (max-width: 1200px) {
  .spiral-steps { top: 85px; left: 30px; right: 30px; width: auto; flex-direction: row; gap: 18px; padding: 0 0 12px; border-left: 0; border-bottom: 1px solid #b08b2e55; }
  .spiral-steps button { gap: 6px; font-size: 10px; }
  .spiral-steps button[aria-current]::before { display: none; }
}
.service-spiral button:focus-visible { outline: 2px solid #b08b2e; outline-offset: 4px; }
@keyframes spiral-title-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes spiral-detail-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes spiral-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  .service-spiral[open] { grid-template-columns: 20% 80%; }
  .spiral-title-card h2 { font-size: clamp(38px, 10vw, 65px); }
  .spiral-close { right: 16px; top: 12px; font-size: 14px; }
  .spiral-copy article { width: 42%; }
  .spiral-copy h3 { font-size: 11px; }
  .spiral-copy p { font-size: 10px; }
  .spiral-hint { bottom: 64px; font-size: 8px; }
  .spiral-steps { left: 16px; right: 16px; top: 78px; gap: 8px; }
  .spiral-steps button { flex: 1; justify-content: center; font-size: 0; }
  .spiral-steps button > span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .spiral-title-card h2, .spiral-text-motion { translate: none; }
  .service-spiral *, .service-spiral *::after { animation: none !important; transition: none !important; }
}
.service-card .service-open .dive-label { position: relative; display: inline-block; transition: transform .25s ease; }
.service-card .service-open .dive-extra { position: absolute; left: 100%; top: 0; opacity: 0; white-space: pre; transition: opacity .12s ease; }
.service-card .service-open::after { display: none; }
.service-card .service-open .dive-extra::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--gold, #b08b2e); }
.service-card .service-open .dive-label::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: var(--gold, #b08b2e); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.service-card .service-open:focus-visible .dive-label::after { transform: scaleX(1); }
.service-card .service-open:focus-visible .dive-label { transform: translateX(-8ch); }
.service-card .service-open:focus-visible .dive-extra { opacity: 1; transition-delay: .06s; }
@media (hover: hover) and (pointer: fine) {
  .service-card .service-open:hover .dive-label::after { transform: scaleX(1); }
  .service-card .service-open:hover .dive-label { transform: translateX(-8ch); }
  .service-card .service-open:hover .dive-extra { opacity: 1; transition-delay: .06s; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card .service-open .dive-label, .service-card .service-open .dive-extra { transition: none; }
}
.spiral-number, .spiral-steps button, .service-card .service-no { font-family: Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 0; }
.service-spiral .spiral-return { position: absolute; z-index: 6; }
.spiral-dark .spiral-return .back-to-top-medallion { background: #f1f0eb; color: #080808; }
.service-card .service-open { translate: -45px -90px; }
.spiral-service-picker { --service-menu-width: clamp(210px, 18vw, 275px); position: absolute; left: 1px; top: 68px; z-index: 8; }
.spiral-service-tabs { position: relative; width: 26px; height: 86px; z-index: 2; }
.spiral-service-tab { position: absolute; left: 26px; top: 0; width: 86px; min-width: 86px; height: 26px; padding: 0; border: 1px solid var(--service-tab-color); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--service-tab-color); color: #080808; display: grid; place-items: center; transform: translateX(0) rotate(90deg); transform-origin: left top; font: 300 11px/1 Inter, Arial, sans-serif; letter-spacing: .12em; cursor: pointer; transition: transform .34s cubic-bezier(.22,1,.36,1); }
.spiral-service-tab[hidden] { display: none; }
.spiral-service-picker.is-open .spiral-service-tab { transform: translateX(var(--service-menu-width)) rotate(90deg); }
.spiral-service-list { position: absolute; left: 0; top: 0; width: var(--service-menu-width); display: grid; gap: 8px; visibility: hidden; pointer-events: none; transition: visibility 0s .4s; }
.spiral-service-picker.is-open .spiral-service-list { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.spiral-service-choice { --choice-background: #f1f0eb; position: relative; isolation: isolate; width: 100%; min-height: 86px; padding: 18px 16px; border: 0; background: transparent; color: #080808; text-align: left; cursor: pointer; opacity: 0; transform: translateY(-16px); transition: opacity .22s, transform .28s; }
.spiral-service-choice::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--choice-background); border: 1px solid #b08b2e66; }
.spiral-service-choice.is-dark { --choice-background: #080808; color: #fff; }
.spiral-service-picker.is-open .spiral-service-choice { opacity: .5; transform: translateY(0); transition-delay: calc(.12s + var(--choice-order) * .055s); }
.spiral-service-choice[aria-current] { clip-path: inset(0 100% 0 0); transform: none; transition: clip-path .34s cubic-bezier(.22,1,.36,1), opacity .2s; }
.spiral-service-picker.is-open .spiral-service-choice[aria-current] { opacity: 1; clip-path: inset(0 0 0 0); transition-delay: 0s; }
.spiral-choice-tab { position: absolute; z-index: 1; top: 0; left: calc(100% + 26px); width: 86px; height: 26px; display: grid; place-items: center; border-radius: 8px 8px 0 0; color: #080808; transform: rotate(90deg); transform-origin: left top; font: 300 11px/1 Inter, Arial, sans-serif; letter-spacing: .12em; }
.spiral-service-choice[aria-current] .spiral-choice-tab { visibility: hidden; }
.spiral-choice-title { display: block; font: 400 clamp(12px, .85vw, 15px)/1.1 'Archivo Black', Arial, sans-serif; letter-spacing: -.035em; }
.spiral-service-picker.is-open .spiral-service-choice:hover, .spiral-service-picker.is-open .spiral-service-choice:focus-visible { opacity: 1; transform: translateX(7px); transition-delay: 0s; }
.spiral-service-picker.is-open .spiral-service-choice[aria-current]:hover { transform: none; }
.spiral-service-choice:hover::before, .spiral-service-choice[aria-current]::before { border-color: #b08b2e; }
@media (max-width: 700px) {
  .spiral-service-picker { top: 125px; --service-menu-width: min(235px, calc(80vw - 40px)); }
}
.spiral-platform-joke { position: absolute; z-index: 3; left: 7.5%; top: 48px; display: block; width: max-content; max-width: min(400px, 75%); color: #1677ff; font: 400 clamp(9px, 1cqw, 14px)/1.6 Consolas, 'Courier New', monospace; overflow-wrap: anywhere; pointer-events: none; }
.spiral-platform-joke[hidden] { display: none; }
.spiral-joke-comment { color: #8c804f; }
.spiral-joke-keyword { color: #cf328e; }
.spiral-joke-string { color: #27834a; }
.spiral-copy .spiral-client-portal { position: absolute; top: -90px; right: 0; padding: 10px 14px; gap: 8px; color: #fff; font-size: clamp(10px, 1cqw, 14px); letter-spacing: .06em; background: linear-gradient(#f1f0eb, #f1f0eb) left center / 0% 100% no-repeat; border: 0; pointer-events: none; transform-origin: right center; }
.spiral-copy article.is-active .spiral-client-portal { pointer-events: auto; }
.spiral-copy .spiral-client-portal:focus-visible { color: #080808; background-size: 100% 100%; }
@media (hover: hover) and (pointer: fine) { .spiral-copy .spiral-client-portal:hover { color: #080808; background-size: 100% 100%; } }

.spiral-station-line { fill: none; stroke: #b08b2e; stroke-width: 1; stroke-opacity: .7; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linecap: round; }
.spiral-station-line { transition: translate .45s ease-out; }
.spiral-node, .spiral-traveler { transition: translate .45s ease-out, opacity .5s; }
.spiral-balloon-art { position: absolute; left: calc(100% + 24px); top: -12px; display: block; width: 57.5%; height: clamp(48.875px, 8.625cqh, 89.125px); margin: 0; object-fit: contain; object-position: left center; pointer-events: none; }
.spiral-copy .spiral-maintenance-joke { margin-top: 1em; }
.spiral-falling-clown { position: absolute; top: 0; left: calc(15.5% - clamp(47.5px, 5.5vw, 95px)); z-index: 7; width: clamp(95px, 11vw, 190px); height: auto; pointer-events: none; }
.spiral-falling-clown[hidden] { display: none; }
.spiral-platform-joke.is-automation-note, .spiral-platform-joke.is-automation-note .spiral-joke-comment { color: #39ed64; white-space: pre-line; }
.spiral-balloon-art[hidden] { display: none; }
.spiral-falling-clown.is-balloon { width: clamp(70px, 7vw, 120px); left: calc(15.5% - clamp(35px, 3.5vw, 60px)); }
.spiral-return-variants { position: absolute; left: 0; top: 0; width: 30%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; z-index: 4; transform-origin: 0 0; pointer-events: none; }
.spiral-return-variants[hidden] { display: none; }
.spiral-return-variants button { position: relative; width: 100%; min-width: 0; min-height: 24px; padding: 6px 9px; border: 0; background: transparent; color: #fff; overflow-wrap: anywhere; font: 600 clamp(7px, .8cqw, 11px)/1.3 Inter, Arial, sans-serif; pointer-events: auto; cursor: pointer; transition: color .2s, translate .2s, scale .2s, text-shadow .2s; }
@media (max-width: 700px) {
  .spiral-return-variants { width: 42%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spiral-return-variants .return-serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; border-radius: 16px; }
.spiral-return-variants .return-code { font-family: Consolas, 'Courier New', monospace; }
.spiral-return-variants .return-bold { font-family: 'Archivo Black', Arial, sans-serif; letter-spacing: -.03em; }
.spiral-return-variants .return-chinese { font-family: 'Microsoft YaHei', 'Noto Sans SC', sans-serif; letter-spacing: .1em; }
.spiral-return-variants button:focus-visible { color: #b08b2e; translate: 0 -2px; }
@media (hover: hover) and (pointer: fine) {
  .spiral-return-variants .return-clean:hover { color: #b08b2e; translate: 0 -2px; }
  .spiral-return-variants .return-serif:hover { scale: 1.12; }
  .spiral-return-variants .return-code:hover { color: #39ed64; translate: 4px 0; }
  .spiral-return-variants .return-bold:hover { scale: 1.15; color: #ff59bf; }
  .spiral-return-variants .return-chinese:hover { text-shadow: 0 0 7px #fff9; translate: 0 -3px; }
}
.spiral-text-motion p { white-space: pre-line; }
.spiral-copy .spiral-contact-button { position: absolute; top: calc(100% + 35px); right: 8%; padding: 12px 16px; gap: 10px; color: #fff; font-size: clamp(10px, 1.1cqw, 14px); letter-spacing: .12em; background: linear-gradient(#f1f0eb, #f1f0eb) left center / 0% 100% no-repeat; border: 0; pointer-events: none; transform-origin: center; }
.spiral-copy article.is-active .spiral-contact-button { pointer-events: auto; }
.spiral-copy .spiral-contact-button:focus-visible { color: #080808; background-size: 100% 100%; }
@media (hover: hover) and (pointer: fine) { .spiral-copy .spiral-contact-button:hover { color: #080808; background-size: 100% 100%; } }

/* Mobile service details show only the spiral panel. */
@media(max-width:800px){
.service-spiral[open]{grid-template-columns:minmax(0,1fr)}
.service-spiral .spiral-title-card,.service-spiral .spiral-service-picker{display:none}
}