/* =====================================================================
   ryan-site / citrus additions on top of d11's style.css:
   recruiter-first content rendered from content.json
   ===================================================================== */
:root { --ts-left: 16px; --ts-bottom: 16px; }
@media (max-width: 640px) { :root { --ts-left: 12px; --ts-bottom: 12px; } }

.news-tag { white-space: nowrap; }
.news-txt { text-align: left; }
.est { display: inline-block; margin-top: 6px; padding: .3em .7em; border-radius: 10px; background: rgba(255, 199, 166, .45); color: #7a3b12; font: 600 .72rem/1.25 var(--sans); letter-spacing: .01em; }
.est-note { font-size: .82rem; color: var(--ink-3); max-width: 40em; }
.cap { margin-top: 10px !important; }

/* hero */
.hire-link { margin-top: 16px; font-weight: 650; font-size: .95rem; color: var(--pink); text-decoration: none; padding: 6px 4px; border-bottom: 1.5px solid rgba(207, 47, 106, .3); transition: border-color .3s, opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.hire-link:hover { border-color: var(--pink); }
.hire-link span { display: inline-block; transition: transform .3s; }
.hire-link:hover span { transform: translateX(3px); }
.proof-txt { max-width: 32em; }
.fl-web img { object-position: center; }
.fl-phone img { filter: none; aspect-ratio: 668 / 1416; }
.fl-seo { max-width: 240px; }
.fl-seo svg { flex: none; stroke-dasharray: 2 6; }
.fl-seo svg circle { fill: var(--teal-2); stroke: none; }
.fl-seo span { display: block; }
.fl-seo b { display: block; margin-bottom: 3px; }

/* proof strip */
.strip-wrap { position: relative; z-index: 2; margin-top: clamp(-40px, -3vw, -20px); }
.strip { list-style: none; margin: 0; padding: clamp(18px, 2.4vw, 30px); display: grid; grid-template-columns: repeat(4, 1fr); }
.strip li { display: flex; flex-direction: column; gap: 6px; padding: 4px clamp(12px, 2vw, 28px); border-left: 1px solid var(--line); }
.strip li:first-child { border-left: 0; }
.strip-n { font: 380 clamp(2rem, 1.4rem + 1.8vw, 3.1rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--grad-pk); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; padding-right: .05em; }
.strip-c { color: var(--ink-2); font-size: .9rem; line-height: 1.35; }
@media (max-width: 860px) {
  .strip { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .strip li:nth-child(3) { border-left: 0; }
}

/* work: shared card bits */
.meta-n { color: var(--pink); font-family: var(--mono); letter-spacing: 0; margin-right: 2px; }
.meta-code { color: var(--ink-3); letter-spacing: .08em; margin-left: -4px; }
.case .one { color: var(--ink) !important; font-size: clamp(1.04rem, 1rem + .25vw, 1.18rem); line-height: 1.45; text-wrap: pretty; }
.case .para { max-width: 46em; }
.case .tl { color: var(--ink-3) !important; font-family: var(--mono); font-size: .78rem !important; }
.chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: .42em .8em; border-radius: 999px; background: rgba(31, 24, 48, .045); box-shadow: inset 0 0 0 1px var(--line); font: 500 .76rem/1.2 var(--mono); color: var(--ink-2); }
.stats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 20px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--line); }
.st-n { font: 400 clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem)/1 var(--serif); letter-spacing: -.02em; background: var(--grad-pk); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.st-c { color: var(--ink-2); font-size: .88rem; line-height: 1.35; }
.st .est { margin-top: auto; }

