/* ==========================================================================
   DASK Trading Solutions
   Palette is built from the logo blue #1d6485.
   ========================================================================== */

:root {
  --brand:        #1d6485;
  --brand-lift:   #2b83ac;
  --brand-bright: #4fb3d9;
  --ink-900:      #071a24;
  --accent:       #e9a33d;

  --paper:        #ffffff;
  --paper-tint:   #f3f7f9;
  --line:         #dbe6ec;
  --text:         #16242c;
  --text-soft:    #55707e;
  --on-dark:      #e8f2f7;
  --on-dark-soft: #9dbccc;

  --wrap: 1180px;
  --r: 14px;
  --shadow: 0 18px 40px -22px rgba(7, 26, 36, .45);
  --ease: cubic-bezier(.22, .8, .3, 1);

  --font-display: "Montserrat", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
a { color: inherit; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

/* keep anchored sections clear of the fixed header */
section[id] { scroll-margin-top: 5.5rem; }

.skip { position: absolute; left: -9999px; background: var(--brand); color: #fff; padding: .7rem 1.1rem; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 26px -14px rgba(29, 100, 133, .9);
}
.btn-primary:hover { background: var(--brand-lift); box-shadow: 0 18px 34px -14px rgba(29, 100, 133, .95); }

.btn-ghost { border-color: rgba(232, 242, 247, .35); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--brand-bright); color: #fff; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .35s, box-shadow .35s;
}
.site-header.stuck {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(7, 26, 36, .5);
}

.header-inner { display: flex; align-items: center; gap: 1.5rem; padding: .9rem 0; }

.brand { display: flex; flex: 0 0 auto; }
.brand img {
  height: 42px;
  width: auto;
  /* logo asset draws in currentColor - force it white until the header sticks */
  filter: brightness(0) invert(1);
  transition: filter .35s;
}
.site-header.stuck .brand img { filter: none; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: .93rem;
  font-weight: 500;
}
.nav a { color: rgba(232, 242, 247, .82); text-decoration: none; transition: color .25s; }
.nav a:hover { color: #fff; }
.site-header.stuck .nav a { color: var(--text-soft); }
.site-header.stuck .nav a:hover { color: var(--brand); }

.nav-cta { padding: .55rem 1.25rem; border: 1.5px solid rgba(232, 242, 247, .4); border-radius: 999px; }
.site-header.stuck .nav-cta { border-color: var(--brand); color: var(--brand) !important; }
.site-header.stuck .nav-cta:hover { background: var(--brand); color: #fff !important; }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 40px;
  background: none; border: 0; cursor: pointer;
  padding: 10px 8px;
}
.burger span { display: block; height: 2px; background: #fff; margin: 4px 0; transition: transform .3s var(--ease), opacity .2s; }
.site-header.stuck .burger span { background: var(--text); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 6rem 0 4.5rem;
  background: #071a24;
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* photograph, pushed well back so the logo and copy stay legible */
.hero-photo {
  position: absolute;
  inset: -4%;
  z-index: -3;
  background: url('../assets/img/hero-port.jpg') center 40% / cover no-repeat;
  filter: saturate(.62) contrast(1.06) brightness(.62);
  animation: kenburns 26s ease-in-out infinite alternate;
}
.hero::after {                    /* colour wash + vignette over the photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 85% at 50% 40%, rgba(7, 26, 36, .28) 0%, rgba(7, 26, 36, .8) 76%),
    linear-gradient(168deg, rgba(14, 52, 71, .62) 0%, rgba(7, 26, 36, .85) 100%);
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.2%, -1.6%); }
}

.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .5; }

.hero-glow {
  position: absolute;
  z-index: -1;
  width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79, 179, 217, .17) 0%, rgba(79, 179, 217, 0) 62%);
  pointer-events: none;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .85; }
  50%      { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}

/* a diagonal gleam that sweeps across the whole hero, over and over.
   sits above the photo and routes but below the text, so it lights up the
   panel without washing the copy out. */
.hero-sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-sheen::before {
  content: "";
  position: absolute;
  inset: -30% -60%;
  /* a broad, soft band of light - wide enough that at its peak it washes
     across the whole hero rather than reading as a thin streak */
  background: linear-gradient(100deg,
              transparent 6%,
              rgba(255, 255, 255, .06) 26%,
              rgba(150, 205, 240, .16) 40%,
              rgba(210, 238, 252, .30) 50%,
              rgba(150, 205, 240, .16) 60%,
              rgba(255, 255, 255, .06) 74%,
              transparent 94%);
  transform: translateX(-90%);
  animation: heroSheen 9s ease-in-out infinite;
}
@keyframes heroSheen {
  0%   { transform: translateX(-90%); opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  75%  { transform: translateX(90%); opacity: 0; }
  100% { transform: translateX(90%); opacity: 0; }
}

.hero-inner { text-align: center; position: relative; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; text-shadow: 0 2px 30px rgba(7, 26, 36, .5); }
.hero h1 .hl {
  background: linear-gradient(100deg, var(--brand-bright), #a9e3f7 55%, var(--brand-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 1.4rem;
}

.lede {
  max-width: 68ch;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: var(--on-dark-soft);
}

.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

.hero-note { margin-top: 1.6rem; font-size: .85rem; color: rgba(157, 188, 204, .8); }

/* small India-based line under the hero note */
.hero-locale {
  margin-top: .55rem;
  font-size: .84rem;
  font-weight: 500;
  color: var(--brand-bright);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.flag-in {
  width: 20px; height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  vertical-align: middle;
}
.hero-note::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: .55rem;
  vertical-align: middle;
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(233, 163, 61, .55); }
  70%  { box-shadow: 0 0 0 11px rgba(233, 163, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 163, 61, 0); }
}

/* ---------- the animated logo ---------- */

.logo-stage {
  position: relative;
  width: min(450px, 74vw);
  margin: 0 auto 2.1rem;
  color: #fff;
  animation: float 7s ease-in-out infinite;
}
/* laptops with short viewports still need the headline above the fold */
@media (max-height: 800px) {
  .logo-stage { width: min(340px, 64vw); margin-bottom: 1.6rem; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.logo-stage svg { display: block; width: 100%; height: auto; overflow: visible; }

/* each part starts as an undrawn outline, gets "scribed", then floods with fill */
.logo-stage path {
  fill: currentColor;
  fill-opacity: 0;
  stroke: var(--brand-bright);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}

.logo-go #lg-frame { animation: draw 1.5s var(--ease) forwards,      flood .9s ease-out .95s forwards; }
.logo-go #lg-d     { animation: draw 1.1s var(--ease) .45s forwards, flood .7s ease-out 1.25s forwards; }
.logo-go #lg-a     { animation: draw 1.1s var(--ease) .62s forwards, flood .7s ease-out 1.42s forwards; }
.logo-go #lg-s     { animation: draw 1.1s var(--ease) .79s forwards, flood .7s ease-out 1.59s forwards; }
.logo-go #lg-k     { animation: draw 1.1s var(--ease) .96s forwards, flood .7s ease-out 1.76s forwards; }

@keyframes draw  { to { stroke-dashoffset: 0; } }
@keyframes flood { to { fill-opacity: 1; stroke-opacity: 0; } }

/* tagline letters rise one by one - JS sets --i per letter */
#lg-tagline path { stroke: none; fill-opacity: 0; transform: translateY(14px); }
.logo-go #lg-tagline path {
  animation: rise .55s var(--ease) forwards;
  animation-delay: calc(2s + var(--i) * .038s);
}
@keyframes rise { to { fill-opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section-tint { background: var(--paper-tint); }

.section-dark {
  background: linear-gradient(170deg, #103c50 0%, #071a24 100%);
  color: var(--on-dark);
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: var(--on-dark-soft); }

.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .9rem;
}
.section-dark .kicker { color: var(--brand-bright); }

.section > .wrap > h2 { max-width: 26ch; margin-bottom: 1.2rem; }

.section-lede { max-width: 62ch; font-size: 1.05rem; color: var(--text-soft); margin-bottom: 3rem; }

.grid { display: grid; gap: 1.4rem; margin-top: 3rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; }

/* ---------- service cards ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 2rem 1.8rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(29, 100, 133, .35); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-soft); font-size: .95rem; margin: 0; }

.card-ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(29, 100, 133, .09);
  margin-bottom: 1.3rem;
  transition: background .4s, transform .4s var(--ease);
}
.card:hover .card-ico { background: var(--brand); transform: rotate(-6deg) scale(1.06); }
.card-ico svg {
  width: 23px; height: 23px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s;
}
.card:hover .card-ico svg { stroke: #fff; }

/* ---------- full-bleed statement band ---------- */

.band {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-900);
}
.band-photo {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: saturate(.55) brightness(.5);
  will-change: transform;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(7, 26, 36, .9) 0%, rgba(18, 65, 88, .62) 55%, rgba(7, 26, 36, .82) 100%);
}
.band-inner { padding: 5rem 0; }
.band-quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 20ch;
  margin: 0;
}
.band-quote span { color: var(--brand-bright); display: block; }

/* ---------- category cards ---------- */

.cat-grid { margin-top: 1rem; }

.cat {
  border: 1px solid rgba(157, 188, 204, .22);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
  transition: border-color .4s, background .4s, transform .4s var(--ease);
}
.cat:hover { border-color: rgba(79, 179, 217, .5); background: rgba(79, 179, 217, .06); transform: translateY(-5px); }

.cat-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.cat-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.72) contrast(1.05) brightness(.86);
  transform: scale(1.02);
  transition: transform .8s var(--ease), filter .6s;
}
.cat:hover .cat-photo img { transform: scale(1.09); filter: saturate(.95) contrast(1.05) brightness(.95); }
.cat-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 31, 42, .95) 2%, rgba(16, 60, 80, .3) 55%, rgba(16, 60, 80, .12) 100%);
  pointer-events: none;
}

.cat-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .12em;
  color: #fff;
  background: rgba(7, 26, 36, .55);
  border: 1px solid rgba(232, 242, 247, .3);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: .3rem .8rem;
}

