/* ============================================================================
   Finnovation Group: page styles.
   The engine (scrollcraft.css / scrollcraft.js) is untouched. Everything here
   is this page's own markup, themed through the six tokens and two faces.
   ========================================================================== */

:root {
  --sc-canvas:     #070b0e;
  --sc-surface:    #0e161b;
  --sc-ink:        #e9f0f3;
  --sc-ink-soft:   #93a6b0;
  --sc-accent:     #b4deeb;
  --sc-accent-ink: #071015;
  --sc-font-display: "Outfit", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --sc-font-text:    "Noto Sans TC", "Outfit", "Microsoft JhengHei", system-ui, sans-serif;
  --sc-shadow-color: 200 45% 3%;

  --fg-track-caps: 0.18em;   /* wide Latin caps, from the concept mock */
  --fg-track-zh:   0.14em;   /* CJK set open, light weight */
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sc-font-text);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ---- the living stream: one fixed canvas for the whole page ------------- */
#stream {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
}

/* ---- chrome -------------------------------------------------------------- */
.fg-bar {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-7);
  padding: clamp(1.1rem, 2.6vh, 2rem) var(--sc-gutter);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--fg-track-caps);
  text-transform: uppercase;
}
.fg-bar::before {                      /* density only behind the bar itself */
  content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(4 8 11 / 0.62), transparent);
  pointer-events: none;
}
.fg-bar a { color: var(--sc-ink); text-decoration: none; }
.fg-bar__mark { font-weight: 500; }
.fg-bar__nav { display: flex; gap: var(--sc-6); margin: 0; padding: 0; list-style: none; }
.fg-bar__nav a { color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.fg-bar__nav a:hover, .fg-bar__nav a:focus-visible { color: var(--sc-ink); }
.fg-bar__cta { margin-left: auto; }
.fg-bar__cta:hover { color: var(--sc-accent); }
@media (max-width: 760px) {
  .fg-bar__nav { display: none; }
  .fg-bar { gap: var(--sc-4); font-size: 0.68rem; letter-spacing: 0.14em; }
  .fg-bar a { white-space: nowrap; }
}

/* ---- shared type --------------------------------------------------------- */
.fg-caps {
  font-family: var(--sc-font-display);
  font-weight: 300;
  letter-spacing: var(--fg-track-caps);
  text-transform: uppercase;
}
.fg-zh-display {
  font-family: var(--sc-font-text);
  font-weight: 300;
  letter-spacing: var(--fg-track-zh);
  line-height: 1.5;
  text-wrap: balance;
  margin: 0;
}
.fg-zh-display--lg { font-size: clamp(1.7rem, 1.1rem + 2.5vw, 3.1rem); }
.fg-zh-display--md { font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); }
.fg-prose {
  font-size: var(--sc-t-base);
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--sc-ink-soft);
  max-width: 34em;
  margin: 0;
}
.fg-prose--en {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs);
  line-height: 1.9;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  max-width: 44ch;
}

/* ==========================================================================
   ACT 1 · SOURCE
   ========================================================================== */
.src { background: #05080a; }
.src__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform-origin: 32% 45%;
  transform: scale(calc(1.04 + var(--sc-p, 0) * 0.14));
  will-change: transform;
}
/* out-of-focus foreground: the same rock, close to the lens, overtaking */
.src__fore {
  position: absolute; right: -8%; bottom: -22%;
  width: 62%; height: 70%;
  background: url("assets/source-rock.webp") 88% 92% / 260% auto no-repeat;
  filter: blur(16px) brightness(0.42) saturate(0.8);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 68% 72%, #000 38%, transparent 72%);
          mask-image: radial-gradient(ellipse 62% 58% at 68% 72%, #000 38%, transparent 72%);
  pointer-events: none;
}
.src__mist {
  position: absolute; left: -10%; top: -18%;
  width: 70%; height: 60%;
  background: radial-gradient(ellipse at 40% 40%, rgb(150 185 200 / 0.10), transparent 62%);
  pointer-events: none;
}
.src__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 42% at 14% 52%, rgb(3 6 8 / 0.62), transparent 72%),
    linear-gradient(to bottom, transparent 72%, var(--sc-canvas) 100%);
}
.src__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: 50%;
  translate: 0 -50%;
  max-width: min(30rem, 80vw);
}
.src__mark {
  font-family: var(--sc-font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 0.4rem + 1.75vw, 2.4rem);
  letter-spacing: var(--fg-track-caps);
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0;
  max-width: 11em;
}
.src__zh {
  margin: var(--sc-5) 0 0;
  font-size: var(--sc-t-base);
  letter-spacing: 0.5em;
  color: #c6d3d9;
}
.src__line .fg-zh-display { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); }
.src__line {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: 50%;
  translate: 0 -50%;
  max-width: min(34rem, 84vw);
}
@media (max-width: 760px) {
  .src__img { object-position: 22% 50%; }
  .src__copy, .src__line { top: auto; bottom: 16vh; translate: none; }
  .src__scrim {
    background:
      linear-gradient(to top, rgb(3 6 8 / 0.78) 8%, transparent 58%),
      linear-gradient(to bottom, transparent 80%, var(--sc-canvas) 100%);
  }
  .src__fore { display: none; }
}

