/* yorxen.com home — "One line". Shared tokens, pen layer and parts live in yx.css. */

/* ── Hero: the promise, then the street ── */
.hero{padding:clamp(40px,4.6vw,72px) var(--gut) 0;
  background:radial-gradient(ellipse 58% 38% at 74% 58%,rgba(250,248,243,.7) 0%,rgba(244,242,236,.38) 46%,rgba(233,231,226,0) 82%)}
.hero-copy{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:26px 64px;align-items:start}
.hero h1{grid-column:1/-1;font-weight:400}
.hero h1 .h-xl{display:block}
.hero h1 .stand{display:block;margin-top:18px}
.hero .lede{font-size:17px;line-height:1.66;color:var(--ink-2);max-width:46ch}
.hero .lede-a{grid-column:1;grid-row:2;font:400 clamp(20px,1.8vw,24px)/1.4 var(--serif);color:var(--ink);max-width:23em}
.hero .lede-b{grid-column:2;grid-row:2;align-self:start;padding-top:4px}
.hero .acts{grid-column:1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px}
.hero .scene{max-width:var(--max);margin:clamp(28px,3vw,48px) auto 0}
.hero .office{display:none}
.street .t-fi{transform:translateX(-50%)}

/* ── The story: four drawn moments on one thread ── */
.story{position:relative;padding-bottom:clamp(40px,4vw,64px)}
.story>.sec-head{position:relative;z-index:2}
.story>.thread{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;margin:0;z-index:1;pointer-events:none;overflow:visible}
.thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.thread .th-wait{stroke:var(--blue);stroke-width:1.8;stroke-dasharray:2 9;opacity:.75}
.thread .th-go{stroke:var(--blue);stroke-width:2.2}
.thread .th-node{transition:opacity .45s ease,transform .6s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3)}
.thread .th-node.on{opacity:1;transform:none}
.thread .n0{fill:var(--ink)}
.thread .n1{fill:var(--paper);stroke:var(--blue);stroke-width:1.8}
.thread .n2{fill:var(--blue);stroke:var(--paper);stroke-width:3}
.thread .n3{fill:var(--sky);stroke:var(--ink);stroke-width:1.5}
.thread .th-env{opacity:0;transition:opacity .25s}
.thread .th-env.on{opacity:1}
.thread .th-env rect{fill:var(--paper-hi);stroke:var(--blue);stroke-width:1.6}
.thread .th-env path{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round}
.story.th-live:not(.th-arrived) .doors .env{opacity:0}
.story .doors .env{transition:opacity .9s ease}
/* the named provider: an HTML label like every other scene's, so it stays 12.5px at any width (SVG text shrank with the drawing) */
/* the label hangs a fixed 6px under the ground line at every width. The ground line is 11% of the drawing's height above
   the drawing's foot (measured 25.10, 320 to 1440px), the figure has 12px of room under the drawing, and the label is
   20.6px tall, so its foot is 11% of the figure's height less 16px above the figure's foot. The earlier 2.45% put it on
   the line below ~1100px and on phones. The darker blue: over the shaded wash #2F5F96 measured 3.6 to 4.2:1 (audit 25.10), this one 6.2:1 */
.scene.doors{padding-bottom:12px}
.doors .door-tag{left:63.36%;bottom:calc(11% - 16px);transform:translateX(-50%);transition:opacity .8s ease .2s}
.doors .tag.t-fi b{color:#264F80}
/* once the envelope has arrived the thread's end ring would sit behind it */
.story.th-arrived .thread .n3{opacity:0}
.story.th-live:not(.th-arrived) .doors .door-tag{opacity:0}
.beats{position:relative;z-index:2;display:grid;gap:0}
.beat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.beat:nth-child(1) .scene{grid-column:1/8}.beat:nth-child(1) .beat-copy{grid-column:9/13}
.beat:nth-child(2) .scene{grid-column:7/13;grid-row:1}.beat:nth-child(2) .beat-copy{grid-column:2/6;grid-row:1}
.beat:nth-child(3) .scene{grid-column:2/8}.beat:nth-child(3) .beat-copy{grid-column:9/13}
.beat:nth-child(4) .scene{grid-column:5/13;grid-row:1}.beat:nth-child(4) .beat-copy{grid-column:1/5;grid-row:1}
.beats{row-gap:clamp(56px,6vw,96px)}
.label .knot{display:inline-block;width:0;height:0;margin-left:18px;vertical-align:middle}
.label .knot-l{margin-left:-22px;margin-right:22px}
.beat-copy{position:relative;padding:24px 0}
.beat-copy .label{color:var(--mute);margin-bottom:14px}
.beat-copy .lbl-blue{color:var(--blue)}
.beat-copy p:last-child{margin-top:12px;color:var(--ink-2);max-width:40ch}

.arrives{position:relative;z-index:2;margin-top:clamp(72px,8vw,120px)}
.travels .h-l{font-size:clamp(32px,3.2vw,48px);max-width:16ch}


/* ── Both sides of the line ── */
.sides .facing{margin-bottom:clamp(8px,1vw,16px)}
.sides-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 18%}
.sides-grid .side:first-child{padding-left:7%}
.facing .tie-p,.facing .fi-p{display:none}
.side .label{color:var(--mute);margin-bottom:14px}
.side p{color:var(--ink-2);max-width:42ch;margin-top:12px}
.side .more{margin-top:14px}
/* links in running text (the Companies House record, the privacy page, the address): the quiet underline the inner pages use */
.side p a,.qa details p a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hair-2);transition:color .2s,text-decoration-color .2s}
.side p a:hover,.qa details p a:hover{color:var(--blue);text-decoration-color:currentColor}
.paidlate{margin-top:clamp(56px,6vw,88px);padding-top:26px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.paidlate .label{color:var(--mute);margin-right:6px}
.paidlate b{color:var(--ink);font-weight:600}

/* ── Questions ── */
.sec.faq{padding-top:clamp(56px,6vw,96px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 80px;align-items:start}
.faq-grid>h2{margin-top:6px}
.qa summary[data-pen]>.pen-layer{top:-3px}
.qa summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;min-height:72px;padding:14px 56px 14px 0;font:400 clamp(19px,1.7vw,23px)/1.3 var(--serif);color:var(--ink);text-wrap:balance}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before,.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:18px;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.qa summary::after{transform:rotate(90deg)}
.qa details[open] summary::after{transform:rotate(0)}
.qa summary:hover{color:var(--blue)}
.qa details p{padding:0 56px 26px 0;color:var(--ink-2);max-width:62ch}
.qa-end{height:1px}

/* ── If we wrote to you ── */
.close{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 64px;align-items:center;padding-top:clamp(56px,6vw,88px)}
.close>*{margin:0}
.close .letter{max-width:250px;justify-self:end;width:100%}
.close-copy{max-width:680px}
.close .stand{margin-top:20px;max-width:28ch}
.close .acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;margin-top:32px}
.sec.close{max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}