.cat-body { padding: 1.9rem 2rem 2.2rem; }

.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .55rem;
  font-size: .93rem;
  color: var(--on-dark-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--brand-bright);
  border-bottom: 2px solid var(--brand-bright);
  transform: rotate(-45deg);
}

.cat-more { margin-top: 2.5rem; font-size: .95rem; }

/* ---------- process ---------- */

.process-wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: 3rem;
}

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before {
  content: "";
  position: absolute;
  left: 27px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(var(--brand), rgba(29, 100, 133, .08));
}

.step { position: relative; padding: 0 0 2.4rem 5rem; }
.step:last-child { padding-bottom: 0; }

.step-n {
  position: absolute;
  left: 0; top: -2px;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
  transition: background .35s, color .35s, transform .35s var(--ease);
}
.step:hover .step-n { background: var(--brand); color: #fff; transform: scale(1.07); }
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--text-soft); max-width: 52ch; margin: 0; font-size: .96rem; }

.process-photo { margin: 0; position: sticky; top: 6.5rem; }
.process-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r);
  display: block;
  filter: saturate(.75) contrast(1.03);
  box-shadow: var(--shadow);
}
.process-photo figcaption {
  margin-top: .9rem;
  font-size: .84rem;
  color: var(--text-soft);
  padding-left: .9rem;
  border-left: 2px solid var(--brand);
}

