/* ==========================================================================
   polish.css — a motion + micro-interaction layer over styles.css
   Used only by index.html. Nothing here changes the comp's layout,
   palette, type or spacing: every rule either animates an element into its
   existing resting state, or refines a hover/focus state.

   Everything that hides content is scoped to .motion, which JS adds only
   when it runs and only when the visitor has not asked for reduced motion.
   Delete this file and the page is the original build again.
   ========================================================================== */

:root{
  --ease-out: cubic-bezier(.16,.84,.28,1);
  --ease-soft: cubic-bezier(.2,.7,.3,1);
}

::selection{background:var(--teal);color:#fff}

/* ---------------------------------------------------------------- header */
/* Sticky, but transparent at rest so the top of the page is unchanged. */
.header-bar{
  position:sticky;
  top:0;
  z-index:30;
  background:transparent;
  transition:background-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease;
}
.header-bar[data-stuck="true"]{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 1px 0 rgba(13,45,60,.10), 0 8px 24px -14px rgba(13,45,60,.28);
}
/* The blob lives in .top now that the header has been lifted out, so it is
   raised by the header's 74px to keep its position on the page identical to
   the original (-79px from the top of the document). The hero's top margin
   is moved onto .top__inner as padding so it cannot collapse through the
   positioning context and drag the blob down with it. */
.top__inner{padding-top:20px}
.hero{margin-top:0}
.blob{top:-153px}
/* Smooth only once something on the page has focus (an in-page link click), so
   arriving from another page with a #hash jumps straight to the target. */
html:focus-within{scroll-behavior:smooth}
/* keep focused fields and #anchors clear of the sticky header */
html{scroll-padding-top:96px}

.nav__list a{transition:color .18s ease}
.nav__list a{position:relative}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-soft);
}
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after{transform:scaleX(1)}

.logo{transition:opacity .2s ease}
.logo:hover{opacity:.82}
.logo__mark{transition:transform .5s var(--ease-out)}
.logo:hover .logo__mark{transform:rotate(-6deg) scale(1.06)}

/* ---------------------------------------------------------------- buttons */
.btn{
  position:relative;
  transition:background-color .2s ease, color .2s ease, transform .18s var(--ease-out), box-shadow .25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--teal:hover{box-shadow:0 8px 20px -10px rgba(0,124,135,.65)}
.btn--navy:hover{box-shadow:0 8px 20px -10px rgba(36,89,123,.6)}
.btn--white:hover{box-shadow:0 8px 20px -12px rgba(0,0,0,.4)}
.icon-btn{transition:background-color .2s ease, transform .18s var(--ease-out)}
.icon-btn:hover{transform:scale(1.06)}

/* ---------------------------------------------------------------- cards */
.card{
  transition:transform .38s var(--ease-soft), box-shadow .38s var(--ease-soft);
  will-change:transform;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(13,45,60,.05), 0 18px 34px -20px rgba(13,45,60,.30);
}
.card .card__mark{transition:transform .45s var(--ease-out)}
.card:hover .card__mark{transform:translateY(-2px) scale(1.06)}

/* feature cards: the photo scales inside its frame, the panel warms a touch */
.feature__media{
  display:block;
  overflow:hidden;
  border-radius:var(--r-feature);
  background:var(--teal-deep);
}
.feature__img{transition:transform .8s var(--ease-out)}
.feature:hover .feature__img{transform:scale(1.055)}
.feature__body{transition:background-color .4s ease}
.feature:hover .feature__body{background:#12606f}
.feature .icon{transition:transform .45s var(--ease-out)}
.feature:hover .icon{transform:translateY(-2px)}

/* articles */
.article__media{display:block;overflow:hidden;border-radius:var(--r-img)}
.article__img{transition:transform .8s var(--ease-out)}
.article__link:hover .article__img{transform:scale(1.05)}
.article__title{transition:color .22s ease}
.article__link:hover .article__title{color:var(--teal-deep)}
/* the read-more underline draws in rather than blinking on */
.article__more{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1.5px;
  transition:background-size .32s var(--ease-soft), color .22s ease;
  padding-bottom:2px;
}
.article__link:hover .article__more{background-size:100% 1.5px}
.article__link:hover .article__more{text-decoration:none}

/* No overflow clipping and no hover zoom on this one: the comp gives this
   photo a drop shadow, and any clipping would cut it off. */

.footer__col a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .3s var(--ease-soft), color .2s ease;
  text-decoration:none;
}
.footer__col a:hover{background-size:100% 1px;text-decoration:none}

/* ---------------------------------------------------------- hero photo */
/* The comp leaves a 393px column empty on the left of the hero card — the
   decorative blob is all that occupies it. The photo goes there, positioned
   absolutely so the headline column stays exactly where the comp puts it
   (x=443, 500px wide). Treatment matches the comp's own inset photo in the
   "Biz Kimiz" panel: same radius, same shadow. */
.hero{position:relative}
.hero__figure{
  position:absolute;
  left:50px;              /* 100px from the page edge */
  top:56px;               /* 150px down the page */
  width:293px;
  height:388px;
  margin:0;
  z-index:1;
  border-radius:var(--r-img);
  overflow:hidden;
  background:var(--surface-blue);
  box-shadow:0 4px 20px rgba(13,45,60,.1);
}
.hero__figure img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:52% 36%;
}

