/* ==========================================================================
   Cover Letter Writing page - loaded only on /services/cover-letter-writing
   A paper-and-stationery composition, deliberately different from Resume Writing.
   ========================================================================== */

@property --ra { syntax: '<color>'; inherits: true; initial-value: #7ED957; }

/* ----- shared paper / letter ----- */
.cl-paper { position: relative; container-type: inline-size; background: #fffefb; color: #1c2420; border-radius: 5px; padding: 8% 9% 9%; line-height: 1.55;
  background-image: radial-gradient(rgba(70, 60, 30, .04) 1px, transparent 1.2px), linear-gradient(180deg, #fffefb, #faf8f1); background-size: 3px 3px, 100% 100%;
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .55) inset; }
.cl-paper > * { font-size: clamp(9px, 2.95cqw, 14.5px); }
.cl-paper p { margin: 0 0 .75em; }
.lp-head { padding-bottom: .7em; margin-bottom: .8em; border-bottom: 1px solid #e4e7e2; } .lp-head b { display: block; font-size: 1.5em; letter-spacing: -.02em; line-height: 1.15; } .lp-head small { color: #6b766f; font-size: .85em; }
.lp-meta { color: #55605a; font-size: .85em; } .lp-greet { font-weight: 700; }
.lp-close { margin-top: 1em; } .lp-close em, .lp-name { font-style: italic; font-weight: 600; }
.lp-sample { position: absolute; right: 5%; bottom: 3%; font-size: clamp(8px, 2.2cqw, 11px) !important; letter-spacing: .08em; text-transform: uppercase; color: #8a948d; }
.cl-paper mark { color: inherit; background: linear-gradient(transparent 60%, rgba(126, 217, 87, .6) 60%) no-repeat; background-size: 100% 100%; padding: 0 .06em; border-radius: 2px; transition: background-size .9s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lp-sign { display: block; width: 7.5em; height: auto; margin: .2em 0 .1em; }

/* ============ 1. HERO ============ */
.cl-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: min(100svh, 940px); padding: calc(var(--header-h) + clamp(34px, 5vw, 70px)) 0 clamp(80px, 9vw, 120px); background: radial-gradient(110% 100% at 15% 100%, #0f1a13, var(--black) 60%); }
.cl-hero-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 72% 42%, rgba(126, 217, 87, .24), transparent 70%); animation: clGlow 2.4s .2s var(--ease) both; }
@keyframes clGlow { from { opacity: 0; } to { opacity: 1; } }
.cl-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(30px, 5vw, 90px); align-items: center; width: 100%; }
.cl-label { display: inline-flex; align-items: center; gap: 12px; font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 22px; }
.cl-label::before { content: ''; width: 34px; height: 1.5px; background: currentColor; }
.cl-title { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; color: #fff; }
.cl-title .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; } .cl-title .lni { display: inline-block; will-change: transform; }
.cl-title em { font-style: normal; background: linear-gradient(100deg, #7ED957 10%, #d3f7bd 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cl-draw { display: block; width: 110px; height: 2px; margin: 26px 0 4px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: clDraw 1.5s 1s var(--ease) both; }
@keyframes clDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cl-lead { margin-top: 22px; max-width: 54ch; } .cl-ctas { margin-top: 34px; }

.cl-stage { position: relative; width: min(100%, 440px); margin-inline: auto; padding: 10px 0 30px; }
.cl-env { position: absolute; left: -9%; right: 9%; bottom: 8%; top: 22%; border-radius: 14px; background: linear-gradient(160deg, rgba(126, 217, 87, .16), rgba(126, 217, 87, .02)); border: 1px solid rgba(126, 217, 87, .35); transform: rotate(5deg); }
.cl-env::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 52%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgba(126, 217, 87, .1); border-top-left-radius: 14px; border-top-right-radius: 14px; }
.cl-paper-hero { position: relative; z-index: 2; transform: rotate(-2.5deg); animation: clFloat 8s ease-in-out infinite; aspect-ratio: 210 / 285; }
@keyframes clFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.cl-seal { position: absolute; z-index: 4; right: -12px; bottom: 14%; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); box-shadow: 0 18px 36px -10px rgba(126, 217, 87, .8); animation: clFloat 6s -2s ease-in-out infinite; } .cl-seal .ic { width: 28px; height: 28px; stroke-width: 2.4; }
.cl-tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; white-space: nowrap; background: rgba(8, 8, 8, .62); border: 1px solid rgba(126, 217, 87, .42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); animation: clFloat 6s ease-in-out infinite; }
.cl-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.cl-tag.t1 { top: -3%; left: -6%; } .cl-tag.t2 { top: 28%; right: -12%; animation-delay: -1.5s; } .cl-tag.t3 { top: 84%; left: -8%; animation-delay: -3s; } .cl-tag.t4 { bottom: 2%; right: 4%; animation-delay: -4.5s; }

/* ============ 2. INTRODUCTION ============ */
.cl-intro-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(70px, 10vw, 160px); align-items: center; }
.cl-sub { margin-top: 22px; color: var(--mute-l); font-size: 1.06rem; max-width: 48ch; }
.cl-ideas { margin-top: 32px; display: grid; gap: 12px; }
.cl-idea { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line-l); opacity: .42; transition: opacity .6s, border-color .5s, box-shadow .6s, transform .6s var(--ease); }
.cl-idea.is-on { opacity: 1; border-color: rgba(47, 125, 23, .5); box-shadow: 0 26px 44px -30px rgba(8, 8, 8, .45); transform: translateX(6px); }
.cl-idea-mark { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 1.5px solid rgba(47, 125, 23, .45); color: var(--green-ink); transition: background .4s, color .4s; } .cl-idea.is-on .cl-idea-mark { background: var(--green); color: var(--black); border-color: var(--green); }
.cl-idea h3 { font-size: 1.2rem; letter-spacing: -.02em; font-weight: 800; } .cl-idea p { margin-top: 3px; color: var(--mute-l); font-size: .98rem; }
.cl-intro-letter .cl-paper { max-width: 440px; margin-inline: auto; box-shadow: 0 50px 80px -40px rgba(8, 8, 8, .45), 0 0 0 1px rgba(8, 8, 8, .06); transform: rotate(1.6deg); }
.cl-paper-intro { aspect-ratio: 210 / 270; }
.cl-paper mark.mk { background-size: 0% 100%; transition: background-size 1s var(--ease), box-shadow .6s; } .cl-paper mark.mk.is-on { background-size: 100% 100%; box-shadow: 0 0 0 3px rgba(126, 217, 87, .22); }
.cl-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.cl-links path { fill: none; stroke: var(--green-ink); stroke-width: 1.6; stroke-linecap: round; } .cl-links circle { fill: var(--green); stroke: var(--green-ink); stroke-width: 1.4; opacity: 0; transition: opacity .4s .5s; } .cl-links circle.on { opacity: 1; }