/* ---------- why ---------- */

.why-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.why-copy p { color: var(--text-soft); max-width: 52ch; }
.why-copy .btn { margin-top: 1.6rem; }

.why-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.why-list li {
  padding: 1.15rem 0 1.15rem 2.2rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--text-soft);
  font-size: .96rem;
}
.why-list li:last-child { border-bottom: 0; }
.why-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.55em;
  width: 12px; height: 2px;
  background: var(--brand);
}
.why-list strong { color: var(--text); font-weight: 600; }

.why-photo { margin: 0; position: sticky; top: 6.5rem; }
.why-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r);
  display: block;
  filter: saturate(.8) contrast(1.03);
  box-shadow: var(--shadow);
}

/* ---------- contact ---------- */

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-details { margin: 2.4rem 0 0; display: grid; gap: 1.4rem; }
.contact-details dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: .3rem;
}
.contact-details dd { margin: 0; color: var(--on-dark); font-size: .98rem; }
.contact-details a { text-decoration: none; border-bottom: 1px solid rgba(79, 179, 217, .4); }
.contact-details a:hover { border-color: var(--brand-bright); }

/* honeypot: kept in the DOM for bots, moved off-screen for people */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(157, 188, 204, .2);
  border-radius: var(--r);
  padding: 2rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-full, .contact-form .btn, .form-status { grid-column: 1 / -1; }