/* ==========================================================================
   ACT 2 · TIME  (the one section that reads like a document)
   ========================================================================== */
.time { position: relative; padding-block: clamp(3rem, 7vw, 8rem) var(--sc-section); }
.time__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1.4fr) minmax(0, 6fr);
  align-items: center;
}
.time__text { grid-column: 1; }
.time__text > * + * { margin-top: var(--sc-6); }
.time__text .fg-prose--en { margin-top: var(--sc-8); }
.time__fig { grid-column: 3; margin: 0; }
.time__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 70% 50%;
  border-radius: var(--sc-r-sm);
}
.time__cap {
  margin-top: var(--sc-4);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
@media (max-width: 860px) {
  .time__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-8); padding-right: 1.6rem; }
  .time__text, .time__fig { grid-column: 1; }
  .time__fig img { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   ACT 3 · UNDERSTANDING  (the signature act: water meets stone)
   ========================================================================== */
.und {
  background:
    radial-gradient(ellipse 60% 70% at 50% 40%, #0c151b, transparent 70%),
    #05080a;
}
.und__stone {
  --a: 0;
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--d) * 1vmin); aspect-ratio: 1 / 0.9;
  translate: -50% -50%;
  opacity: var(--a);
  transform: scale(calc(0.9 + var(--a) * 0.1));
  border-radius: 47% 53% 44% 56% / 56% 47% 53% 44%;
  background:
    radial-gradient(ellipse 120% 105% at 36% 24%, transparent 0%, rgb(4 8 11 / 0.55) 52%, rgb(3 6 8 / 0.94) 100%),
    url("assets/source-rock.webp") var(--tx, 47%) var(--ty, 34%) / 760% auto;
  box-shadow:
    inset 0 1px 1px rgb(200 232 244 / 0.16),
    inset 0 -22px 46px rgb(0 0 0 / 0.7),
    0 40px 70px -12px rgb(0 0 0 / 0.8);
  filter: saturate(0.75) brightness(0.92);
  overflow: hidden;
}
.und__stone--2 { --tx: 58%; --ty: 46%; aspect-ratio: 1 / 0.78; }
.und__stone--3 { --tx: 40%; --ty: 62%; aspect-ratio: 1 / 0.72; }
.und__stone::after {                     /* mineral grain, so it is not a gradient ball */
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.9  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.3;
}
.und__stone--2 { border-radius: 55% 45% 58% 42% / 46% 57% 43% 54%; }
.und__stone--3 { border-radius: 42% 58% 48% 52% / 52% 44% 56% 48%; }

.und__copy { position: absolute; z-index: var(--sc-z-copy); max-width: min(24rem, 38vw); }
.und__copy--a { left: var(--sc-gutter); top: 30%; }
.und__copy--b { right: var(--sc-gutter); top: 50%; text-align: right; }
.und__copy--c { left: var(--sc-gutter); bottom: 14vh; max-width: min(46rem, 52vw); }
.und__copy--c .fg-zh-display { text-wrap: wrap; }
.und__hint {
  position: absolute; z-index: var(--sc-z-copy);
  right: var(--sc-gutter); bottom: 14vh;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: 0;
}
@media not ((hover: hover) and (pointer: fine)) { .und__hint-mouse { display: none; } }
@media (hover: hover) and (pointer: fine)       { .und__hint-touch { display: none; } }
@media (max-width: 760px) {
  .und__stone { left: calc((var(--x) + 28) * 1%); }
  .und__copy { max-width: 58vw; left: var(--sc-gutter); right: auto; text-align: left; }
  .und__copy--a, .und__copy--b { top: 16vh; }
  .und__copy--c { bottom: 12vh; }
  .und__hint { bottom: 12vh; left: var(--sc-gutter); right: auto; max-width: 58vw; }
}