/* ============ 3. THE LETTER COMES TO LIFE ============ */
.cl-lab { background: radial-gradient(110% 80% at 50% 0%, #0f1612, var(--black) 65%); }
.lab { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); gap: clamp(22px, 4vw, 56px); align-items: stretch; }
.lab-tabs { display: grid; gap: 10px; align-content: center; }
.lab-tab { position: relative; display: grid; gap: 4px; text-align: left; padding: 20px 22px 22px; border-radius: 20px; color: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); overflow: hidden; transition: color .4s, background .4s, border-color .4s, transform .5s var(--ease); }
.lab-tab:hover { color: #fff; transform: translateX(5px); }
.lab-tab.is-on { color: #fff; background: rgba(126, 217, 87, .09); border-color: rgba(126, 217, 87, .5); box-shadow: 0 30px 50px -34px rgba(126, 217, 87, .5); }
.lab-tab-n { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green); } .lab-tab-t { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .lab-tab-d { font-size: .92rem; line-height: 1.5; color: var(--mute-d); max-width: 34ch; }
.lab-bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: transparent; overflow: hidden; border-radius: 2px; } .lab-bar b { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.lab.playing .lab-tab.is-on .lab-bar { background: rgba(255, 255, 255, .12); } .lab.playing .lab-tab.is-on .lab-bar b { animation: whybar var(--labms, 7000ms) linear forwards; }
.lab.paused .lab-tab.is-on .lab-bar { background: rgba(255, 255, 255, .12); } .lab.paused .lab-tab.is-on .lab-bar b { animation: none; transform: scaleX(1); }
.lab-stage { position: relative; padding: clamp(34px, 5vw, 64px) clamp(26px, 8vw, 110px); border-radius: 30px; border: 1px solid var(--line-d); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); overflow: hidden; touch-action: pan-y; }
.lab-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px); background-size: 22px 22px; mask-image: radial-gradient(70% 80% at 50% 45%, #000, transparent); -webkit-mask-image: radial-gradient(70% 80% at 50% 45%, #000, transparent); pointer-events: none; }
.lab-stage::after { content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(transparent, rgba(126, 217, 87, .1), transparent); animation: labScan 7s linear infinite; pointer-events: none; }
@keyframes labScan { to { transform: translateY(520%); } }
.lab-paper { position: relative; z-index: 2; max-width: 520px; margin-inline: auto; aspect-ratio: 210 / 270; }
.lab-pointer { position: absolute; left: 3.2%; width: 3px; border-radius: 3px; background: var(--green); box-shadow: 0 0 14px rgba(126, 217, 87, .9); top: 0; height: 0; transition: top .7s var(--ease), height .7s var(--ease); }
.lab-p { position: relative; padding: .3em .55em; margin-inline: -.55em; border-radius: 6px; opacity: .3; transition: opacity .7s, background-color .7s; } .lab-p.is-active { opacity: 1; background: rgba(126, 217, 87, .1); }
.lab-p .w { display: inline-block; } .lab-p mark { background-size: 0% 100%; } .lab-p.is-active mark { background-size: 100% 100%; transition-delay: .6s; }
.lab-ui { position: absolute; z-index: 3; display: grid; gap: 2px; padding: 11px 16px; border-radius: 14px; font-size: .8rem; color: #fff; background: rgba(8, 8, 8, .68); border: 1px solid rgba(126, 217, 87, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); }
.lab-ui small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); font-weight: 800; } .lab-ui strong { font-size: .9rem; } .lab-ui b { color: var(--green); }
.lab-ui-1 { top: 22px; left: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .lab-ui-1 i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.lab-ui-2 { top: 22%; right: 16px; max-width: 168px; } .lab-ui-3 { top: 46%; right: 16px; max-width: 168px; } .lab-ui-4 { bottom: 22px; left: 18px; display: inline-flex; gap: 6px; align-items: center; }
.lab-ui.swap { animation: labSwap .7s var(--ease) both; } @keyframes labSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lab-swipe { display: none; }

/* ============ 4. WHY IT MATTERS ============ */
.cl-why { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 85% 0%, rgba(126, 217, 87, .12), transparent 60%), #080808; color: #fff; }
.cl-why-glow span { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; } .cl-why-glow span:nth-child(1) { width: 420px; height: 420px; left: -160px; bottom: -120px; background: rgba(126, 217, 87, .1); } .cl-why-glow span:nth-child(2) { width: 300px; height: 300px; right: 8%; top: 30%; background: rgba(126, 217, 87, .07); }
.cl-why-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.cl-why-intro { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 18px; } .cl-why-intro .display { margin: 0; color: #fff; } .cl-why-intro .eyebrow { color: var(--green); }
.cl-why-sub { margin: 0; color: rgba(255, 255, 255, .62); font-size: 1.05rem; max-width: 36ch; }
.cl-why-mark { width: 120px; height: 120px; margin-top: 12px; animation: clSpin 40s linear infinite; } @keyframes clSpin { to { transform: rotate(360deg); } }
.cl-ladder { display: grid; gap: 14px; counter-reset: rung; }
.cl-rung { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 32px); padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 34px); border-radius: 22px; background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: .5; transform: translateX(26px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .4s, background .4s, box-shadow .4s; overflow: hidden; }
.cl-rung::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--green); box-shadow: 0 0 16px var(--green); transform: scaleY(0); transition: transform .8s var(--ease); }
.cl-rung.in { opacity: 1; transform: none; } .cl-rung.in::before { transform: scaleY(1); }
.cl-rung:hover { border-color: rgba(126, 217, 87, .45); background: linear-gradient(135deg, rgba(126, 217, 87, .12), rgba(255, 255, 255, .03)); box-shadow: 0 30px 60px -36px rgba(126, 217, 87, .45); }
.cl-bignum { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; font-weight: 800; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(126, 217, 87, .55); min-width: 1.7em; transition: color .5s, -webkit-text-stroke-color .5s; }
.cl-rung.in .cl-bignum, .cl-rung:hover .cl-bignum { color: rgba(126, 217, 87, .18); -webkit-text-stroke-color: var(--green); }
.cl-rung-body h3 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; color: #fff; } .cl-rung-body p { margin-top: 6px; color: rgba(255, 255, 255, .64); font-size: 1.02rem; max-width: 44ch; }
.cl-rung-tick { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(126, 217, 87, .35); color: var(--green); transition: background .4s, color .4s, transform .4s; } .cl-rung-tick svg { width: 16px; height: 16px; }
.cl-rung:hover .cl-rung-tick { background: var(--green); color: #080808; transform: rotate(0deg) scale(1.06); }

/* ============ 5. INCLUDED ============ */
.cl-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.cl-inc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 34px); border-radius: 28px; overflow: hidden; background: var(--soft); border: 1px solid var(--line-l); transition: transform .6s var(--ease), box-shadow .6s, border-color .4s; }
.cl-inc:hover { transform: translateY(-7px); box-shadow: 0 40px 64px -38px rgba(8, 8, 8, .4); border-color: rgba(47, 125, 23, .4); }
.cl-inc h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); letter-spacing: -.03em; line-height: 1.15; font-weight: 800; position: relative; z-index: 2; } .cl-inc p { color: var(--mute-l); max-width: 36ch; position: relative; z-index: 2; }
.cl-ico { width: 56px; height: 56px; color: var(--green-ink); margin-bottom: 14px; position: relative; z-index: 2; } .cl-ico * { stroke-dasharray: 80; animation: icoDraw 4.6s ease-in-out infinite; } .cl-ico .acc { stroke: var(--green); stroke-width: 2.4; animation-delay: .5s; fill: none; } .cl-ico circle.acc { fill: var(--green); stroke: none; stroke-dasharray: none; animation: icoPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes icoDraw { 0% { stroke-dashoffset: 80; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } } @keyframes icoPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } }
.cl-inc-glow { position: absolute; width: 220px; height: 220px; right: -70px; bottom: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(126, 217, 87, .28), transparent 68%); transition: transform .8s var(--ease), opacity .6s; opacity: .7; z-index: 1; } .cl-inc:hover .cl-inc-glow { transform: scale(1.35); opacity: 1; }
.cl-inc-opening { grid-column: 1 / 6; grid-row: 1 / 3; background: radial-gradient(120% 100% at 100% 0%, #1c2c21, var(--black) 65%); border-color: var(--line-d); justify-content: flex-end; }
.cl-inc-aligned { grid-column: 6 / 13; background: #fff; } .cl-inc-skills { grid-column: 6 / 10; } .cl-inc-achieve { grid-column: 10 / 13; background: var(--green); border-color: var(--green); }
.cl-inc-closing { grid-column: 1 / 8; background: linear-gradient(165deg, #1a201d, #0d100e 80%); border-color: var(--line-d); } .cl-inc-review { grid-column: 8 / 13; background: #fff; }
.cl-inc-opening h3, .cl-inc-closing h3 { color: #fff; } .cl-inc-opening p, .cl-inc-closing p { color: var(--mute-d); } .cl-inc-opening .cl-ico, .cl-inc-closing .cl-ico { color: var(--green); } .cl-inc-opening .cl-ico { width: 84px; height: 84px; }
.cl-inc-achieve h3, .cl-inc-achieve p { color: var(--black); } .cl-inc-achieve p { opacity: .8; } .cl-inc-achieve .cl-ico { color: var(--black); } .cl-inc-achieve .cl-ico .acc { stroke: var(--black); } .cl-inc-achieve .cl-inc-glow { background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 68%); }

/* ============ 6. PERSONALISATION ============ */
.cl-roles { --ra: #7ED957; transition: --ra .9s var(--ease); background: radial-gradient(110% 90% at 0% 100%, #101a14, var(--black) 62%); }
.cl-roles-glow { position: absolute; width: 640px; height: 640px; right: -180px; top: -200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ra) 38%, transparent), transparent 66%); z-index: -1; pointer-events: none; transition: --ra .9s var(--ease); }
.cl-links path { transition: stroke-dashoffset 1.2s var(--ease); }
.roles-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-d); margin-bottom: 30px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .roles-seg::-webkit-scrollbar { display: none; }
.roles-tab { flex: none; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: rgba(255, 255, 255, .7); white-space: nowrap; transition: background .4s, color .4s; } .roles-tab:hover { color: #fff; }
.roles-tab.is-on { background: var(--ra); color: var(--black); }
.roles-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
.roles-paper { max-width: 580px; width: 100%; aspect-ratio: 210 / 262; }
.roles-paper [data-role-intro], .roles-paper [data-role-value], .roles-paper [data-role-skills], .roles-paper [data-role-company], .roles-paper [data-role-title] { transition: opacity .35s, transform .5s var(--ease); } .roles-paper.swap [data-role-intro], .roles-paper.swap [data-role-value], .roles-paper.swap [data-role-skills] { opacity: 0; transform: translateY(8px); }
.role-skills { display: flex; flex-wrap: wrap; gap: .45em; margin: .4em 0 .8em; padding: 0; list-style: none; } .role-skills li { padding: .22em .85em; border-radius: 999px; font-weight: 700; font-size: .92em; background: rgba(126, 217, 87, .22); box-shadow: 0 0 0 1.5px rgba(126, 217, 87, .55); background: color-mix(in srgb, var(--ra) 26%, #fff); box-shadow: 0 0 0 1.5px var(--ra); }
.roles-kicker { font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--ra); }
.roles-side h3 { margin: 10px 0 14px; font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -.04em; line-height: 1.05; font-weight: 800; color: #fff; }
.roles-note { color: var(--mute-d); font-size: 1.1rem; max-width: 34ch; } .roles-fine { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-d); color: var(--mute-d); font-size: .9rem; max-width: 40ch; }

/* ============ 7. WHO CAN BENEFIT ============ */
.cl-path { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 8px; --pp: 0; }
.cl-path-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: rgba(8, 8, 8, .12); border-radius: 2px; } .cl-path-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-ink), var(--green)); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 14px rgba(47, 125, 23, .5); border-radius: 2px; }
.cl-node { position: relative; height: 330px; }
.cl-dot { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; border: 2px solid rgba(8, 8, 8, .25); z-index: 2; transition: background .5s, border-color .5s, box-shadow .6s, transform .6s var(--ease); }
.cl-node.is-on .cl-dot { background: var(--green); border-color: var(--green-ink); transform: scale(1.15); box-shadow: 0 0 0 9px rgba(126, 217, 87, .25), 0 0 26px rgba(126, 217, 87, .6); }
.cl-node-body { position: absolute; left: 6px; right: 6px; text-align: center; opacity: .35; transition: opacity .6s, transform .7s var(--ease); }
.cl-node:nth-of-type(odd) .cl-node-body { bottom: calc(50% + 42px); transform: translateY(10px); } .cl-node:nth-of-type(even) .cl-node-body { top: calc(50% + 42px); transform: translateY(-10px); }
.cl-node.is-on .cl-node-body { opacity: 1; transform: none; }
.cl-node-body::after { content: ''; position: absolute; left: 50%; width: 1.5px; height: 26px; background: rgba(47, 125, 23, .5); }
.cl-node:nth-of-type(odd) .cl-node-body::after { bottom: -34px; } .cl-node:nth-of-type(even) .cl-node-body::after { top: -34px; }
.cl-node-body h3 { font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.25; font-weight: 800; } .cl-node-body p { margin-top: 6px; color: var(--mute-l); font-size: .93rem; line-height: 1.5; }