/* 01 scheduler */
.c-ride { padding: clamp(24px, 3.2vw, 48px); }
.ride-top { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.c-ride .embed { margin-top: 0; }
.embed-poster { display: block; }
.embed.loaded .embed-poster { visibility: hidden; }
.c-ride .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 36px); }
.cmp { margin-top: 18px; padding: clamp(18px, 2vw, 26px); border-radius: 24px; background: linear-gradient(140deg, rgba(225, 248, 242, .8), rgba(255, 240, 246, .8)); box-shadow: inset 0 0 0 1px var(--line); }
.cmp-t { font: 450 clamp(1.2rem, 1rem + .6vw, 1.5rem)/1.2 var(--serif); letter-spacing: -.01em; }
.cmp-scroll { overflow-x: auto; margin-top: 12px; }
.cmp table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { font: 700 .72rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cmp tbody th { font-weight: 600; color: var(--ink); }
.cmp td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.cmp td.ours span { display: inline-block; padding: .25em .7em; border-radius: 999px; background: var(--teal-soft); color: #0b5e57; font-weight: 500; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .small { margin-top: 10px; }
@media (max-width: 1000px) { .c-ride .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ride-top { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cmp th, .cmp td { padding: 10px 6px; font-size: .86rem; } .cmp thead th { font-size: .64rem; letter-spacing: .06em; } }

/* 02 forms */
.c-forms .film { margin-top: 22px; }

/* text-led panels (03, 04, 05): drawn in code, no images */
.c-text .panel { position: relative; margin-top: 22px; border-radius: 22px; overflow: hidden; }
.layers { padding: 18px; background: linear-gradient(160deg, #f2fbf9, #f6f1ff); box-shadow: inset 0 0 0 1px var(--line); }
.layer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.layer-list li { flex: 1 1 auto; text-align: center; padding: 12px 14px; border-radius: 14px; background: #fff; font: 500 .82rem/1.2 var(--mono); color: var(--ink); box-shadow: 0 1px 0 rgba(31, 24, 48, .06), 0 10px 22px -16px rgba(18, 120, 111, .6), inset 0 -3px 0 rgba(43, 179, 163, .22); }
.layer-list li:nth-child(-n+2) { box-shadow: 0 10px 22px -16px rgba(207, 47, 106, .6), inset 0 -3px 0 rgba(238, 90, 140, .3); }
.js .c-layers .layer-list li { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease-out), transform .7s var(--ease-spring); transition-delay: calc(var(--i) * 55ms + .25s); }
.js .c-layers.in .layer-list li { opacity: 1; transform: none; }

.canvas { padding: 34px 22px 26px; background-color: #fbf8fd; background-image: radial-gradient(rgba(31, 24, 48, .14) 1px, transparent 1.2px); background-size: 16px 16px; box-shadow: inset 0 0 0 1px var(--line); }
.frame-label { position: absolute; top: 12px; left: 22px; font: 600 .72rem/1 var(--sans); color: #6247e8; }
.frame { position: relative; padding: 4px; outline: 1.5px solid #7b61ff; border-radius: 2px; }
.frame .stats { margin: 0; }
.frame .st { background: #fff; }
.hd { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #7b61ff; border-radius: 2px; z-index: 1; }
.hd-1 { left: -5px; top: -5px; } .hd-2 { right: -5px; top: -5px; } .hd-3 { left: -5px; bottom: -5px; } .hd-4 { right: -5px; bottom: -5px; }
.cursor { position: absolute; right: 16%; bottom: 6px; width: 22px; height: 22px; animation: wander 9s ease-in-out infinite; }
.cursor svg { width: 100%; height: 100%; fill: #7b61ff; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
@keyframes wander { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-60px, -18px); } 60% { transform: translate(-20px, -40px); } }

.tree { padding: 16px 14px 12px; background: linear-gradient(160deg, #fff4f8, #f3f0ff); box-shadow: inset 0 0 0 1px var(--line); }
.tree svg { width: 100%; height: auto; max-height: 190px; }
.tr-lines path { fill: none; stroke: rgba(31, 24, 48, .22); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-nodes rect { stroke: #fff; stroke-width: 2; }
.tr-nodes .n0 { fill: #1f1830; } .tr-nodes .n1 { fill: #ff8fb4; } .tr-nodes .n2 { fill: #4fcdbb; } .tr-nodes .n3 { fill: #b49cff; }
.js .c-tree .tr-lines path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s var(--ease-out) .3s; }
.js .c-tree.in .tr-lines path { stroke-dashoffset: 0; }
.js .c-tree .tr-nodes rect { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .5s, transform .7s var(--ease-spring); }
.js .c-tree.in .tr-nodes rect { opacity: 1; transform: none; }
.js .c-tree.in .tr-nodes rect:nth-child(n+2) { transition-delay: .55s; }
.js .c-tree.in .tr-nodes rect:nth-child(n+5) { transition-delay: .95s; }

/* 06 Radiant: the real replica screen in the phone frame */
.c-app { align-items: center; }
.c-app .case-text { max-width: 640px; }
.rphone { position: relative; margin: 0 clamp(0px, 3vw, 40px) 18px 0; }
.rphone .rp-screen { padding: 0; overflow: hidden; background: #f1f5fb; }
.rphone img { width: 100%; height: auto; }
.rphone { display: flex; flex-direction: column; align-items: center; gap: 14px; width: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.rphone .rp-screen { width: clamp(250px, 24vw, 300px); padding: 10px; border-radius: 42px; background: #0f172a; box-shadow: var(--shadow-lift); }
.rphone .rp-screen img { border-radius: 33px; }
.rp-cap { max-width: 260px; text-align: center; white-space: normal; }
.foot-note { margin-top: 18px !important; }

/* auto-dispatching: one line, never a card */
.next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: clamp(8px, 1vw, 12px) 0 0; padding: 16px 22px; border-radius: 999px; border: 1.5px dashed rgba(207, 47, 106, .3); background: rgba(255, 255, 255, .55); color: var(--ink-2); }
.next-k { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.next b { font: 450 1.2rem/1.1 var(--serif); color: var(--ink); }
.next-s { padding: .3em .75em; border-radius: 999px; background: var(--lilac); color: #3f2f86; font: 600 .74rem/1.2 var(--sans); }
.next-l { flex: 1 1 22em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--pink-2); box-shadow: 0 0 0 0 rgba(238, 90, 140, .5); animation: pulse 2s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(238, 90, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 90, 140, 0); } }
@media (max-width: 620px) { .next { border-radius: 26px; } }

/* about */
.about-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-copy { order: -1; } }
.idcard { position: relative; overflow: hidden; padding: clamp(22px, 2.6vw, 34px); background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 236, 243, .9) 60%, rgba(225, 248, 242, .9)); }
.id-top { display: flex; align-items: center; gap: 16px; }
.id-mark { width: 76px; height: 76px; flex: none; border-radius: 24px; display: grid; place-items: center; background: var(--g1); color: #fff; font: 400 2rem/1 var(--serif); letter-spacing: -.02em; box-shadow: 0 14px 30px -14px rgba(238, 90, 140, .9), inset 0 1px 0 rgba(255, 255, 255, .4); }
.id-name { font: 450 1.5rem/1.1 var(--serif); letter-spacing: -.02em; }
.id-name span { display: block; margin-top: 6px; font: 600 .86rem/1.3 var(--sans); color: var(--teal); letter-spacing: 0; }
.idcard .facts { margin-top: 22px; gap: 8px; }
.idcard .facts li { justify-content: space-between; gap: 16px; padding: 12px 16px; }
.idcard .facts b { min-width: 0; color: var(--ink-3); font-weight: 600; font-size: .86rem; }
.idcard .facts span { color: var(--ink); font-weight: 600; text-align: right; }
.about-copy .h2 { margin-bottom: 4px; }
.hl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.hl li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); }
.hl b { color: var(--ink); font-weight: 650; }
.hl .ico-sm { margin-top: -2px; }
.stackbox { margin-top: clamp(22px, 3vw, 40px); padding: clamp(22px, 2.8vw, 38px); }
.stack-h { font: 450 1.6rem/1.1 var(--serif); letter-spacing: -.02em; }
.sg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin-top: 18px; }
.sg-n { font: 700 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sg .chips { margin-top: 10px; }
.edu { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.edu b { color: var(--ink); margin-right: 6px; }
@media (max-width: 860px) { .sg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sg { grid-template-columns: 1fr; } .idcard .facts li { flex-direction: column; align-items: flex-start; gap: 2px; } .idcard .facts span { text-align: left; } }

/* experience */
.job { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(22px, 4vw, 60px); padding: clamp(24px, 3.2vw, 48px); }
.job-dates { font: 600 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.job-dur { margin-top: 10px; }
.job-dur .count { font: 380 clamp(2.6rem, 2rem + 2.4vw, 4rem)/1 var(--serif); letter-spacing: -.03em; background: var(--grad-pk); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.job-side .small { margin-top: 8px; }
.job .case-t { margin-top: 0; }
.job-note { margin-top: 6px; color: var(--ink-2); }
.job-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: b; }
.job-list li { position: relative; padding-left: 34px; color: var(--ink-2); }
.job-list li::before { counter-increment: b; content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: .1em; font: 500 .78rem/1.6 var(--mono); color: var(--pink); }
@media (max-width: 760px) { .job { grid-template-columns: 1fr; } }

/* freelance */
.freelance { background: linear-gradient(180deg, transparent, rgba(255, 236, 243, .55) 12%, rgba(240, 250, 247, .55) 88%, transparent); }
.sub-h { margin: clamp(18px, 3vw, 30px) 0 18px; font: 450 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.1 var(--serif); letter-spacing: -.02em; text-align: center; }
.svc + .sub-h { margin-top: clamp(56px, 7vw, 96px); }
.c-seo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.c-seo .curve { margin-top: 0; }
.c-seo .curve svg { height: clamp(150px, 16vw, 240px); }
.curve figcaption { flex-wrap: wrap; }
.cv-t { color: var(--ink-2); font-weight: 600; }
.seo-nums p { gap: 4px; }
.web-pair { margin-top: clamp(16px, 2vw, 24px); }
.c-web { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.c-web .web-media { align-self: stretch; margin-top: 22px; padding-right: clamp(40px, 5vw, 70px); }
.c-web .mock-view { height: clamp(240px, 24vw, 340px); }
.c-web .mini-phone { width: clamp(90px, 9vw, 120px); bottom: -18px; }
.c-web .mini-phone img { filter: none; }
.c-web .cap { margin-top: 26px !important; }
@media (max-width: 900px) { .c-seo { grid-template-columns: 1fr; } }

/* made: the pink word inside the code shows its tags */
.made { padding-block: clamp(60px, 8vw, 110px); }
.code em { font-style: normal; }
.code em::before { content: '<em>'; color: #c42b65; }
.code em::after { content: '</em>'; color: #c42b65; }
.m-stamp { font-size: 1.5cqi; }

/* contact */
.cta-alt { color: var(--ink-2); }
.cta-alt a { color: var(--pink); font-weight: 650; text-underline-offset: 3px; }
.foot-c + .foot-c { margin-top: -10px; }

/* phones */
@media (max-width: 620px) {
  .stats, .stats-3, .c-ride .stats { grid-template-columns: 1fr 1fr; }
  .stats-3 .st:last-child { grid-column: 1 / -1; }
  .st { padding: 14px; }
  .acts .btn-lg { --h: 50px; padding: 0 1.3em; }
  .cta .acts { flex-direction: column; width: 100%; }
  .cta .acts .btn { width: 100%; }
  .case { padding: 22px; }
  .rphone { margin: 0 auto 18px; }
  .next { padding: 16px 18px; }
}
@media (max-width: 380px) { .stats, .stats-3, .c-ride .stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .js .c-layers .layer-list li, .js .c-tree .tr-nodes rect { opacity: 1; transform: none; }
  .js .c-tree .tr-lines path { stroke-dashoffset: 0; }
}
.flag { border-radius: 14px; }

/* ---------- 2026-11-02: thai.tattoo (film in the large landscape slot, curve in a portrait panel) ---------- */
.c-seo.has-film { grid-template-columns: minmax(0, 1.62fr) minmax(0, .76fr); grid-template-areas: "main main" "film curve"; align-items: stretch; row-gap: clamp(20px, 2.6vw, 32px); }
.c-seo.has-film .seo-main { grid-area: main; }
.c-seo .seo-wide { grid-area: film; margin: 0; --ml-max: 100%; width: 100%; align-self: center; --ml-radius: 22px; }
.seo-wide video { box-shadow: var(--shadow-lift); }
.c-seo.has-film .curve { grid-area: curve; display: flex; flex-direction: column; margin: 0; padding: clamp(16px, 1.8vw, 22px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .8);
  background: radial-gradient(90% 60% at 100% 100%, rgba(238, 90, 140, .32), transparent 70%), radial-gradient(80% 55% at 0% 0%, rgba(31, 165, 150, .2), transparent 70%), linear-gradient(170deg, #fff, #ffeaf2 55%, #fde3dc); box-shadow: var(--shadow); }
.c-seo.has-film .curve svg { flex: 1 1 0; height: auto; min-height: 220px; }
.c-seo.has-film .curve figcaption { flex-direction: column; gap: 4px; margin-top: 14px; }
.c-seo.has-film .curve figcaption span:nth-child(2) { text-align: left; }
@media (min-width: 901px) {
  .c-seo.has-film .seo-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); align-items: end; }
  .c-seo.has-film .seo-main > :not(.seo-nums) { grid-column: 1; }
  .c-seo.has-film .seo-nums { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin-top: 0 !important; }
  /* the film sets the row height; the curve panel adds no height of its own and stretches to match */
  .c-seo.has-film .curve { contain: size; }
}
@media (max-width: 900px) {
  .c-seo.has-film { grid-template-columns: 1fr; grid-template-areas: "main" "film" "curve"; }
  .c-seo.has-film .curve { aspect-ratio: 4 / 5; max-height: 540px; }
}

/* ---------- 2026-11-02: end of freelance, contact form ---------- */
.fl-end { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 72px); text-align: center; }
.fl-end p { max-width: 34em; color: var(--ink-2); }
.fl-end a:not(.btn) { color: var(--pink); font-weight: 650; text-underline-offset: 3px; }
.cta-form { width: min(100%, 640px); margin-top: 10px; padding: clamp(20px, 2.6vw, 32px); border-radius: 28px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cta-form .cf { --cf-ink: var(--ink); --cf-muted: var(--ink-2); --cf-field: #fff; --cf-line: rgba(31, 24, 48, .16); --cf-accent: var(--pink); --cf-btn: var(--pink); --cf-btn-ink: #fff; --cf-radius: 16px; --cf-display: var(--serif); }
.cta-form .cf-title { font: 450 1.5rem/1.15 var(--serif); letter-spacing: -.02em; }

/* ---------- 2026-11-03: Radiant interactive app (shared/radiant-app.html/.css/.js) ---------- */
.c-app .ra { --ra-bezel: #0f172a; --ra-pad: 10px; --ra-radius: 44px; --ra-accent: var(--pink); --ra-shadow: var(--shadow-lift); width: var(--ra-w); max-width: 100%; margin: 0 clamp(0px, 3vw, 40px) 18px 0; }
.c-app .ra-cap { max-width: 260px; padding: .4em .8em; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px -10px rgba(31, 24, 48, .35); font: 600 .74rem/1.2 var(--sans); color: var(--ink); }
@media (max-width: 900px) { .c-app .ra { margin: 0 auto 18px; } }
@media (max-width: 600px) { .c-app .ra { --ra-pad: 8px; } }