/* Joins the load sequence just after the headline: wipes up from its own
   bottom edge while the photograph settles out of a slight scale. */
.motion .hero__figure{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease-out)}
.motion .hero__figure img{transform:scale(1.08);transition:transform 1.7s var(--ease-out)}
.motion [data-seq][data-in="true"] .hero__figure{clip-path:inset(0 0 0 0);transition-delay:.2s}
.motion [data-seq][data-in="true"] .hero__figure img{transform:scale(1);transition-delay:.2s}
/* drop the clip afterwards so the shadow is not cut off at rest
   (specificity has to beat the reveal rule above) */
.motion [data-seq][data-in="true"] .hero__figure[data-clip-done],
.motion .hero__figure[data-clip-done]{clip-path:none;transition:none}

/* ---------------------------------------------------------------- rings */
/* The comp's concentric hairlines. They scale up into place on entry, then
   breathe very slowly — a few thousandths of a scale, read as "alive". */
.motion .rings span{
  opacity:0;
  transform:scale(.9);
  transition:opacity 1.1s ease, transform 1.4s var(--ease-out);
}
.motion .rings[data-in="true"] span{opacity:1;transform:scale(1)}
.motion .rings[data-in="true"] span:nth-child(3){transition-delay:0s}
.motion .rings[data-in="true"] span:nth-child(2){transition-delay:.12s}
.motion .rings[data-in="true"] span:nth-child(1){transition-delay:.24s}
.motion .rings[data-in="true"] span:nth-child(1){animation:breathe 11s 1.6s ease-in-out infinite}
.motion .rings[data-in="true"] span:nth-child(2){animation:breathe 13s 1.9s ease-in-out infinite}
.motion .rings[data-in="true"] span:nth-child(3){animation:breathe  9s 2.2s ease-in-out infinite}
@keyframes breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.014)}
}

/* ---------------------------------------------------------------- entrances */
/* Blob: settles in behind the hero on load. */
.blob{--py:0px;translate:0 var(--py)}
.motion .blob{opacity:0;transform:scale(.93);transform-origin:30% 40%}
.motion .blob[data-in="true"]{
  opacity:1;transform:scale(1);
  transition:opacity 1.1s ease, transform 1.5s var(--ease-out);
}

/* Hero headline: revealed line by line behind its own baseline. */
.motion .hero__title[data-split-ready] .ln{display:block;overflow:hidden}
.motion .hero__title[data-split-ready] .ln > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--ease-out);
}
.motion .hero__title[data-split-ready][data-in="true"] .ln > span{transform:translateY(0)}
.motion .hero__title[data-split-ready][data-in="true"] .ln:nth-child(1) > span{transition-delay:.04s}
.motion .hero__title[data-split-ready][data-in="true"] .ln:nth-child(2) > span{transition-delay:.13s}
.motion .hero__title[data-split-ready][data-in="true"] .ln:nth-child(3) > span{transition-delay:.22s}
.motion .hero__title[data-split-ready][data-in="true"] .ln:nth-child(4) > span{transition-delay:.31s}
/* Hold the headline invisible only for the moment between load and the line
   measurement. Once the reveal has played, .hero__title is handed back to
   plain text and marked done, so this can never strand it hidden. */
.motion .hero__title:not([data-split-ready]):not([data-split-done]){opacity:0}
.motion .hero__title[data-split-ready],
.motion .hero__title[data-split-done]{opacity:1}

/* Hero lede follows the headline. */
.motion [data-seq-item]{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease, transform .8s var(--ease-out);
}
.motion [data-seq][data-in="true"] [data-seq-item]{opacity:1;transform:none}
.motion [data-seq][data-in="true"] [data-seq-item="1"]{transition-delay:.42s}