.field label {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .95rem;
  color: #fff;
  background: rgba(7, 26, 36, .5);
  border: 1px solid rgba(157, 188, 204, .25);
  border-radius: 8px;
  padding: .7rem .85rem;
  transition: border-color .25s, background .25s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand-bright);
  background: rgba(7, 26, 36, .8);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(157, 188, 204, .5); }
.field select option { color: #16242c; }
.field input:user-invalid, .field textarea:user-invalid { border-color: #d3705f; }

.contact-form .btn { justify-self: start; }
.form-status { font-size: .87rem; margin: 0; min-height: 1.2em; }
.form-status.ok  { color: var(--brand-bright) !important; }
.form-status.err { color: #e39182 !important; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink-900);
  color: var(--on-dark-soft);
  padding: 4rem 0 0;
  overflow: hidden;
}
.footer-tag { margin: 0 0 .6rem; max-width: 46ch; font-size: .92rem; }
.footer-locale { margin: 0 0 2rem; max-width: 46ch; font-size: .86rem; color: var(--brand-bright); }
.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: .9rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(157, 188, 204, .14);
}
.footer-nav a { text-decoration: none; transition: color .25s; }
.footer-nav a:hover { color: var(--brand-bright); }
.copyright { margin: 1.8rem 0 0; font-size: .82rem; opacity: .6; }

/* ---------- oversized wordmark bleeding off the bottom edge ---------- */

/* text on the left, lockup on the right, both starting on the same top line */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.footer-wordmark { width: 100%; }

/* The wordmark's viewBox is trimmed to the artwork itself (1302x737), so the
   frame's left edge sits flush with the footer text above. A box this much wider
   than it is tall shows the top 460 units - frame, then DASK cut just below the
   letters, tagline gone. Raise to crop harder, lower to reveal more. */
.wm-crop {
  aspect-ratio: 2.833;
  width: 100%;
  overflow: hidden;
}

.wm-svg {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .6s var(--ease);
}
.site-footer:hover .wm-svg { filter: brightness(1.12); }

.footer-wordmark .wm-svg > * {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.footer-wordmark.in .wm-svg > * { opacity: 1; transform: none; }
.footer-wordmark .wm-svg > #wm-d { transition-delay: .10s; }
.footer-wordmark .wm-svg > #wm-a { transition-delay: .18s; }
.footer-wordmark .wm-svg > #wm-s { transition-delay: .26s; }
.footer-wordmark .wm-svg > #wm-k { transition-delay: .34s; }

/* the container is only a trigger - the artwork does the moving */
.footer-wordmark.reveal { opacity: 1; transform: none; transition: none; }

html:not(.js) .footer-wordmark .wm-svg > * { opacity: 1; transform: none; }

/* ==========================================================================
   Scroll reveals
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* nothing on this page may depend on JS to become readable */
html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .logo-stage path { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
html:not(.js) #lg-tagline path { fill-opacity: 1; transform: none; }

.grid .reveal:nth-child(2), .steps .reveal:nth-child(2), .why-list .reveal:nth-child(2) { transition-delay: .08s; }
.grid .reveal:nth-child(3), .steps .reveal:nth-child(3), .why-list .reveal:nth-child(3) { transition-delay: .16s; }
.grid .reveal:nth-child(4), .steps .reveal:nth-child(4), .why-list .reveal:nth-child(4) { transition-delay: .24s; }
.grid .reveal:nth-child(5), .steps .reveal:nth-child(5), .why-list .reveal:nth-child(5) { transition-delay: .32s; }
.grid .reveal:nth-child(6), .steps .reveal:nth-child(6) { transition-delay: .40s; }

/* hero copy waits for the logo animation to finish */
.hero .eyebrow.reveal      { transition-delay: 2.30s; }
.hero h1.reveal            { transition-delay: 2.42s; }
.hero .lede.reveal         { transition-delay: 2.54s; }
.hero .hero-actions.reveal { transition-delay: 2.66s; }
.hero .hero-note.reveal    { transition-delay: 2.80s; }
.hero .hero-locale.reveal  { transition-delay: 2.92s; }

/* ==========================================================================
   Inner-page banner  (What we do / Categories / Process / Why / Contact)
   ========================================================================== */

.page-hero {
  position: relative;
  padding: 9rem 0 3.5rem;
  background: linear-gradient(168deg, #124158 0%, #0a2734 55%, #071a24 100%);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.page-hero .kicker { color: var(--brand-bright); }
.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  margin-bottom: .7rem;
}
.page-hero .lede { margin: 0; max-width: 62ch; color: var(--on-dark-soft); }

/* active nav item */
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--brand-bright);
}
.site-header.stuck .nav a[aria-current="page"] { color: var(--brand); }
.site-header.stuck .nav a[aria-current="page"]::after { background: var(--brand); }

/* "see everything ->" links under a preview grid */
.more-link { margin-top: 2.5rem; font-family: var(--font-display); font-weight: 700; }
.more-link a { color: var(--brand); text-decoration: none; }
.section-dark .more-link a { color: var(--brand-bright); }
.more-link a:hover { text-decoration: underline; }

/* categories grid on the light Categories page */
.cat-grid-light .cat { border-color: var(--line); background: #fff; box-shadow: var(--shadow); }
.cat-grid-light .cat h3 { color: var(--text); }
.cat-grid-light .cat p { color: var(--text-soft); }
.cat-grid-light .ticks li { color: var(--text-soft); }

/* extra-categories chips */
.chips { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.5rem; }
.chip {
  font-size: .92rem;
  font-weight: 500;
  color: var(--on-dark);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(157, 188, 204, .28);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.chip:hover { background: rgba(79, 179, 217, .12); border-color: var(--brand-bright); transform: translateY(-2px); }

/* call-to-action strip */
.cta { background: var(--paper-tint); }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.cta-inner h2 { margin-bottom: .4rem; }
.cta-inner p { margin: 0; color: var(--text-soft); max-width: 52ch; }
.cta-inner .btn { flex: 0 0 auto; }

/* ==========================================================================
   Assurance strip - four promises, sitting just under the hero
   ========================================================================== */

.assure {
  background: var(--ink-900);
  color: var(--on-dark);
  border-bottom: 1px solid rgba(157, 188, 204, .12);
}
.assure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}
.assure-item {
  padding: 2.4rem clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid rgba(157, 188, 204, .12);
  transition: background .35s;
}
.assure-item:first-child { border-left: 0; padding-left: 0; }
.assure-item:hover { background: rgba(79, 179, 217, .05); }
.assure-item h3 {
  font-size: .95rem;
  color: var(--brand-bright);
  margin-bottom: .45rem;
  letter-spacing: 0;
}
.assure-item p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--on-dark-soft);
}

/* ==========================================================================
   FAQ - native <details> accordion, no JS needed
   ========================================================================== */

.faq {
  margin-top: 2.6rem;
  border-top: 1px solid var(--line);
  max-width: 900px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }

/* the +/- mark, drawn in CSS so there is no icon to load */
.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq-mark::before, .faq-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--brand);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), opacity .3s;
}
.faq-mark::before { width: 15px; height: 2px; }
.faq-mark::after  { width: 2px; height: 15px; }
.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item[open] summary { color: var(--brand); }

