/* Home hierarchy: quiet companion, real proof, one continuous process. */
.canvas-compact{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:40px;display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:center}
.canvas-mini{background:#fcfcf8;border:1px solid #cbd5c9;box-shadow:0 12px 25px #183b3c0a;border-radius:8px;padding:18px;transform:rotate(-3deg)}
.canvas-mini>span{display:block;font-size:8px;color:var(--muted);margin-bottom:12px}.canvas-mini>b{font-size:18px;font-weight:500;line-height:1.15;display:block;letter-spacing:-.03em}.canvas-mini>div{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:14px}.canvas-mini i{height:24px;background:#e9eee6;border:1px solid #d4ddcf}
.canvas-summary .intro{margin-bottom:10px}.canvas-summary h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:12px}.canvas-summary>p:not(.intro){font-size:16px;color:var(--muted);max-width:55ch;margin-bottom:16px}.canvas-format{display:inline-block;font-size:12px;color:var(--muted);margin-left:24px}
.kfs-showcase{padding-block:88px}.case-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}.case-heading h2{margin-bottom:0}.case-heading>p{max-width:34ch;color:var(--muted);margin-bottom:5px}.kfs-window{display:block;border:1px solid #c8d2cc;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 50px #183b3c0c}.case-chrome{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#e9eee8;font-size:11px;color:#526b61}.case-chrome>span:first-child{letter-spacing:3px;color:#a0b2a6}.kfs-window img{display:block;width:100%;height:auto}.case-caption{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:25px}.case-caption h3{font-size:20px;margin-bottom:4px}.case-caption p{font-size:13px;color:var(--muted);margin:0}
.process-story{background:#e5ece5;padding-block:72px;scroll-margin-top:100px}.process-stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.process-copy>p:not(.intro){max-width:39ch;color:var(--muted)}.process-copy h2{margin-bottom:20px}.process-steps{list-style:none;margin:25px 0 28px;padding:0}.process-steps button{display:flex;align-items:start;gap:18px;text-align:left;border:0;border-left:2px solid #bfcec1;background:transparent;padding:13px 0 13px 18px;width:100%;color:var(--muted);transition:border-color 200ms,color 200ms}.process-steps button[aria-pressed=true]{border-left-color:var(--ink);color:var(--ink)}.process-steps button>span{font-size:12px;padding-top:4px}.process-steps strong{font-weight:500;font-size:19px;display:block}.process-steps small{font-size:12px;display:block;margin-top:4px;line-height:1.6}.process-panels{min-height:420px;display:grid;align-items:center;perspective:1000px}.process-panel{grid-area:1/1;min-height:400px;border-radius:18px;background:#f8f6ec;padding:38px;border:1px solid #c4d1c2;box-shadow:0 22px 45px #183b3c12;transition:opacity 350ms var(--ease),transform 450ms var(--ease)}.panel-label{display:block;font-size:10px;letter-spacing:.08em;color:var(--muted);margin-bottom:25px}.process-panel h3{font-size:clamp(26px,3vw,40px);line-height:1.12;letter-spacing:-.04em;margin-bottom:25px}.story-slip{padding:14px 18px;margin-top:10px;border:1px solid #d2dacb;background:#fffdf5;border-radius:6px;font-size:15px}.story-slip:nth-of-type(2){transform:rotate(2deg)}.story-slip:nth-of-type(3){transform:rotate(-1deg)}.process-design{background:#f5f0e4}.process-browser{position:relative;overflow:hidden;min-height:280px;border:1px solid #d4d9ca;border-radius:9px;padding:18px;background:#f9f6ec}.process-browser>span{display:block;font-size:9px;border-bottom:1px solid #d4d9ca;padding-bottom:14px;margin-bottom:25px}.process-browser h3{font-family:Serif,Georgia,serif;font-weight:500;font-size:38px;max-width:10ch;position:relative;z-index:1}.process-browser p{font-size:10px;margin:28px 0 0}.process-arch{position:absolute;right:20px;bottom:58px;width:95px;height:135px;border:26px solid #a7b69a;border-bottom:0;border-radius:80px 80px 0 0}.process-check{background:var(--ink);color:var(--paper)}.process-check .panel-label{color:#b8ccbd}.process-check ul{list-style:none;padding:0;margin:0 0 25px;font-size:16px}.process-check li{border-bottom:1px solid #ffffff24;padding:12px 0}.process-check li:before{content:'Ã¢Å“â€œ';margin-right:12px;color:#bfceb4}.process-check p{color:#c7d5c9;font-size:13px;margin:0}.process-description{text-align:center;font-size:13px;color:var(--muted);margin:22px 0 4px}.process-motion{display:block;margin:auto;min-height:44px;padding:8px;background:transparent;border:0;font-size:12px}
.process-story:not(.process-enhanced) .process-panel+.process-panel{margin-top:15px}.process-story:not(.process-enhanced) .process-panels{display:block}.process-story:not(.process-enhanced) .process-description,.process-story:not(.process-enhanced) .process-motion{display:none}.process-enhanced .process-panel{opacity:0;transform:translateY(18px) scale(.98);visibility:hidden}.process-enhanced .process-panel.is-current{opacity:1;transform:translateY(0) scale(1);visibility:visible}.process-enhanced .process-panel.is-leaving{opacity:0;transform:translateY(-12px) scale(.98);visibility:visible}
/* Paid scope follows the explanation, with less visual weight. */
.website-offer-grid{grid-template-columns:1.2fr .8fr}.website-offer-grid article:first-child{background:#e8eee6}.website-offer-grid article:last-child{background:transparent;border:1px solid var(--line)}
@media(hover:hover) and (pointer:fine){.process-steps button:hover{color:var(--ink);border-left-color:#7e9989}.kfs-window{transition:transform 250ms var(--ease)}.kfs-window:hover{transform:translateY(-3px)}}
@media(max-width:760px){.canvas-compact{grid-template-columns:86px 1fr;gap:22px;padding-block:30px}.canvas-mini{padding:10px}.canvas-mini>span{font-size:5px;margin-bottom:8px}.canvas-mini>b{font-size:10px}.canvas-mini i{height:14px}.canvas-mini>div{grid-template-columns:1fr 1fr;margin-top:8px}.canvas-summary .intro{font-size:11px;margin-bottom:8px}.canvas-summary h2{font-size:25px}.canvas-summary>p:not(.intro){font-size:14px;line-height:1.6;margin-bottom:12px}.canvas-summary .text-link{font-size:14px;display:inline-flex;align-items:center;min-height:44px}.canvas-format{display:block;margin:4px 0 0;font-size:10px}.kfs-showcase{padding-block:52px}.case-heading{display:block;margin-bottom:24px}.case-heading h2{font-size:36px}.case-heading>p{font-size:15px;margin:18px 0 0;max-width:39ch}.case-chrome{padding:10px 12px;font-size:9px}.case-caption{align-items:start;flex-direction:column;gap:12px;margin-top:20px}.case-caption h3{font-size:19px}.case-caption .text-link{min-height:44px;display:inline-flex;align-items:center}.process-story{padding-block:46px}.process-stage{grid-template-columns:1fr;gap:28px}.process-copy h2{font-size:36px}.process-copy>p:not(.intro){font-size:15px;margin-bottom:18px}.process-steps{margin:18px 0 24px}.process-steps button{padding-block:10px}.process-steps strong{font-size:17px}.process-steps small{font-size:12px}.process-panel{padding:26px;min-height:355px}.process-panels{min-height:355px}.process-panel h3{font-size:32px}.process-browser h3{font-size:31px}.process-browser{min-height:248px}.process-arch{width:75px;height:110px;border-width:20px;right:12px}.process-description{font-size:12px}.website-offer-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.process-panel,.kfs-window,.process-steps button{transition:none!important}.process-enhanced .process-panel{transform:none}.process-motion{display:none}}

/* Two examples, two brands. Keep screenshots complete rather than cropping the story. */
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}.case-grid article{min-width:0}.case-grid .kfs-window{background:#eef1eb}.case-grid .kfs-window img{aspect-ratio:16/9;object-fit:contain}.case-grid .case-caption{align-items:flex-start;flex-wrap:wrap;gap:12px}.case-note{font-size:12px;color:var(--muted);margin-top:24px;max-width:75ch}.process-steps button{touch-action:manipulation}.process-steps button:focus-visible,.process-motion:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:760px){.case-grid{grid-template-columns:1fr;gap:32px}.case-heading{align-items:flex-start;flex-direction:column;gap:18px}.case-chrome{padding:10px 12px}.case-caption .text-link{font-size:13px}.case-note{line-height:1.6}}

/* Customer hierarchy: work leads; figures support it. */
.live-progress{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px 48px;padding-block:44px}.live-progress .metrics-heading .intro{margin-bottom:12px}.live-progress h2{margin:0;max-width:17ch}.live-progress dd{font-size:clamp(44px,4vw,64px)}.live-progress .metric-note,.live-progress [data-metric-status]{grid-column:1/-1;margin:0}.live-progress [data-metric-status]:empty{display:none}.case-heading>p{max-width:38ch}.case-grid .case-caption h3{line-height:1.3}.canvas-summary>p{max-width:58ch}.process-copy>p:not(.intro){line-height:1.7}.design-directions{border-top:1px solid var(--line);padding-block:24px}.design-directions>summary{font-size:17px;cursor:pointer;min-height:44px;display:list-item;align-content:center}.design-directions>summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}.design-directions>.container{width:100%}.case-grid [id]{scroll-margin-top:110px}.case-heading h2,.canvas-summary h2,.metrics-heading h2,.process-copy h2{text-wrap:balance}
@media(max-width:760px){.live-progress{grid-template-columns:1fr;gap:24px;padding-block:32px}.live-progress h2{font-size:28px;max-width:none}.live-progress dd{font-size:48px}.live-progress dt{font-size:14px}.case-heading>p{max-width:42ch}}

/* Jobs lead; the website remains a complete, separate way to begin. */
.hero-copy h1{font-size:clamp(42px,5.1vw,72px);max-width:14ch;line-height:1.04;text-wrap:balance}.hero-copy .lead{font-size:17px;line-height:1.65;max-width:43ch;margin:24px 0}.hero-copy .hero-scope{font-size:12px;line-height:1.6;color:var(--muted);max-width:48ch;margin:20px 0 0}.operations-intro{padding-block:68px}.operations-intro .section-head>p{max-width:38ch;color:var(--muted)}.operations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.operations-grid article{border-top:1px solid var(--line);padding-top:24px;min-width:0}.operations-grid h3{font-size:27px;line-height:1.2;margin:0 0 15px}.operations-grid p{font-size:16px;line-height:1.7;color:var(--muted);max-width:32ch;margin-bottom:18px}.operations-grid .text-link{display:inline-flex;align-items:center;min-height:44px}.operations-page .page-hero{max-width:860px}.operations-page .page-hero .lead{max-width:55ch}.operations-page .page-hero h1{font-size:clamp(40px,6vw,76px);max-width:19ch}.operations-page .operations-note{font-size:13px;line-height:1.7;color:var(--muted);max-width:76ch}.operations-page .workflow{padding-block:55px;border-top:1px solid var(--line);scroll-margin-top:100px}.workflow-heading{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start;margin-bottom:30px}.workflow-heading h2{font-size:clamp(32px,4vw,48px);line-height:1.12;margin:0;max-width:20ch}.workflow-heading>p{color:var(--muted);line-height:1.75;max-width:48ch}.workflow-path{list-style:none;padding:0;margin:0 0 32px;display:flex;align-items:stretch;gap:10px}.workflow-path li{flex:1;padding:16px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;line-height:1.55;position:relative}.workflow-path li+li:before{content:'→';position:absolute;left:-11px;top:40%;font-size:13px;background:var(--paper)}.workflow-path .human-step{background:#e5ece5;border-color:#9bb4a5}.workflow-responsibilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-bottom:25px}.workflow-responsibilities h3{font-size:20px;margin-bottom:12px}.workflow-responsibilities p{font-size:15px;line-height:1.75;color:var(--muted)}.workflow .actions{margin-block:24px 16px}.operations-page .scope-footnote{max-width:80ch;line-height:1.7}.operations-page .scope-panel{padding-block:40px 65px;border-top:1px solid var(--line)}.operations-page .scope-panel h2{font-size:32px}.operations-page .scope-panel p{max-width:68ch;color:var(--muted);line-height:1.75}.operations-page a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@media(max-width:760px){.hero-copy h1{font-size:clamp(40px,10vw,62px);max-width:15ch}.hero-copy .lead{font-size:16px}.hero-copy .actions{align-items:flex-start;flex-direction:column;gap:14px}.hero-copy .text-link{display:inline-flex;min-height:44px;align-items:center}.operations-intro{padding-block:45px}.operations-grid{grid-template-columns:1fr;gap:25px}.operations-grid p{max-width:48ch}.workflow-heading{grid-template-columns:1fr;gap:16px}.workflow-responsibilities{grid-template-columns:1fr;gap:16px}.workflow-responsibilities h3{margin-bottom:6px}.workflow-path{flex-direction:column;gap:12px}.workflow-path li{padding:13px 16px}.workflow-path li+li:before{content:'↓';left:24px;top:-15px}.operations-page .workflow{padding-block:35px}.operations-page .page-hero h1{font-size:clamp(38px,10vw,60px)}}