/* ==========================================================================
   ACT 4 · FOUR STATES  (pan: lateral travel reads as breadth)
   ========================================================================== */
.sts { background: linear-gradient(to bottom, #05080a, #081015 40%, #081015); }
.sts__rail {
  height: 100%;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 7rem);
  padding-inline: clamp(3.5rem, 12vw, 12rem) var(--sc-gutter);
}
.sts__rail > * { flex: 0 0 auto; }
.sts__lead { width: clamp(17rem, 30vw, 28rem); }
.sts__lead > * + * { margin-top: var(--sc-6); }
.sts__item {
  --i: 1;
  width: clamp(17rem, 27vw, 24rem);
}
.sts__motif { display: block; width: 58%; height: auto; margin-bottom: var(--sc-7); overflow: visible; }
.sts__motif * { fill: none; stroke: var(--sc-accent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sts__en { font-size: var(--sc-t-xl); margin: 0; letter-spacing: 0.12em; }
.sts__zh { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); letter-spacing: 0.3em; color: var(--sc-accent); }
.sts__desc { margin-top: var(--sc-5); font-size: var(--sc-t-sm); line-height: 2; }
.sts__data {
  margin: var(--sc-6) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5);
  border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5);
}
.sts__data dt { font-size: var(--sc-t-xs); letter-spacing: 0.2em; color: var(--sc-ink-soft); }
.sts__data dd {
  margin: var(--sc-2) 0 0;
  font-family: var(--sc-font-display); font-weight: 200;
  font-size: var(--sc-t-xl); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.sts__data dd.is-empty { font-family: var(--sc-font-text); font-weight: 300; font-size: var(--sc-t-sm); letter-spacing: 0.2em; color: var(--sc-ink-soft); padding-top: 0.6em; }
.sts__note { width: clamp(15rem, 24vw, 22rem); padding-right: 8vw; }

@media (prefers-reduced-motion: no-preference) {
  .sts__item, .sts__note {
    opacity: clamp(0.6, calc(var(--sc-p, 0) * 7.2 - var(--i) + 1.9), 1);
  }
  .m-drift  { animation: m-drift 7s var(--sc-ease-in-out) infinite alternate; }
  .m-rise   { animation: m-rise 6s var(--sc-ease-in-out) infinite alternate; }
  .m-dash   { stroke-dasharray: 5 9; animation: m-dash 3.2s linear infinite; }
  .m-ring   { animation: m-ring 5.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  .m-ring:nth-child(2n) { animation-delay: -1.8s; }
  .m-ring:nth-child(3n) { animation-delay: -3.6s; }
}
@keyframes m-drift { from { transform: translateY(-5px); opacity: 0.45; } to { transform: translateY(5px); opacity: 1; } }
@keyframes m-rise  { from { transform: translateY(4px); opacity: 0.4; } to { transform: translateY(-3px); opacity: 1; } }
@keyframes m-dash  { to { stroke-dashoffset: -28; } }
@keyframes m-ring  { from { transform: scale(0.55); opacity: 0.9; } to { transform: scale(1.12); opacity: 0; } }

/* ==========================================================================
   ACT 5 · SEA  (the peak: the dark opens)
   ========================================================================== */
.sea { background: #05080a; }
.sea__ground {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(0.62);
}
.sea__falls { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.sea__falls img {
  --t: clamp(0, calc((var(--sc-p, 0) - 0.30) / 0.34), 1);
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  transform: translateY(calc((var(--t) - 0.5) * 30%)) scale(1.36);
  will-change: transform;
}
.sea__ocean {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.60) / 0.14), 1);
}
.sea__scrim-a {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 46% at 18% 62%, rgb(3 6 8 / 0.7), transparent 72%);
  opacity: clamp(0, calc(1 - var(--sc-p, 0) * 6), 1);
}
.sea__scrim-b {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 30% at 16% 52%, rgb(5 18 28 / 0.9), transparent 76%);
  opacity: clamp(0, calc(min((var(--sc-p, 0) - 0.33) / 0.04, (0.66 - var(--sc-p, 0)) / 0.05)), 1);
}
.sea__scrim-b, .sea__scrim-c { display: none; }
.sea__copy { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); }
.sea__copy--a { top: 50%; translate: 0 -50%; max-width: min(34rem, 84vw); }
.sea__copy--a > * + * { margin-top: var(--sc-5); }
.sea__copy--b { bottom: 13vh; color: #0a2130; }
.sea__copy--b .fg-zh-display { font-weight: 400; }
.sea__copy--c { bottom: 17vh; max-width: min(36rem, 86vw); }
.sea__copy--c > * + * { margin-top: var(--sc-5); }
.sea__copy--c .fg-prose { color: #c3d2d8; }

.fg-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--sc-7);
  margin-top: var(--sc-7) !important;
  border: 1px solid rgb(233 240 243 / 0.7);
  border-radius: var(--sc-r-pill);
  color: var(--sc-ink); text-decoration: none;
  font-family: var(--sc-font-display); font-size: var(--sc-t-xs);
  letter-spacing: var(--fg-track-caps); text-transform: uppercase; white-space: nowrap;
  background: rgb(7 16 21 / 0.35);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.fg-cta:hover { background: var(--sc-ink); color: var(--sc-accent-ink); border-color: var(--sc-ink); }
.fg-cta:active { scale: 0.97; }
.fg-cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }

.fg-foot {
  position: absolute; z-index: var(--sc-z-copy);
  inset: auto var(--sc-gutter) clamp(1.2rem, 3.5vh, 2.4rem) var(--sc-gutter);
  display: flex; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap;
  font-size: var(--sc-t-xs); color: #a9bcc5;
}
.fg-foot p { margin: 0; }
@media (max-width: 760px) {
  .sea__scrim-b {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgb(5 18 28 / 0.9) 6%, transparent 40%);
    opacity: clamp(0, calc(min((var(--sc-p, 0) - 0.33) / 0.04, (0.66 - var(--sc-p, 0)) / 0.05)), 1);
  }
  .sea__copy--b { color: var(--sc-ink); }
  .sea__copy--c { bottom: 21vh; max-width: 62vw; }
  .sea__scrim-c {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgb(5 18 28 / 0.82) 22%, transparent 66%);
    opacity: clamp(0, calc((var(--sc-p, 0) - 0.72) / 0.06), 1);
  }
  .sea__falls img { object-position: 78% 50%; }
}

/* Reduced motion: the engine holds a reveal fully open, which would put the
   bright falls under the opening line. Bring them in on opacity instead; no
   position changes, and the camera climb is dropped. */
@media (prefers-reduced-motion: reduce) {
  .sea__falls { opacity: clamp(0, calc((var(--sc-p, 0) - 0.12) / 0.2), 1); }
  .sea__scrim-b {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 44% 34% at 12% 86%, rgb(5 18 28 / 0.9), transparent 76%);
    opacity: clamp(0, calc(min((var(--sc-p, 0) - 0.33) / 0.04, (0.66 - var(--sc-p, 0)) / 0.05)), 1);
  }
  .sea__copy--b { color: var(--sc-ink); }
  .sea__falls img { transform: scale(1.02); }
  .src__img { transform: scale(1.04); }
}


/* ==========================================================================
   昱泓企業社: additions on top of the Finnovation base
   ========================================================================== */
.src__mark--zh {
  font-family: var(--sc-font-text);
  font-size: clamp(1.8rem, 0.8rem + 2.1vw, 2.8rem);
  letter-spacing: 0.22em; text-transform: none; line-height: 1.4;
  max-width: none; white-space: nowrap;
}
.src__zh--en { font-size: var(--sc-t-xs); letter-spacing: 0.34em; }

.time__eyebrow, .sts__eyebrow, .ctc__eyebrow {
  margin: 0; font-size: var(--sc-t-xs); color: var(--sc-accent); letter-spacing: 0.4em;
  font-family: var(--sc-font-text);
}
.time__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5);
  margin: var(--sc-8) 0 0; padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline);
}
.time__stats dd { margin: 0; font-family: var(--sc-font-display); font-weight: 200; font-size: var(--sc-t-2xl); font-variant-numeric: tabular-nums; }
.time__stats dt { margin-top: var(--sc-2); font-size: var(--sc-t-xs); letter-spacing: 0.16em; color: var(--sc-ink-soft); }