/* ============ 8. PROCESS ============ */
.cl-process-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.cl-prev-wrap { position: sticky; top: 108px; }
.cl-prev { position: relative; width: min(100%, 400px); aspect-ratio: 210 / 285; margin-inline: auto; padding: 9% 10%; border-radius: 6px; background: #fffefb; background-image: radial-gradient(rgba(70, 60, 30, .04) 1px, transparent 1.2px); background-size: 3px 3px; box-shadow: 0 50px 80px -34px rgba(8, 8, 8, .5), 0 0 0 1px rgba(8, 8, 8, .06); transform: rotate(-2deg); }
.cl-prev > div, .cl-prev > .pv-badge { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.pv-badge { position: absolute; top: -14px; right: -10px; padding: 8px 16px; border-radius: 999px; background: var(--black); color: var(--green); font-weight: 800; font-size: .8rem; letter-spacing: .08em; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); } .pv-badge b { color: #fff; }
.cl-prev i { display: block; height: 7px; border-radius: 4px; background: #dfe5e1; margin: 7px 0; } .cl-prev i.w36 { width: 36%; } .cl-prev i.w44 { width: 44%; } .cl-prev i.w50 { width: 50%; } .cl-prev i.w60 { width: 60%; } .cl-prev i.w70 { width: 70%; } .cl-prev i.w84 { width: 84%; } .cl-prev i.w88 { width: 88%; } .cl-prev i.w92 { width: 92%; } .cl-prev i.w95 { width: 95%; }
.pv-head u { display: block; height: 1px; background: #e2e6e2; margin: 12px 0; } .pv-head i:first-child { background: #101412; height: 9px; }
.pv-notes { display: flex; gap: 8px; margin: 12px 0 14px; } .pv-notes span { padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: #e8f7df; color: var(--green-ink); box-shadow: 0 0 0 1.5px rgba(126, 217, 87, .6); }
.pv-body { margin-top: 6px; } .pv-checks { position: absolute; left: 10%; right: 10%; top: 56%; display: grid; gap: 15px; pointer-events: none; } .pv-checks em { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--green), transparent); margin-left: 24px; position: relative; } .pv-checks em::before { content: ''; position: absolute; left: -26px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); } .pv-checks em::after { content: ''; position: absolute; left: -21px; top: -3px; width: 4px; height: 7px; border: solid var(--black); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pv-final { position: absolute; left: 10%; right: 10%; bottom: 7%; display: flex; align-items: flex-end; justify-content: space-between; } .pv-final svg { width: 34%; height: auto; } .pv-final span { padding: 6px 16px; border-radius: 6px; border: 2px solid var(--green-ink); color: var(--green-ink); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; transform: rotate(-6deg); }
.pv-s1, .pv-s2, .pv-s3, .pv-s4, .pv-s5 { opacity: 0; transform: translateY(10px); }
.cl-prev.has-1 .pv-s1, .cl-prev.has-2 .pv-s2, .cl-prev.has-3 .pv-s3, .cl-prev.has-4 .pv-s4, .cl-prev.has-5 .pv-s5 { opacity: 1; transform: none; }
.cl-prev.has-3 .pv-s3 i { animation: pvWrite 1.1s var(--ease) both; transform-origin: left; } .cl-prev.has-3 .pv-s3 i:nth-child(2) { animation-delay: .1s; } .cl-prev.has-3 .pv-s3 i:nth-child(3) { animation-delay: .2s; } .cl-prev.has-3 .pv-s3 i:nth-child(4) { animation-delay: .3s; } .cl-prev.has-3 .pv-s3 i:nth-child(5) { animation-delay: .4s; } .cl-prev.has-3 .pv-s3 i:nth-child(6) { animation-delay: .5s; } .cl-prev.has-3 .pv-s3 i:nth-child(7) { animation-delay: .6s; }
@keyframes pvWrite { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cl-steps { position: relative; padding-left: 58px; }
.cl-steps-line { position: absolute; left: 20px; top: 24px; bottom: 24px; width: 2px; background: rgba(8, 8, 8, .12); border-radius: 2px; } .cl-steps-line i { position: absolute; inset: 0; background: linear-gradient(var(--green-ink), var(--green)); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 14px rgba(47, 125, 23, .5); border-radius: 2px; }
.cl-step { position: relative; min-height: min(46vh, 340px); display: flex; align-items: center; } .cl-step:last-child { min-height: 0; }
.cl-step-dot { position: absolute; left: -49px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #fff; border: 2px solid rgba(8, 8, 8, .25); transition: background .5s, border-color .5s, box-shadow .6s, transform .6s var(--ease); }
.cl-step.is-on .cl-step-dot { background: var(--green); border-color: var(--green-ink); transform: scale(1.15); box-shadow: 0 0 0 9px rgba(126, 217, 87, .25), 0 0 26px rgba(126, 217, 87, .6); }
.cl-step-body { opacity: .36; transition: opacity .6s, transform .8s var(--ease); transform: translateX(10px); } .cl-step.is-on .cl-step-body { opacity: 1; transform: none; }
.cl-step-n { font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: var(--green-ink); } .cl-step-body h3 { margin: 6px 0 8px; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; } .cl-step-body p { color: var(--mute-l); font-size: 1.05rem; max-width: 40ch; }

/* ============ 9. SHOWCASE ============ */
.cl-table { padding: clamp(24px, 4vw, 56px); border-radius: 34px; background: radial-gradient(120% 100% at 50% 0%, #1b2a1f, #0b0f0d 70%); box-shadow: 0 60px 100px -50px rgba(8, 8, 8, .7); }
.cl-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.cl-design { margin: 0; }
.cl-sheet { position: relative; display: block; width: 100%; aspect-ratio: 210 / 297; padding: 0; border-radius: 5px; overflow: hidden; background: #fffefb; container-type: inline-size; cursor: zoom-in; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); transition: transform .7s var(--ease), box-shadow .7s; text-align: left; }
.cl-sheet:hover, .cl-sheet:focus-visible { transform: translateY(-10px) rotate(-.6deg) scale(1.03); box-shadow: 0 60px 90px -30px rgba(126, 217, 87, .4), 0 0 0 1px rgba(126, 217, 87, .5); }
.cl-zoom { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s var(--ease); z-index: 3; } .cl-sheet:hover .cl-zoom, .cl-sheet:focus-visible .cl-zoom { opacity: 1; transform: none; }
.cl-design figcaption { margin-top: 18px; display: grid; gap: 4px; } .cl-design figcaption strong { color: #fff; font-size: 1.1rem; } .cl-design figcaption span { color: var(--mute-d); font-size: .94rem; }
.ltr { position: absolute; inset: 0; font-size: 3.1cqw; line-height: 1.5; color: #1c2420; } .ltr p { margin: 0 0 .7em; } .ltr b { display: block; font-size: 1.55em; letter-spacing: -.02em; line-height: 1.1; } .ltr small { display: block; color: #6b766f; font-size: .85em; } .lm-sign em { font-style: italic; font-weight: 600; } .lm-date, .lm-to { color: #4c5750; font-size: .9em; }
.ltr-modern { display: flex; } .lm-bar { flex: none; width: 3.4%; background: linear-gradient(180deg, #7ED957, #3f9a22); } .lm-body { padding: 9% 9% 7% 7%; } .ltr-modern header { padding-bottom: .8em; margin-bottom: .9em; border-bottom: 1px solid #dfe5e1; }
.ltr-minimal { padding: 9% 11%; font-family: Georgia, 'Times New Roman', serif; } .ltr-minimal header { text-align: center; padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #cfd6d1; } .ltr-minimal header span { display: block; width: 14%; height: 2px; background: var(--green); margin: .7em auto .5em; } .ltr-minimal header b { font-weight: 700; font-size: 1.8em; }
.ltr-corporate header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; padding: 8% 8% 5%; background: linear-gradient(120deg, #151A18, #1f2e24); color: #fff; border-bottom: 4px solid var(--green); } .ltr-corporate header b { color: #fff; font-size: 1.6em; } .ltr-corporate header small { color: var(--green); font-weight: 700; } .ltr-corporate .lc-contact { text-align: right; } .ltr-corporate .lc-contact small { color: rgba(255, 255, 255, .72); font-weight: 500; } .lc-body { padding: 6% 8%; }
.cl-dialog { width: min(600px, 92vw); max-height: 94svh; padding: 0; border: 0; border-radius: 26px; background: #0d100e; color: #fff; box-shadow: 0 60px 120px rgba(0, 0, 0, .8), 0 0 0 1px rgba(126, 217, 87, .3); overflow: hidden; }
.cl-dialog::backdrop { background: rgba(8, 8, 8, .78); backdrop-filter: blur(6px); } .cl-dialog[open] { animation: dlgIn .5s var(--ease) both; }
.cl-dialog-inner { position: relative; padding: 26px 26px 22px; display: grid; gap: 14px; max-height: 94svh; overflow: auto; }
.cl-dialog-x { position: absolute; right: 14px; top: 14px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); transition: transform .3s var(--ease); } .cl-dialog-x:hover { transform: rotate(90deg); }
.cl-dialog-cap { font-weight: 800; font-size: 1.15rem; padding-right: 54px; }
.cl-dialog-body .cl-sheet-lg { position: relative; width: 100%; aspect-ratio: 210 / 297; border-radius: 5px; overflow: hidden; background: #fffefb; container-type: inline-size; } .cl-dialog-note { color: var(--mute-d); font-size: .85rem; }

/* ============ 10. WHY HRA ============ */
.cl-hra { background: radial-gradient(110% 90% at 0% 100%, #101a14, var(--black) 62%); }
.cl-hra-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.cl-hra-visual { position: relative; width: min(100%, 360px); aspect-ratio: 210 / 290; margin-inline: auto; }
.hv-sheet { position: absolute; border-radius: 6px; } .hv3 { inset: 6% -8% -6% 10%; border: 1px solid rgba(126, 217, 87, .3); transform: rotate(7deg); animation: clFloat 9s -3s ease-in-out infinite; } .hv2 { inset: 3% -3% -3% 5%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); transform: rotate(3.5deg); backdrop-filter: blur(8px); animation: clFloat 8s -1.5s ease-in-out infinite; }
.hv1 { inset: 0; background: #fffefb; padding: 10% 10%; transform: rotate(-2.5deg); box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .85); animation: clFloat 7s ease-in-out infinite; } .hv1 .hb { display: block; height: 7px; border-radius: 4px; background: #dfe5e1; margin: 9px 0; } .hv1 .hb.dk { background: #101412; height: 10px; } .hv1 .hb.g { background: linear-gradient(90deg, #7ED957, #b9f19f); animation: rsHlCl 4s ease-in-out infinite; transform-origin: left; } .hv1 .hb.g2 { animation-delay: -2s; } .hv1 svg { width: 36%; height: auto; margin-top: 14px; }
@keyframes rsHlCl { 0%, 100% { opacity: .55; transform: scaleX(.75); } 50% { opacity: 1; transform: scaleX(1); } }
.w95 { width: 95%; } .w92 { width: 92%; } .w90 { width: 90%; } .w88 { width: 88%; } .w82 { width: 82%; } .w70 { width: 70%; } .w60 { width: 60%; } .w40 { width: 40%; } .w30 { width: 30%; }
.hv-seal { position: absolute; right: -14px; bottom: 10%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--black); box-shadow: 0 20px 40px -12px rgba(126, 217, 87, .8); z-index: 3; animation: clFloat 6s -2s ease-in-out infinite; } .hv-seal .ic { width: 30px; height: 30px; stroke-width: 2.4; }
.cl-hra-body .display { margin-bottom: clamp(24px, 4vw, 40px); }
.cl-hra-list { display: grid; } .cl-hra-item { position: relative; padding: clamp(20px, 2.8vw, 30px) 0; } .cl-hra-item h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.03em; line-height: 1.12; font-weight: 800; color: #fff; } .cl-hra-item p { margin-top: 8px; color: var(--mute-d); max-width: 46ch; }
.cl-hra-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .12); } .cl-hra-line::after { content: ''; position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) var(--d, 0s); } .cl-hra-item.in .cl-hra-line::after { transform: scaleX(1); }

/* ============ ENQUIRY / RELATED / CTA ============ */
.cl-service-chip { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin-bottom: 24px; padding: 10px 18px; border-radius: 999px; background: var(--green-soft); border: 1px solid rgba(47, 125, 23, .3); } .cl-service-chip span { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .cl-service-chip strong { color: var(--green-ink); }
.cl-faq .sec-sub { margin-top: 20px; }
.cl-rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cl-rel-grid a { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line-l); overflow: hidden; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; } .cl-rel-grid a:hover { transform: translateY(-6px); border-color: rgba(47, 125, 23, .4); box-shadow: 0 30px 50px -32px rgba(8, 8, 8, .4); }
.cl-rel-grid strong { font-size: 1.12rem; letter-spacing: -.02em; position: relative; z-index: 3; } .cl-rel-grid span { color: var(--mute-l); font-size: .94rem; position: relative; z-index: 3; } .cl-rel-grid .ic { margin-top: auto; color: var(--green-ink); transition: transform .4s var(--ease); position: relative; z-index: 3; } .cl-rel-grid a:hover .ic { transform: translate(4px, -4px); }
.cl-cta { background: radial-gradient(100% 120% at 50% 120%, #11201a, var(--black) 62%); }
.cl-cta-env { position: absolute; left: 50%; top: 50%; width: min(130vw, 1180px); height: auto; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; animation: clFloat 12s ease-in-out infinite; }
.cl-trails { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .cl-trails i { position: absolute; top: -30%; width: 2px; height: 70%; background: linear-gradient(transparent, var(--green), transparent); opacity: .42; transform: rotate(-24deg); animation: clTrail 8s linear infinite; }
.cl-trails i:nth-child(1) { left: 14%; } .cl-trails i:nth-child(2) { left: 38%; animation-delay: -3s; height: 55%; } .cl-trails i:nth-child(3) { left: 64%; animation-delay: -5s; } .cl-trails i:nth-child(4) { left: 88%; animation-delay: -1.5s; height: 60%; }
@keyframes clTrail { from { transform: translateY(-40%) rotate(-24deg); } to { transform: translateY(260%) rotate(-24deg); } }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .cl-hero { min-height: 0; } .cl-hero-grid, .cl-intro-grid, .cl-hra-grid, .roles-body, .cl-process-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-stage { width: min(100%, 400px); margin-top: 16px; } .cl-intro-grid { gap: 40px; } .cl-links { display: none; }
  .cl-prev-wrap { position: static; } .cl-prev { width: min(100%, 340px); }
  .cl-hra-visual { max-width: 300px; }
  .cl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-bento > .cl-inc { grid-column: auto !important; grid-row: auto !important; } .cl-inc-opening, .cl-inc-closing { grid-column: 1 / -1 !important; }
  .cl-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab { grid-template-columns: minmax(0, 1fr); } .lab-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: stretch; } .lab-tab-d { display: none; }
}
@media (max-width: 900px) {
  .cl-path { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 50px; }
  .cl-path-line { left: 17px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; } .cl-path-line i { transform-origin: top; }
  .cl-node { height: auto; padding: 14px 0; } .cl-dot { left: -50px; top: 26px; margin: 0; } .cl-node-body { position: static; text-align: left; transform: none !important; } .cl-node-body::after { display: none; }
  .cl-steps { padding-left: 50px; } .cl-steps-line { left: 16px; } .cl-step-dot { left: -43px; } .cl-step { min-height: 0; padding: 22px 0; }
  .cl-why-grid { grid-template-columns: 1fr; } .cl-why-intro { position: static; } .cl-why-mark { display: none; }
}
@media (max-width: 720px) {
  .cl-title { font-size: clamp(2rem, 9vw, 2.7rem); } .cl-ctas .btn { flex: 1 1 100%; }
  .cl-tag.t3, .cl-tag.t2, .cl-env { display: none; } .cl-tag.t1 { left: 2%; top: -4%; } .cl-tag.t2 { right: -2%; } .cl-tag.t4 { right: 2%; } .cl-paper-hero, .cl-paper-intro { animation: none; transform: none; } .cl-intro-letter .cl-paper { transform: none; }
  .cl-idea.is-on { transform: none; }
  /* letter lab: segmented tabs, compact letter, static UI chips below */
  .lab-tabs { gap: 6px; } .lab-tab { padding: 14px 10px 16px; text-align: center; border-radius: 16px; } .lab-tab-t { font-size: .95rem; } .lab-tab-n { font-size: .62rem; letter-spacing: .1em; } .lab-bar { left: 12px; right: 12px; }
  .lab-stage { padding: 20px 14px 18px; border-radius: 24px; display: grid; gap: 12px; } .lab-paper { aspect-ratio: auto; width: 100%; margin-inline: 0; } .lab-stage::after { display: none; }
  .lab-ui { position: static; display: inline-flex; align-items: center; gap: 8px; max-width: none; padding: 9px 14px; } .lab-ui small { margin-right: 2px; } .lab-ui-1 { display: none; }
  .lab-swipe { display: block; text-align: center; font-size: .78rem; color: var(--mute-d); margin-top: 10px; }
  .roles-tab { padding: 11px 16px; font-size: .88rem; } .roles-paper { aspect-ratio: auto; }
  /* what's included: swipeable row (drag/glide handled by main.js) */
  .cl-bento { display: flex !important; flex-wrap: nowrap; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: none; cursor: grab; align-items: stretch; margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 6px clamp(20px, 4vw, 48px) 22px; scroll-padding-inline: clamp(20px, 4vw, 48px); }
  .cl-bento::-webkit-scrollbar { display: none; } .cl-bento > .cl-inc { flex: 0 0 min(82%, 340px) !important; grid-column: auto !important; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; justify-content: flex-start !important; } .cl-inc-opening .cl-ico { width: 56px; height: 56px; }
  .cl-bento.dragging { cursor: grabbing; user-select: none; } .cl-bento.dragging, .cl-bento.gliding { scroll-snap-type: none !important; }
  .cl-gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding: 6px clamp(20px, 4vw, 48px) 14px; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: clamp(20px, 4vw, 48px); } .cl-gallery::-webkit-scrollbar { display: none; }
  .cl-table { margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); border-radius: 0; padding-inline: 0; } .cl-design { flex: 0 0 min(76%, 290px); scroll-snap-align: start; scroll-snap-stop: always; }
  .cl-gallery.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; } .cl-gallery.dragging button { pointer-events: none; }
  .cl-rel-grid { grid-template-columns: minmax(0, 1fr); } .cl-trails i:nth-child(n+3) { display: none; }
  .cl-enquiry .form .btn, .cl-cta .btn { white-space: normal; text-align: center; line-height: 1.25; width: 100%; }
  .cl-hra-item { padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-paper-hero, .cl-tag, .cl-seal, .cl-env, .hv-sheet, .hv-seal, .cl-cta-env, .cl-ico *, .lab-stage::after { animation: none !important; }
  .cl-ico * { stroke-dashoffset: 0 !important; } .cl-paper mark, .cl-paper mark.mk { background-size: 100% 100% !important; }
  .cl-idea, .cl-node-body, .cl-step-body { opacity: 1 !important; transform: none !important; } .cl-hra-line::after { transform: scaleX(1) !important; }
  .pv-s1, .pv-s2, .pv-s3, .pv-s4, .pv-s5 { opacity: 1 !important; transform: none !important; }
}
.cl-contact-panel { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 60px); border-radius: 28px; background: linear-gradient(135deg, #fff 0%, var(--green-soft) 100%); border: 1px solid rgba(47, 125, 23, .22); box-shadow: 0 40px 80px -50px rgba(27, 110, 0, .45); overflow: hidden; }
.cl-contact-panel::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126, 217, 87, .35), transparent); pointer-events: none; }
.cl-contact-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .cl-contact-copy .display { margin: 0; } .cl-contact-copy > p:not(.eyebrow) { margin: 0; color: var(--mute-l); max-width: 52ch; }
.cl-contact-ways { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cl-contact-ways a { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(8, 8, 8, .08); transition: transform .35s, border-color .35s, box-shadow .35s; min-width: 0; }
.cl-contact-ways a:hover { transform: translateX(6px); border-color: rgba(47, 125, 23, .5); box-shadow: 0 18px 36px -24px rgba(27, 110, 0, .5); }
.cl-cw-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #080808; } .cl-cw-ic svg { width: 20px; height: 20px; }
.cl-contact-ways small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-l); } .cl-contact-ways strong { display: block; overflow-wrap: anywhere; color: #080808; }
@media (max-width: 900px) { .cl-contact-panel { grid-template-columns: 1fr; border-radius: 22px; } .cl-contact-copy .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cl-contact-ways a { transition: none; } }
@media (prefers-reduced-motion: reduce) { .cl-rung { opacity: 1; transform: none; } .cl-rung::before { transform: scaleY(1); } .cl-why-mark { animation: none; } }
@media (max-width: 720px) { .cl-rung { grid-template-columns: auto minmax(0, 1fr); transform: translateY(16px); } .cl-rung-tick { display: none; } }
@media (max-width: 720px) { .cl-contact-ways strong { overflow-wrap: break-word; word-break: normal; font-size: .93rem; } .cl-contact-ways a { padding: 14px 16px; gap: 12px; } .cl-hra-visual { max-width: 260px; } .hv-seal { right: -6px; } }
@media (max-width: 900px) { .cl-hra-visual { margin-bottom: 36px; } }
@media (max-width: 720px) {
  .cl-rel-grid { gap: 10px; }
  .cl-rel-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: 16px; height: auto; }
  .cl-rel-grid strong { font-size: 1rem; grid-column: 1; } .cl-rel-grid span { font-size: .84rem; line-height: 1.4; grid-column: 1; }
  .cl-rel-grid .ic { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; width: 18px; height: 18px; }
}