/* ==========================================================================
   CREATIVEKRAFT SIGNATURE FOOTER  (scoped: .ck-fx)

   Art direction: big type, deep space, hairlines, restraint. The only colour
   events are the brand teal on hover and the primary CTA. Everything else is
   neutral so the typography carries the weight.

   Motion contract: the finished state is the DEFAULT state. Reveal offsets are
   applied only under .is-armed, which JavaScript adds after proving that
   IntersectionObserver actually delivers callbacks. No animation owns the
   opacity of real content unless the mechanism to un-hide it is known to work.
   ========================================================================== */

.ck-fx{position:relative;overflow:hidden;isolation:isolate;
  background:#040D0B;color:#fff;
  padding-block:clamp(72px,9vw,132px) 0;
  --fx-line:rgba(255,255,255,.10);
  --fx-dim:rgba(255,255,255,.44);
  --fx-dim2:rgba(255,255,255,.30)}
.ck-fx *{box-sizing:border-box}

/* ---------- depth layers ---------- */
.ck-fx__bg{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#03100E 0%,#040D0B 38%,#020908 100%)}
.ck-fx__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(72% 60% at 50% 8%,#000 0%,transparent 82%);
  mask-image:radial-gradient(72% 60% at 50% 8%,#000 0%,transparent 82%)}
.ck-fx__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 42% at 50% -4%,rgba(20,184,166,.16) 0%,rgba(4,13,11,0) 70%),
    radial-gradient(38% 40% at 92% 82%,rgba(15,118,110,.10) 0%,rgba(4,13,11,0) 68%)}
.ck-fx__noise{position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- oversized brand mark ----------
   The real logo asset, cropped past the right edge, barely there. --mx/--my are
   written by footer.js on desktop only; they default to 0 so the mark is static
   without JavaScript. */
.ck-fx__mark{position:absolute;top:clamp(40px,7vw,90px);right:-14%;width:min(78vw,1180px);
  pointer-events:none;z-index:0;opacity:.05;
  transform:translate3d(calc(var(--mx,0) * -16px),calc(var(--my,0) * -10px),0) scale(var(--fx-mark-s,1));
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.ck-fx__mark img{width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(.6)}

/* scroll-linked scale, zero JavaScript. transform only, so a stall leaves the
   mark visible at its final size rather than invisible. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ck-fx__mark{animation:ck-fx-mark linear both;
      animation-timeline:view();animation-range:entry 0% cover 46%}
  }
}
@keyframes ck-fx-mark{from{transform:translate3d(0,26px,0) scale(.9)}to{transform:none}}

.ck-fx__inner{position:relative;z-index:2;width:100%;max-width:1320px;margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px)}

/* ---------- shared kicker ---------- */
.ck-fx-kicker{font-family:var(--font-body);font-size:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fx-dim2);margin:0}

/* ==========================================================================
   01 CTA STAGE
   ========================================================================== */
.ck-fx-cta{position:relative;display:flex;flex-direction:column;
  padding-bottom:clamp(64px,8vw,110px)}
.ck-fx__rule{display:block;height:1px;width:100%;margin-bottom:clamp(38px,5vw,64px);
  background:linear-gradient(90deg,transparent,var(--fx-line) 18%,var(--fx-line) 82%,transparent);
  transform:scaleX(1);transform-origin:center}
.ck-fx-cta__eyebrow{font-family:var(--font-body);font-size:11.5px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:#2DD4BF;margin-bottom:clamp(20px,3vw,34px)}

.ck-fx-cta__h{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(38px,8.4vw,132px);line-height:.93;letter-spacing:-.045em;
  color:#fff;text-wrap:balance}
/* Each line is its own clipping window so the reveal slides from beneath a
   hard edge - the editorial "curtain" rather than a fade. */
.ck-fx-line{display:block;overflow:hidden;padding-bottom:.06em}
.ck-fx-line>span{display:block;will-change:transform}
.ck-fx-line--accent>span{color:#2DD4BF}

.ck-fx-cta__lede{margin:clamp(22px,3vw,34px) 0 0;max-width:44ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.66;color:var(--fx-dim)}

.ck-fx-cta__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,46px)}

/* ---------- buttons ---------- */
.ck-fx-btn{position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:18px 26px;border-radius:var(--radius-pill);text-decoration:none;
  font-family:var(--font-body);font-size:14.5px;font-weight:700;letter-spacing:.01em;
  background:#fff;color:#04120F;border:1px solid #fff;
  transform:translate3d(var(--bx,0),var(--by,0),0);
  transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .3s ease,
    border-color .3s ease,color .3s ease}
.ck-fx-btn__arw{display:inline-flex;flex:none;
  transition:transform .32s cubic-bezier(.22,1,.36,1)}
.ck-fx-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.ck-fx-btn:focus-visible{outline:2px solid #2DD4BF;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .ck-fx-btn:hover{background:#2DD4BF;border-color:#2DD4BF;color:#04120F}
  .ck-fx-btn:hover .ck-fx-btn__arw{transform:translateX(5px)}
  .ck-fx-btn--ghost:hover{background:#fff;border-color:#fff;color:#04120F}
}

/* ==========================================================================
   02 SERVICE WALL
   ========================================================================== */
.ck-fx-wall{padding-bottom:clamp(56px,7vw,96px)}
.ck-fx-wall__list{margin:clamp(20px,3vw,30px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--fx-line)}
.ck-fx-row{border-bottom:1px solid var(--fx-line)}
.ck-fx-row>a{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:clamp(14px,2.4vw,32px);
  padding:clamp(16px,2.2vw,26px) 4px;text-decoration:none;color:#fff;
  transform:translate3d(var(--rx,0),0,0);
  transition:transform .42s cubic-bezier(.22,1,.36,1),color .3s ease}
.ck-fx-row__n{font-family:var(--font-numeric);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;color:rgba(255,255,255,.26);
  transition:color .3s ease}
.ck-fx-row__t{font-family:var(--font-display);font-weight:800;
  font-size:clamp(19px,3.1vw,42px);line-height:1.06;letter-spacing:-.03em;
  min-width:0}
.ck-fx-row__m{font-size:13px;line-height:1.4;color:rgba(255,255,255,.30);
  text-align:right;max-width:26ch;
  opacity:0;transform:translateX(8px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.ck-fx-row__arw{display:inline-flex;flex:none;color:rgba(255,255,255,.28);
  transition:transform .38s cubic-bezier(.22,1,.36,1),color .3s ease}
/* the hairline that sweeps under the row on hover */
.ck-fx-row__line{position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:#2DD4BF;transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ck-fx-row>a:focus-visible{outline:2px solid #2DD4BF;outline-offset:-4px;border-radius:6px}
@media (hover:hover) and (pointer:fine){
  .ck-fx-row>a:hover{--rx:14px;color:#fff}
  .ck-fx-row>a:hover .ck-fx-row__n{color:#2DD4BF}
  .ck-fx-row>a:hover .ck-fx-row__arw{color:#2DD4BF;transform:translate(4px,-4px)}
  .ck-fx-row>a:hover .ck-fx-row__line{transform:scaleX(1)}
  .ck-fx-row>a:hover .ck-fx-row__m{opacity:1;transform:none}
  /* neighbouring rows recede so the hovered one owns the moment */
  .ck-fx-wall__list:hover .ck-fx-row>a{color:rgba(255,255,255,.42)}
  .ck-fx-wall__list:hover .ck-fx-row>a:hover{color:#fff}
}

/* ==========================================================================
   03 MARQUEE
   Two identical halves translated by -50%: seamless, GPU-only, no JavaScript.
   ========================================================================== */
.ck-fx-marquee{position:relative;z-index:2;overflow:hidden;
  padding-block:clamp(18px,2.2vw,26px);
  border-block:1px solid var(--fx-line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ck-fx-marquee__track{display:flex;width:max-content;
  animation:ck-fx-slide 42s linear infinite}
.ck-fx-marquee__g{display:flex;align-items:center;gap:clamp(16px,2vw,28px);
  padding-right:clamp(16px,2vw,28px);white-space:nowrap}
.ck-fx-marquee b{font-family:var(--font-display);font-weight:800;
  font-size:clamp(17px,2.2vw,30px);letter-spacing:-.02em;color:rgba(255,255,255,.16)}
.ck-fx-marquee span{font-family:var(--font-body);font-size:clamp(11px,1.1vw,13px);
  font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.26)}
.ck-fx-marquee i{font-style:normal;color:#2DD4BF;opacity:.55;font-size:12px}
@keyframes ck-fx-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ck-fx-marquee__track:hover{animation-play-state:paused}

/* ==========================================================================
   04 EDITORIAL NAVIGATION
   ========================================================================== */
.ck-fx-nav{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);
  padding-block:clamp(52px,7vw,88px)}

.ck-fx-nav__name{display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;color:#fff;text-decoration:none;
  transition:color .3s ease}
.ck-fx-nav__name:hover{color:#2DD4BF}
.ck-fx-nav__tag{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:0 10px;
  font-family:var(--font-body);font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#2DD4BF}
.ck-fx-nav__desc{margin:16px 0 0;max-width:38ch;font-size:14.5px;line-height:1.72;
  color:var(--fx-dim)}

.ck-fx-social{display:flex;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.ck-fx-social a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,
    color .3s ease,background-color .3s ease}
.ck-fx-social a:focus-visible{outline:2px solid #2DD4BF;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .ck-fx-social a:hover{transform:translateY(-3px);border-color:rgba(45,212,191,.55);
    color:#2DD4BF;background:rgba(45,212,191,.08)}
}

.ck-fx-nav__col ul{margin:18px 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:2px}
.ck-fx-nav__col a{position:relative;display:inline-flex;align-items:center;
  padding:9px 0;font-size:14.5px;color:var(--fx-dim);text-decoration:none;
  transition:color .3s ease}
/* thin underline sweep instead of a cursor gimmick */
.ck-fx-nav__col a>span{position:relative}
.ck-fx-nav__col a>span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:1px;background:#2DD4BF;transform:scaleX(0);transform-origin:right;
  transition:transform .38s cubic-bezier(.22,1,.36,1)}
.ck-fx-nav__col a:hover{color:#fff}
.ck-fx-nav__col a:hover>span::after{transform:scaleX(1);transform-origin:left}
.ck-fx-nav__col a:focus-visible{outline:2px solid #2DD4BF;outline-offset:3px;border-radius:4px}

.ck-fx-cl{display:flex;align-items:flex-start;gap:11px;padding:9px 0;
  font-size:14.5px;line-height:1.5;color:var(--fx-dim)}
.ck-fx-cl__i{display:inline-flex;flex:none;margin-top:2px;color:#2DD4BF;opacity:.75}
.ck-fx-cl a{padding:0;color:var(--fx-dim)}
.ck-fx-cl a:hover{color:#fff}

/* ==========================================================================
   05 EXIT WORDMARK  - the signature
   ========================================================================== */
.ck-fx-sign{position:relative;z-index:2;text-align:center;
  padding-block:clamp(20px,3vw,34px) clamp(24px,3vw,38px);
  border-top:1px solid var(--fx-line);overflow:hidden}
.ck-fx-sign__mark{display:block;text-decoration:none;line-height:.82}
.ck-fx-sign__mark span{display:block;font-family:var(--font-display);font-weight:800;
  /* deliberately larger than the container so it bleeds at both edges */
  font-size:clamp(52px,21vw,250px);letter-spacing:-.055em;
  color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.035) 100%);
  -webkit-background-clip:text;background-clip:text;
  white-space:nowrap;
  transition:letter-spacing .55s cubic-bezier(.22,1,.36,1),background .55s ease}
@media (hover:hover) and (pointer:fine){
  .ck-fx-sign__mark:hover span{letter-spacing:-.035em;
    background:linear-gradient(180deg,rgba(45,212,191,.34) 0%,rgba(45,212,191,.06) 100%);
    -webkit-background-clip:text;background-clip:text}
}
.ck-fx-sign__mark:focus-visible{outline:2px solid #2DD4BF;outline-offset:4px;border-radius:8px}
.ck-fx-sign__tag{margin:clamp(4px,1vw,12px) 0 0;font-family:var(--font-body);
  font-size:clamp(10px,1.1vw,12px);font-weight:800;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(255,255,255,.30)}

/* ==========================================================================
   06 LEGAL BAR
   ========================================================================== */
.ck-fx-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 26px;padding-block:22px 30px;border-top:1px solid var(--fx-line)}
.ck-fx-legal__copy{font-size:12.5px;color:rgba(255,255,255,.34)}
.ck-fx-legal__links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.ck-fx-legal__links a,.ck-fx-legal__prefs{position:relative;display:inline-flex;align-items:center;
  font-family:inherit;font-size:12.5px;color:rgba(255,255,255,.34);
  text-decoration:none;background:none;border:0;padding:0;cursor:pointer;
  transition:color .3s ease}
.ck-fx-legal__links span{position:relative}
.ck-fx-legal__links span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .34s cubic-bezier(.22,1,.36,1)}
.ck-fx-legal__links a:hover,.ck-fx-legal__prefs:hover{color:#fff}
.ck-fx-legal__links a:hover span::after,.ck-fx-legal__prefs:hover span::after{
  transform:scaleX(1);transform-origin:left}
.ck-fx-legal__links a:focus-visible,.ck-fx-legal__prefs:focus-visible{
  outline:2px solid #2DD4BF;outline-offset:3px;border-radius:3px}

/* ==========================================================================
   REVEAL

   Read this before changing anything here.

   The DEFAULT state - no class at all - is the finished state. Elements are
   visible, untransformed and readable. That is what a visitor sees with
   JavaScript disabled, with an old browser, or if footer.js fails.

   .is-armed is added by JavaScript ONLY after an IntersectionObserver probe has
   proved the API delivers callbacks on this device, AND only while the footer
   is still below the fold. It is that class - not the base rule - which hides
   things. .is-in then plays them back in.

   The consequence: if the observer can never fire, we never arm, so nothing is
   ever hidden. This site has been bitten before by a reveal system that hid
   content up front and relied on an observer to un-hide it.
   ========================================================================== */
.ck-fx.is-armed [data-ck-fx]{opacity:0}
.ck-fx.is-armed [data-ck-fx="rule"]{opacity:1;transform:scaleX(0)}
.ck-fx.is-armed .ck-fx-line>span{transform:translateY(105%)}
.ck-fx.is-armed [data-ck-fx="1"],
.ck-fx.is-armed [data-ck-fx="5"],
.ck-fx.is-armed [data-ck-fx="6"],
.ck-fx.is-armed [data-ck-fx="7"],
.ck-fx.is-armed [data-ck-fx="8"],
.ck-fx.is-armed [data-ck-fx="9"]{transform:translateY(22px)}
/* the headline lines carry no opacity of their own - the clipping window does
   the hiding, so a stalled transform still leaves readable text */
.ck-fx.is-armed [data-ck-fx="2"],
.ck-fx.is-armed [data-ck-fx="3"],
.ck-fx.is-armed [data-ck-fx="4"]{opacity:1}

/* The hide must be instant. Without this guard, adding .is-armed animates the
   content OUT over the transition duration - invisible below the fold, but a
   fast scroller could catch it. JS adds .is-ready on the next frame. */
.ck-fx.is-armed:not(.is-ready) [data-ck-fx],
.ck-fx.is-armed:not(.is-ready) .ck-fx-line>span{transition:none !important}

.ck-fx.is-armed [data-ck-fx]{
  transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1)}
.ck-fx.is-armed .ck-fx-line>span{
  transition:transform .86s cubic-bezier(.22,1,.36,1)}

.ck-fx.is-armed.is-in [data-ck-fx]{opacity:1;transform:none}
.ck-fx.is-armed.is-in [data-ck-fx="rule"]{transform:scaleX(1)}
.ck-fx.is-armed.is-in .ck-fx-line>span{transform:none}

/* Cinematic order: rule opens, eyebrow, then the headline line by line,
   then supporting copy, CTAs, and the navigation last. ~1.25s end to end. */
.ck-fx.is-armed [data-ck-fx="rule"]{transition-duration:.9s;transition-delay:0ms}
.ck-fx.is-armed [data-ck-fx="1"]{transition-delay:170ms}
.ck-fx.is-armed [data-ck-fx="2"]>span{transition-delay:260ms}
.ck-fx.is-armed [data-ck-fx="3"]>span{transition-delay:340ms}
.ck-fx.is-armed [data-ck-fx="4"]>span{transition-delay:420ms}
.ck-fx.is-armed [data-ck-fx="5"]{transition-delay:560ms}
.ck-fx.is-armed [data-ck-fx="6"]{transition-delay:650ms}
.ck-fx.is-armed [data-ck-fx="7"]{transition-delay:740ms}
.ck-fx.is-armed [data-ck-fx="8"]{transition-delay:120ms}
.ck-fx.is-armed [data-ck-fx="9"]{transition-delay:200ms}

/* ==========================================================================
   RESPONSIVE
   Mobile is recomposed, not shrunk: the service wall drops its descriptions,
   the nav becomes a single column, and the signature scales to the viewport.
   ========================================================================== */
@media (max-width:1024px){
  .ck-fx-nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px 40px}
  .ck-fx-nav__brand{grid-column:1/-1}
  .ck-fx__mark{right:-24%;width:92vw;opacity:.042}
  .ck-fx-row__m{display:none}
  .ck-fx-row>a{grid-template-columns:auto minmax(0,1fr) auto}
}
@media (max-width:768px){
  .ck-fx{padding-block:clamp(56px,10vw,80px) 0}
  .ck-fx-cta__acts{flex-direction:column;align-items:stretch}
  .ck-fx-btn{justify-content:space-between;padding:17px 22px}
  .ck-fx-nav{grid-template-columns:minmax(0,1fr);gap:38px}
  .ck-fx-legal{flex-direction:column;align-items:flex-start;gap:16px}
  .ck-fx-marquee__track{animation-duration:30s}
  .ck-fx-row__n{display:none}
  .ck-fx-row>a{grid-template-columns:minmax(0,1fr) auto;gap:16px}
}
@media (max-width:640px){
  .ck-fx__mark{top:20px;right:-40%;width:130vw;opacity:.05}
  .ck-fx-social a{width:42px;height:42px}
  .ck-fx-sign__tag{letter-spacing:.3em}
}

/* ==========================================================================
   REDUCED MOTION
   Everything arrives finished. The marquee holds still rather than vanishing,
   so the composition is unchanged - it simply stops moving.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ck-fx.is-armed [data-ck-fx],
  .ck-fx.is-armed .ck-fx-line>span{opacity:1;transform:none;transition:none}
  .ck-fx.is-armed [data-ck-fx="rule"]{transform:scaleX(1)}
  .ck-fx-marquee__track{animation:none;transform:translate3d(0,0,0)}
  .ck-fx__mark{animation:none;transition:none;transform:none}
  .ck-fx-btn,.ck-fx-btn__arw,.ck-fx-row>a,.ck-fx-row__arw,.ck-fx-row__line,
  .ck-fx-row__m,.ck-fx-social a,.ck-fx-sign__mark span,
  .ck-fx-nav__col a>span::after,.ck-fx-legal__links span::after{transition:none}
}

/* ==========================================================================
   MOBILE TAP TARGETS
   The inline links read at 12-14px, which is right for the design but too
   small to hit. Padding is added only on touch widths so the desktop
   composition is untouched.
   ========================================================================== */
@media (max-width:768px){
  .ck-fx-nav__col a{min-height:44px;padding:11px 0}
  .ck-fx-cl{padding:6px 0}
  .ck-fx-cl a{display:inline-flex;align-items:center;min-height:40px}
  .ck-fx-legal__links{gap:2px 20px}
  .ck-fx-legal__links a,.ck-fx-legal__prefs{min-height:44px}
  .ck-fx-nav__name{min-height:44px;display:inline-flex;align-items:center}
  /* trim the overall height a little so the closing chapter does not
     outstay its welcome on a phone */
  .ck-fx-row>a{padding-block:15px}
  .ck-fx-wall{padding-bottom:clamp(40px,6vw,56px)}
  .ck-fx-cta{padding-bottom:clamp(46px,7vw,64px)}
  .ck-fx-nav{padding-block:clamp(40px,6vw,52px)}
}

/* The signature bleeds past the edges on desktop by design (~5%), which reads
   as editorial cropping. On a phone the same ratio ate the initial C of
   CreativeKraft, which is a brand problem rather than a design choice - so the
   signature must not crop below tablet. 16vw fits 'CreativeKraft' inside a
   375px viewport with a hairline of margin. */
@media (max-width:768px){
  .ck-fx-sign__mark span{font-size:16vw;letter-spacing:-.045em}
}