.faq-a {
  padding: 0 0 1.5rem;
  max-width: 68ch;
  animation: faqIn .35s var(--ease);
}
.faq-a p { margin: 0; color: var(--text-soft); font-size: .97rem; line-height: 1.7; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

.faq-more { margin-top: 2.2rem; font-size: .95rem; color: var(--text-soft); }
.faq-more a { color: var(--brand); font-weight: 600; }

/* ==========================================================================
   Upcoming brands
   ========================================================================== */

.brand-grid { gap: 2rem; }

.brand-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.brand-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f5f6f6;   /* matches the video's near-white ground so it blends */
}
/* the Oulu clip is a full logo on white - show it whole and centred (contain),
   scaled up a touch so it fills the frame without cropping the wordmark */
.brand-video {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: scale(1.12);
}
/* soft white fade in the bottom corners tidies the video edge without a
   visible edge, since the ground behind it is already white */
.brand-media::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 34%; height: 30%;
  background: radial-gradient(120% 120% at 100% 100%, #f5f6f6 30%, rgba(245, 246, 246, 0) 72%);
  pointer-events: none;
}

/* teaser card: the logo is deliberately blurred and cropped, not revealed */
.brand-media-teaser { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #ffffff, #eef3f6); }
.brand-teaser {
  width: 135%;
  max-width: none;
  filter: blur(11px) saturate(1.1);
  transform: scale(1.08);
  opacity: .9;
  animation: rimjimDrift 16s ease-in-out infinite alternate;
}
/* quiet, slow drift so the blurred colours gently breathe and move */
@keyframes rimjimDrift {
  0%   { transform: scale(1.08) rotate(-2.5deg) translate(-1.5%, 1%);  filter: blur(11px) saturate(1.1); }
  100% { transform: scale(1.18) rotate(2.5deg)  translate(1.5%, -1.5%); filter: blur(13px) saturate(1.25); }
}
.brand-media-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 22%, rgba(240, 245, 247, .6) 100%);
}
.brand-reveal-note {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(255, 255, 255, .82);
  padding: .45rem 1rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(7, 26, 36, .4);
  animation: notePulse 3.2s ease-in-out infinite;
}
/* gentle breathing pulse on the badge */
@keyframes notePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 6px 18px -8px rgba(7, 26, 36, .4), 0 0 0 0 rgba(79, 179, 217, .45); }
  50%      { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 10px 24px -8px rgba(7, 26, 36, .45), 0 0 0 10px rgba(79, 179, 217, 0); }
}