/* services: three currents, each a labelled list rather than a card */
/* groups differ in length, so hang them from one line instead of centring each */
.sts__rail { align-items: flex-start; padding-top: clamp(5.5rem, 15vh, 10rem); }
.sts__item--group .sts__en { font-size: var(--sc-t-lg); }
.nb { display: inline-block; }   /* keep a CJK phrase together when a line has to break */
.sts__lead, .sts__note { padding-top: clamp(1rem, 6vh, 5rem); }
.sts__item--group { width: clamp(19rem, 30vw, 27rem); }
.sts__item--group .sts__motif { width: 24%; margin-bottom: var(--sc-5); }
.sts__svc { margin: var(--sc-6) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.sts__svc > div { padding-block: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.sts__svc dt { font-size: var(--sc-t-base); font-weight: 400; letter-spacing: 0.16em; color: var(--sc-ink); }
.sts__svc dd { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.7; letter-spacing: 0.06em; color: #a9bac3; }
@media (max-height: 960px) {
  .sts__item--group .sts__motif { display: none; }
  .sts__svc > div { padding-block: var(--sc-3); }
}

/* contact: ordinary flow, so the form is simply usable */
.ctc { position: relative; z-index: 6; background: var(--sc-canvas); padding-block: var(--sc-section) 0; }
.ctc__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 8rem); align-items: start;
}
.ctc__lead > * + * { margin-top: var(--sc-6); }
.ctc__addr { font-style: normal; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 2; letter-spacing: 0.08em; }
.ctc__addr p { margin: 0; }
.ctc__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6) var(--sc-5); }
.ctc__field { display: block; }
.ctc__field--wide, .ctc__actions { grid-column: 1 / -1; }
.ctc__field:nth-of-type(3) { grid-column: 1 / -1; }
.ctc__field span { display: block; font-size: var(--sc-t-xs); letter-spacing: 0.24em; color: var(--sc-ink-soft); margin-bottom: var(--sc-2); }
.ctc__field :is(input, select, textarea) {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: var(--sc-t-base); letter-spacing: 0.04em; color: var(--sc-ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--sc-hairline-strong);
  border-radius: 0; padding: var(--sc-3) 0; min-height: 2.9rem;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.ctc__field textarea { resize: vertical; line-height: 1.7; }
.ctc__field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%) right 0.55rem center / 6px 6px no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--sc-ink-soft) 50%) right 0.2rem center / 6px 6px no-repeat; }
.ctc__field select option { background: var(--sc-surface); color: var(--sc-ink); }
.ctc__field :is(input, select, textarea):hover { border-bottom-color: var(--sc-ink-soft); }
.ctc__field :is(input, select, textarea):focus-visible { outline: none; border-bottom-color: var(--sc-accent); box-shadow: 0 1px 0 var(--sc-accent); }
.ctc__actions { display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }
.ctc__actions .fg-cta { margin-top: 0 !important; cursor: pointer; font-family: var(--sc-font-text); letter-spacing: 0.3em; }
.ctc__msg { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-accent); min-height: 1.5em; }
.ctc__foot {
  display: flex; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap;
  margin-top: var(--sc-section); padding-block: var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-xs); letter-spacing: 0.14em; color: var(--sc-ink-soft);
}
.ctc__foot p { margin: 0; }
.fg-bar { font-family: var(--sc-font-text); letter-spacing: 0.3em; }
.fg-cta { font-family: var(--sc-font-text); letter-spacing: 0.3em; }
@media (max-width: 860px) {
  .ctc__grid { grid-template-columns: minmax(0, 1fr); }
  .ctc__form { grid-template-columns: minmax(0, 1fr); }
  .ctc__field { grid-column: 1 / -1; }
  .sts__item--group { width: 78vw; }
  .sts__item--group .sts__motif { width: 18%; }
}
@media (max-width: 760px) { .fg-bar { letter-spacing: 0.2em; } .sea__copy--c { bottom: 12vh; } }

.ctc__addr p { display: flex; gap: var(--sc-5); }
.ctc__addr-label { flex: 0 0 auto; color: var(--sc-accent); letter-spacing: 0.3em; font-size: var(--sc-t-xs); padding-top: 0.35em; }
.ctc__addr a { color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong); transition: border-color var(--sc-d-fast) var(--sc-ease-out); }
.ctc__addr a:hover { border-bottom-color: var(--sc-accent); }
.ctc__addr a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.ctc__addr span:not(.ctc__addr-label) { color: var(--sc-ink); }