/* ── Phone: each scene composed for a narrow screen, the thread runs down the right edge ── */
@media(max-width:860px){
  .hero{display:flex;flex-direction:column;padding-top:36px;background:radial-gradient(ellipse 120% 30% at 70% 66%,rgba(250,248,243,.7) 0%,rgba(233,231,226,0) 80%)}
  .hero-copy{display:contents}
  .hero h1{order:1}
  .hero .lede-a{order:2;margin-top:18px;font-size:19px}
  .hero .acts{order:3;margin-top:16px;gap:0 28px}
  .hero .office{order:4;display:block;margin:16px 0 0;width:86%;max-width:none}
  .hero .lede-b{order:5;margin:8px 0 0;padding:28px 0 8px;border-top:1px solid var(--hair);max-width:none;font-size:16px}
  .hero h1 .stand{margin-top:14px;font-size:22px}
  .hero .street{display:none}
  .office .tag b{font-size:12px}
  .office .t-co{left:64%!important;transform:translateX(-50%)}

  .beats{gap:40px}
  .beat,.beat.flip{grid-template-columns:1fr}
  .beat:nth-child(n) .scene,.beat:nth-child(n) .beat-copy{grid-column:1;grid-row:auto}
  .beat+.beat{margin-top:0}
  .beat .scene{margin:0 40px 0 -6px}
  .beat .beat-copy{padding:8px 48px 0 0}
  .scene{--pen:1.15px}
  /* the strip bleeds off the left edge on purpose; on the right its cut is feathered so the fourth door does not end on a straight edge */
  .beat .doors{margin:0 40px 0 -20px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .beat .doors svg{width:190%;max-width:none;margin-left:-82%}
  .beat .doors>.tone{width:190%;left:-82%}
  .beat .doors .door-tag{left:38.38%}
  .arrives{grid-template-columns:1fr;gap:36px;padding-right:44px}
  .arrives{padding-right:0}
  .sides .facing{margin:0 -8px 12px}
  .sides-grid{grid-template-columns:1fr;gap:40px}
  .sides-grid .side:first-child{padding-left:0}
  .faq-grid{grid-template-columns:1fr}
  .qa summary{min-height:64px;font-size:19px}
  .close{grid-template-columns:1fr;gap:28px}
  .close .letter{max-width:170px;justify-self:start}
}
/* the envelope at the named door carries two address lines: the provider, and the company copied in */
/* phone hero: the provider's name sits above its dot, right of the lit window, in two short lines */
@media(max-width:860px){.office .t-fi b{white-space:normal;max-width:6.6em;text-align:right;line-height:1.25}}

/* round 3 (judges 25.10): no line runs wider than about 72 characters (ch is the width of a zero, about 0.6em, while text
   averages 0.45em, so 74ch gave 90 real characters; 60ch gives 76 at most) */
.paidlate{max-width:min(var(--max),60ch)}
/* the note under the two sides starts on the heading's edge (it is centred in the max width, so margin-left is that offset,
   0 on a narrow screen), and the heading's own note starts on the right column's edge: same two columns and 18% gap as .sides-grid */
.sides .paidlate{margin-left:max(0px,calc((100% - var(--max)) / 2))}
.sides .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18%}
@media(max-width:860px){.sides .sec-head{grid-template-columns:1fr}}
/* between phone and desktop the doors strip starts a little inside the page: feather its left cut too */
@media(min-width:481px) and (max-width:860px){.beat .doors{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent)}}