.brand-status {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7, 26, 36, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  padding: .32rem .8rem;
  border-radius: 999px;
}

.brand-body { padding: 1.6rem 1.8rem 2rem; }
.brand-body h3 { font-size: 1.5rem; margin-bottom: .15rem; }
.brand-cat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .8rem;
}
.brand-body p:last-child { color: var(--text-soft); margin: 0; font-size: .96rem; }

/* ==========================================================================
   Floating chat / contact widget
   ========================================================================== */

.chat {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 150;
  font-family: var(--font-body);
}

.chat-fab {
  position: relative;
  width: 60px; height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(29, 100, 133, .8);
  display: grid;
  place-items: center;
  transition: transform .3s var(--ease), background .3s;
}
.chat-fab:hover { transform: scale(1.06); background: var(--brand-lift); }
.chat-fab-ico { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s, transform .3s var(--ease); }
.chat-fab-ico svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-i-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
.chat.open .chat-i-open { opacity: 0; transform: rotate(45deg) scale(.6); }
.chat.open .chat-i-close { opacity: 1; transform: none; }

.chat-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand);
  z-index: -1;
  animation: chatPulse 2.8s ease-out infinite;
}
.chat.open .chat-fab-pulse { display: none; }
@keyframes chatPulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(360px, calc(100vw - 2rem));
  height: min(520px, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px -18px rgba(7, 26, 36, .55), 0 0 0 1px rgba(7, 26, 36, .06);
  transform-origin: bottom right;
  transform: translateY(12px) scale(.96);
  opacity: 0;
  transition: transform .28s var(--ease), opacity .28s;
}
.chat.open .chat-panel { transform: none; opacity: 1; }
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(120deg, #124158, #1d6485);
  color: #fff;
}
.chat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.chat-head-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.chat-head-sub { margin: .1rem 0 0; font-size: .78rem; color: rgba(232, 242, 247, .85); display: flex; align-items: center; gap: .35rem; }
.chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #57d38a; box-shadow: 0 0 0 0 rgba(87, 211, 138, .6); animation: pulse 2.4s ease-out infinite; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--paper-tint);
}
.chat-msg {
  max-width: 82%;
  padding: .65rem .85rem;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.5;
  animation: msgIn .3s var(--ease) both;
}
.chat-msg a { color: inherit; font-weight: 600; }
.chat-msg.bot { align-self: flex-start; background: #fff; color: var(--text); border-bottom-left-radius: 4px; box-shadow: 0 2px 8px -4px rgba(7, 26, 36, .3); }
.chat-msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }

.chat-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: .8rem .9rem; background: #fff; border-radius: 14px; border-bottom-left-radius: 4px; box-shadow: 0 2px 8px -4px rgba(7, 26, 36, .3); }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); animation: typing 1.2s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.1rem .3rem; background: var(--paper-tint); }
.chat-quick button {
  font: inherit;
  font-size: .82rem;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(29, 100, 133, .3);
  border-radius: 999px;
  padding: .4rem .8rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.chat-quick button:hover { background: var(--brand); color: #fff; }

.chat-input { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); background: #fff; }
.chat-input input {
  flex: 1;
  font: inherit;
  font-size: .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .55rem .95rem;
  color: var(--text);
  background: #fff;
}
.chat-input input:focus { outline: none; border-color: var(--brand-bright); }
.chat-input button {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  display: grid; place-items: center;
}
.chat-input button svg { width: 18px; height: 18px; fill: #fff; }
.chat-input button:hover { background: var(--brand-lift); }

.chat-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem;
  background: #25d366;
  color: #063d1e;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s;
}
.chat-wa:hover { background: #1fb457; }
.chat-wa svg { width: 20px; height: 20px; fill: #063d1e; }

@media (prefers-reduced-motion: no-preference) {
  .chat-fab { animation: fabIn .5s var(--ease) both .4s; }
  @keyframes fabIn { from { transform: scale(0); opacity: 0; } }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .why-wrap, .contact-wrap, .process-wrap { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .process-photo, .why-photo { position: static; }
  .process-photo img { aspect-ratio: 16 / 10; }
  .why-photo img { aspect-ratio: 16 / 10; }
}

@media (max-width: 760px) {
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background: rgba(7, 26, 36, .97);
    backdrop-filter: blur(12px);
    transform: translateY(-100%);
    transition: transform .4s var(--ease);
    font-size: 1.05rem;
  }
  .nav.open { transform: none; }
  .nav a { color: var(--on-dark) !important; padding: 1rem 0; border-bottom: 1px solid rgba(157, 188, 204, .14); }
  .nav-cta { border: 0 !important; color: var(--brand-bright) !important; padding: 1rem 0; }

  .step { padding-left: 4rem; }
  .step-n { width: 46px; height: 46px; }
  .steps::before { left: 22px; }

  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-copy { padding-bottom: 0; }

  .band { min-height: 48vh; }
  .band-quote { max-width: none; }
  .cat-body { padding: 1.5rem 1.4rem 1.8rem; }
  .contact-form { padding: 1.5rem; }
  .section > .wrap > h2 { max-width: none; }
}

/* ==========================================================================
   Reduced motion - keep the layout, drop the movement
   ========================================================================== */

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

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .footer-wordmark .wm-svg > * { opacity: 1; transform: none; }
  .logo-stage path { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
  #lg-tagline path { fill-opacity: 1; transform: none; }
  .hero-canvas, .hero-sheen { display: none; }
}