@import url('./goal-story-art.css?v=185');

/* Native sticky cards build a physical stack; each incoming scene owns its curvature. */
.cf-goal-section { background:#141919; padding-bottom:110px; }
.cf-goal-section>.cf-drawing-line { display:none; }
.cf-story-layout { position:relative; z-index:2; max-width:var(--cf-rail-story,1740px); margin:90px auto 0; }
.cf-story-intro { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; gap:10%; margin-bottom:80px; }
.cf-story-intro h2 { font-size:clamp(46px,5.7vw,104px); font-weight:400; letter-spacing:-.055em; line-height:1.02; }
.cf-story-intro h2 em { color:#aebfb7; }
.cf-story-intro-aside { max-width:380px; padding-bottom:8px; }
.cf-story-intro-copy { color:#a9b5b0; font-size:clamp(15px,1.25vw,19px); line-height:1.65; }
.cf-story-scroll-cue { display:flex; align-items:center; gap:16px; margin-top:30px; color:#9dafaa; font-size:11px; letter-spacing:.025em; }
.cf-story-scroll-cue>span { color:#36b8e8; font-size:25px; }
.cf-story-stage { position:relative; min-width:0; }
.cf-story-grid-wrap { position:absolute; inset-block:0; left:50%; width:var(--story-grid-width,100%); transform:translateX(-50%); pointer-events:none; overflow:clip; z-index:0; }
.cf-story-depth-grid { position:sticky; top:0; display:block; width:100%; height:100vh; height:100dvh; overflow:hidden; opacity:0; pointer-events:none; }
/* Feather the section's real entrance/exit, not every viewport edge. Once
   inside the tunnel both fades are off-screen, preserving the full-height room. */
.cf-story-depth-grid {
 --grid-feather:clamp(96px,18vh,240px);
 --grid-edge-mask:linear-gradient(to bottom,
  transparent var(--grid-entry-y,0px),
  #0003 calc(var(--grid-entry-y,0px) + var(--grid-feather)*.3),
  #000b calc(var(--grid-entry-y,0px) + var(--grid-feather)*.7),
  #000 calc(var(--grid-entry-y,0px) + var(--grid-feather)),
  #000 calc(var(--grid-exit-y,100vh) - var(--grid-feather)),
  #000b calc(var(--grid-exit-y,100vh) - var(--grid-feather)*.7),
  #0003 calc(var(--grid-exit-y,100vh) - var(--grid-feather)*.3),
  transparent var(--grid-exit-y,100vh));
 -webkit-mask-image:var(--grid-edge-mask);
 mask-image:var(--grid-edge-mask);
 mask-mode:alpha;
}
.cf-story-depth-grid path { vector-effect:non-scaling-stroke; }
html[data-motion="off"] .cf-story-grid-wrap { display:none; }
@media (prefers-reduced-motion:reduce), (forced-colors:active) { .cf-story-grid-wrap { display:none; } }
.cf-story-stack { display:flow-root; }
/* Gaps belong to flow markers, not sticky boxes: a sticky bottom margin
   otherwise forces every earlier card to release before the last one arrives. */
.cf-story-stack::after { content:""; display:block; height:clamp(180px,38svh,360px); }
.cf-story-marker { position:relative; height:0; pointer-events:none; }
.cf-story-marker:not(:first-child) { height:clamp(190px,38svh,360px); }
.cf-story-frame { position:relative; top:auto; z-index:calc(var(--story-index,0) + 1); min-width:0; perspective:1600px; perspective-origin:var(--story-vanish-x,50%) var(--story-vanish-y,50%); }
.cf-story-stack-ready .cf-story-frame { position:sticky; top:var(--story-stack-top,110px); }
.cf-story-frame:last-child { margin-bottom:0; }
.cf-story-frame.is-story-focused { z-index:20; }
.cf-story-frame.is-story-focused .cf-story-card { opacity:1; pointer-events:auto; filter:none; }
.cf-story-card { --story-accent:#53b8db; position:relative; min-width:0; min-height:clamp(480px,calc(100svh - 205px),740px); border:1px solid #829aab55; border-radius:0; color:#e9efeb; background:linear-gradient(125deg,#2d3a41 0%,#1d292f 40%,#152128 90%); box-shadow:inset 0 1px 0 #d8e5e055,inset 1px 0 0 #a2b8c622,inset 0 -3px 0 #3b5663,0 30px 55px -40px #000b; filter:var(--tunnel-focus-filter,none); opacity:var(--tunnel-opacity,1); pointer-events:var(--tunnel-pointer,auto); transform-origin:50% 50%; transform:translateZ(var(--tunnel-depth,0px)) rotateX(var(--tunnel-rotate,0deg)) scale(var(--tunnel-scale,1)) rotateX(var(--story-pointer-rx,0deg)) rotateY(var(--story-pointer-ry,0deg)); }
.cf-story-card[data-story-card="improve"] { --story-accent:#aad1b9; background:linear-gradient(125deg,#34463e,#1f342e 45%,#1b2925); }
.cf-story-card[data-story-card="connect"] { --story-accent:#6dced3; background:linear-gradient(125deg,#304447,#1c3036 45%,#17272c); }
.cf-story-card[data-story-card="website"] { --story-accent:#66c7ec; background:linear-gradient(125deg,#324654,#1d3440 45%,#172831); }
.cf-story-card[data-story-card="brand"] { --story-accent:#73c9e6; background:linear-gradient(125deg,#34434b,#202f37 45%,#19262e); }
.cf-story-card[data-story-card="reliability"] { --story-accent:#9acdc5; background:linear-gradient(125deg,#344545,#213434 45%,#182929); }
.cf-story-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:#040a13; opacity:var(--tunnel-shade,0); pointer-events:none; z-index:2; }
.cf-story-card::after { content:""; position:absolute; inset:2px; border:1px solid #c3d2d70b; border-radius:inherit; pointer-events:none; }
.cf-story-card-content { min-height:inherit; padding:clamp(28px,3.5vw,64px); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto 1fr; align-items:center; column-gap:3%; row-gap:30px; }
.cf-story-card-top { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:16px; color:#9ab1b8; font-size:10px; line-height:1.4; letter-spacing:.12em; }
.cf-story-card-top>span:last-child { color:var(--story-accent); white-space:nowrap; }
.cf-story-copy { min-width:0; padding:10px 0 24px; }
.cf-story-card h3 { max-width:610px; font-size:clamp(38px,4.1vw,74px); font-weight:400; line-height:1.02; letter-spacing:-.05em; text-wrap:balance; margin:0 0 16px; }
/* Name the service first, then its benefit; both remain a single reading group. */
.cf-story-benefit { max-width:35ch; margin:0 0 22px; font-size:clamp(18px,1.6vw,25px); font-weight:500; line-height:1.4; letter-spacing:-.015em; color:var(--cf-ink,#e4efeb); text-wrap:pretty; }
.cf-story-description { margin:0; font-size:clamp(14px,1.15vw,18px); line-height:1.65; color:#b8c8c9; max-width:430px; }
.cf-story-cta { display:inline-flex; max-width:100%; min-height:44px; margin-top:30px; padding-bottom:11px; font-size:clamp(12px,1vw,16px); color:#e9efeb; gap:24px; border-color:#84b5c366; text-align:left; }
.cf-story-cta>span { color:var(--story-accent); flex:none; }
.cf-story-art-slot { width:110%; max-width:calc(100% + 32px); margin-left:-2%; aspect-ratio:1.3; align-self:center; }
.cf-story-outro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:60px 0 0; padding-top:25px; border-top:1px solid #b9cdc31c; }
.cf-story-outro>p { color:#8eaaa1; font-size:14px; }
.cf-story-unsure { color:#d4ddd7; font-size:14px; gap:32px; }
.cf-story-cta:focus-visible,.cf-story-unsure:focus-visible { outline:2px solid #36b8e8; outline-offset:7px; }
.cf-goal-cable { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.2; pointer-events:none; overflow:hidden; }

/* Preserve a complete reading card on short desktop windows. */
@media (min-width:901px) and (max-height:850px) {
 .cf-story-card-content { padding:24px 32px; row-gap:18px; }
 .cf-story-art-slot { max-width:min(calc(100% + 32px),max(300px,calc((100svh - 290px)*1.3))); justify-self:center; margin-left:0; }
}

@media (max-width:1000px) {
 .cf-story-intro { gap:7%; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
 .cf-story-card-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:32px; gap:25px; }
 .cf-story-card h3 { font-size:clamp(35px,4.6vw,48px); }
 .cf-story-art-slot { width:110%; }
}
@media (max-width:900px) {
 .cf-goal-section { padding-bottom:65px; }
 .cf-story-layout { margin-top:48px; }
 .cf-story-intro { display:block; margin-bottom:46px; }
 .cf-story-intro h2 { font-size:clamp(40px,8.5vw,60px); }
 .cf-story-intro-aside { max-width:420px; margin-top:24px; padding:0; }
 .cf-story-intro-copy { font-size:15px; }
 .cf-story-scroll-cue { margin-top:20px; font-size:10px; }
 .cf-story-marker:not(:first-child) { height:clamp(120px,24svh,200px); }
 .cf-story-card { min-height:0; }
 .cf-story-card-content { padding:26px; grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:20px; }
 .cf-story-card-top { font-size:8px; }
 .cf-story-copy { display:contents; }
 .cf-story-card h3 { font-size:clamp(34px,7.5vw,50px); margin:8px 0 0; grid-row:2; max-width:440px; }
 .cf-story-art-slot { grid-row:4; width:100%; max-width:100%; margin:0; }
 .cf-story-benefit { grid-row:3; margin:0; font-size:18px; max-width:36ch; }
 .cf-story-description { font-size:14px; margin:0; max-width:500px; }
 .cf-story-cta { width:fit-content; margin:0 0 5px; font-size:12px; gap:20px; }
 .cf-story-outro { align-items:flex-start; flex-direction:column; gap:18px; margin-top:38px; }
 .cf-story-outro>p,.cf-story-unsure { font-size:12px; }
 .cf-goal-cable { opacity:.13; }
}
@media (max-width:360px) {
 .cf-story-card-content { padding:22px 19px; gap:18px; }
 .cf-story-card h3 { font-size:32px; }
 .cf-story-description { font-size:13px; }
 .cf-story-benefit { font-size:17px; }
}
html[data-motion="off"] .cf-story-frame { position:relative; top:auto; }
html[data-motion="off"] .cf-story-card { transform:none !important; filter:none !important; opacity:1 !important; pointer-events:auto !important; }
html[data-motion="off"] .cf-story-card::before { opacity:0; }
@media (prefers-reduced-motion:reduce) {
 .cf-story-stack-ready .cf-story-frame { position:relative; top:auto; }
 .cf-story-card { transform:none !important; filter:none !important; opacity:1 !important; pointer-events:auto !important; }
 .cf-story-card::before { opacity:0; }
}

@media (forced-colors:active) { .cf-story-card { filter:none !important; } }