/* Scroll reveals. */
.motion [data-rv]{
  opacity:0;transform:translateY(22px);
  transition:opacity .78s ease, transform .78s var(--ease-soft);
}
.motion [data-rv][data-in="true"]{opacity:1;transform:none}
.motion [data-rv-stagger][data-in="true"]{transition-delay:calc(var(--i, 0) * .09s)}

/* The two feature groups arrive from the outside edges, so the row reads as
   one gesture rather than four separate cards. The row clips on the x axis so
   that travel cannot widen the page while the cards are still waiting.
   overflow-x:clip leaves the y axis visible and creates no scroll container. */
.motion .feature-row{overflow-x:clip}
.motion .feature-row [data-rv]:nth-child(1){transform:translate(-26px,16px)}
.motion .feature-row [data-rv]:nth-child(2){transform:translate(26px,16px)}
.motion .feature-row [data-rv][data-in="true"]{transform:none}

/* The "who we are" photo wipes up from its own bottom edge.
   Two things to know here:
   1. The wipe is triggered by the section heading, not by the photo itself —
      IntersectionObserver counts a target's own clip-path, so an element
      pre-clipped to zero height can never report itself as visible.
   2. The clip is dropped once it has played, because inset(0) would keep
      cutting off the drop shadow the comp gives this photo. */
.motion [data-clip]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease-out);
}
.motion [data-clip] img{transform:scale(1.07);transition:transform 1.4s var(--ease-out)}
/* contain the pre-reveal scale; released once the wipe is done, so the
   comp's drop shadow is visible again at rest */
.motion [data-clip]:not([data-clip-done]){overflow:clip}
.motion .about__head[data-in="true"] ~ [data-clip]{clip-path:inset(0 0 0 0)}
.motion .about__head[data-in="true"] ~ [data-clip] img{transform:scale(1)}
.motion .about__head[data-in="true"] ~ [data-clip][data-clip-done],
.motion [data-clip][data-clip-done]{clip-path:none;transition:none}

/* Count-up: hold the digits steady so the row cannot reflow mid-count. */
[data-count]{font-variant-numeric:tabular-nums}

/* ------------------------------------------------- hero photo, responsive */
/* styles.css narrows the hero's left gutter at 1279 and drops it entirely at
   860. The photo follows: it shrinks with the gutter, becomes a proper column
   when the gutter is too narrow to inset into, then a banner above the copy. */
@media (min-width:1101px){
  .hero{min-height:500px}
}
@media (max-width:1279px){
  .hero__figure{left:44px;width:252px;top:56px;height:388px}
}
@media (max-width:1100px){
  /* not enough room to inset — make the hero a real two-column layout */
  .hero{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:36px;align-items:center;padding:44px 40px}
  .hero__figure{position:static;width:100%;height:clamp(300px,38vw,400px);top:auto;left:auto}
  .hero__copy{margin-left:0;padding:0;max-width:none}
}
@media (max-width:860px){
  /* stacked: the photograph reads as a banner at the top of the card */
  .hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 28px 40px}
  .hero__figure{height:auto;aspect-ratio:16/9}
  .hero__copy{padding:0}
}
@media (max-width:620px){
  .hero{padding:20px 20px 32px;gap:24px}
  .hero__figure{aspect-ratio:4/3}
}

/* --------------------------------------------- motif at narrow widths */
/* styles.css already shrinks the rings below 1040. Below 620 even 700px is
   wider than the screen, so only two vertical curves are visible and the
   motif stops reading as concentric. Bring them inside the viewport. */
@media (max-width:620px){
  .rings--light span:nth-child(1),
  .rings--dark  span:nth-child(1){width:min(430px,96vw);height:min(430px,96vw)}
  .rings--light span:nth-child(2),
  .rings--dark  span:nth-child(2){width:min(320px,72vw);height:min(320px,72vw)}
  .rings--light span:nth-child(3),
  .rings--dark  span:nth-child(3){width:min(210px,48vw);height:min(210px,48vw)}
}

/* Once the feature cards stack, an inward/outward gesture no longer describes
   anything — they just rise. */
@media (max-width:1040px){
  .motion .feature-row [data-rv]:nth-child(1),
  .motion .feature-row [data-rv]:nth-child(2){transform:translateY(22px)}
}

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion:reduce){
  html,html:focus-within{scroll-behavior:auto}
  .header-bar{transition:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}