:root{
  --ink:#0A1417;
  --paper:#F4F2EE;
  --muted:#8A9099;
  --accent:#3FBDBE;
  --accent-soft:rgba(63,189,190,.35);
  --hair:rgba(244,242,238,.12);
  --body:rgba(244,242,238,.78);
  --ease:cubic-bezier(.22,.68,.28,1);
}

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

html{scroll-behavior:smooth;scroll-padding-top:5rem;}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* soft light from above-left, very restrained */
.glow{
  position:fixed;
  inset:-30%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(52% 44% at 28% 12%, rgba(63,189,190,.13), transparent 68%),
    radial-gradient(60% 50% at 78% 90%, rgba(37,89,123,.13), transparent 70%);
  filter:blur(18px);
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1.02);}
  to  {transform:translate3d(1.5%,1.5%,0) scale(1.06);}
}

/* fine grain so the flat black reads as a surface, not a void */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

.wrap{
  position:relative;
  z-index:1;
  width:min(72rem,100%);
  margin:0 auto;
  padding:0 clamp(1.25rem,5vw,3rem);
}

a{color:var(--accent);text-decoration:none;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px;}
p a,dd a{border-bottom:1px solid var(--accent-soft);transition:border-color .2s;}
p a:hover,dd a:hover{border-bottom-color:var(--accent);}

/* brand mark: gradient outline cross */
.mark{fill:none;stroke:url(#mark-grad);stroke-width:5.1;stroke-linejoin:round;flex:none;}

/* header — sticky, translucent */
.site-head{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(10,20,23,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
.site-head-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  height:4.25rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:var(--paper);
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.02em;
}
.brand .mark{width:1.6rem;height:1.6rem;}
.brand,.site-head nav a{white-space:nowrap;}
.site-head nav{display:flex;gap:.25rem;}
.site-head nav a{
  color:var(--muted);
  font-size:.9rem;
  padding:.45rem .8rem;
  border-radius:999px;
  transition:color .2s,background-color .2s;
}
.site-head nav a:hover{color:var(--paper);background:rgba(244,242,238,.06);}
.site-head nav a[aria-current="page"]{color:var(--paper);background:rgba(244,242,238,.08);}

/* hero — the original composition, kept */
.hero{
  text-align:center;
  padding:clamp(4.5rem,13vh,8rem) 0 clamp(5rem,14vh,8.5rem);
}
.hero-mark{
  width:clamp(3.25rem,7vw,4.25rem);
  height:clamp(3.25rem,7vw,4.25rem);
  margin:0 auto clamp(2rem,5vw,2.75rem);
  display:block;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw 1.6s var(--ease) .1s forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}

h1{
  margin:0;
  font-weight:200;
  font-size:clamp(1.9rem,5.8vw,4rem);
  line-height:1.14;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-wrap:balance;
}
h1 .lead{
  display:block;
  font-size:.4em;
  letter-spacing:.3em;
  font-weight:300;
  color:var(--muted);
  margin-bottom:.9em;
  padding-left:.3em;
}
.en{
  margin:1.4em auto 0;
  font-size:clamp(.66rem,1.6vw,.76rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(244,242,238,.5);
  padding-left:.32em;
  max-width:none;
}
.rule{
  width:min(20rem,52%);
  height:1px;
  margin:clamp(2.25rem,5.5vw,3.25rem) auto;
  border:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.62;
}
.statement{
  margin:0 auto;
  max-width:36ch;
  font-size:clamp(1.1rem,2.5vw,1.4rem);
  line-height:1.6;
  color:rgba(244,242,238,.92);
  text-wrap:balance;
}
.statement-en{
  margin:.9rem auto 0;
  max-width:52ch;
  font-size:.92rem;
  color:var(--muted);
}
.actions{
  margin:2.5rem auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}
.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  height:3.1rem;
  padding:0 1.65rem;
  border-radius:999px;
  font-size:.97rem;
  font-weight:500;
  letter-spacing:.01em;
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);transition-duration:.1s;}

/* primary: the mark's own gradient, lit from inside */
.btn-primary{
  color:#041A1C;
  background:linear-gradient(135deg,#66CBD2 0%,#3FBDBE 45%,#2E8FA6 100%);
  box-shadow:
    0 0 0 1px rgba(102,203,210,.35),
    0 8px 24px -8px rgba(63,189,190,.55),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{
  box-shadow:
    0 0 0 1px rgba(102,203,210,.55),
    0 14px 36px -10px rgba(63,189,190,.75),
    inset 0 1px 0 rgba(255,255,255,.45);
}
/* sheen sweeps across once per hover */
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .8s var(--ease);}

/* ghost: frosted glass with a gradient hairline */
.btn-ghost{
  color:var(--paper);
  background:rgba(244,242,238,.04);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid transparent;
  background-image:
    linear-gradient(rgba(14,26,30,.92),rgba(14,26,30,.92)),
    linear-gradient(135deg,rgba(102,203,210,.7),rgba(244,242,238,.18) 60%,rgba(37,89,123,.6));
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.btn-ghost:hover{
  box-shadow:0 10px 28px -12px rgba(102,203,210,.45);
  background-image:
    linear-gradient(rgba(18,34,38,.92),rgba(18,34,38,.92)),
    linear-gradient(135deg,#66CBD2,rgba(244,242,238,.35) 60%,#25597B);
}

/* content sections: heading column + body column */
.block{
  display:grid;
  grid-template-columns:minmax(14rem,1fr) 2.2fr;
  gap:2rem clamp(2rem,6vw,5rem);
  padding:clamp(4rem,10vw,6.5rem) 0;
  border-top:1px solid var(--hair);
}
@media (max-width:52rem){
  .block{grid-template-columns:1fr;}
}
h2{
  margin:0;
  font-weight:250;
  font-size:clamp(1.7rem,3.4vw,2.35rem);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--paper);
}
.kicker{margin:.9rem 0 0;max-width:30ch;color:var(--muted);font-size:.98rem;}
h3{
  margin:0 0 .5rem;
  font-weight:400;
  font-size:1.12rem;
  line-height:1.4;
  color:var(--paper);
}
p{margin:0 0 .9rem;max-width:64ch;color:var(--body);}
.en-note{color:var(--muted);font-size:.9rem;}

.areas article{
  padding:1.6rem 0;
  border-top:1px solid var(--hair);
}
.areas article:first-child{padding-top:0;border-top:0;}
.areas article:last-child{padding-bottom:0;}
.areas p:last-child{margin-bottom:0;}

/* about page: first block sits under the header, h1 styled like section h2 */
.about-page{border-top:0;padding-top:clamp(3.5rem,9vw,5.5rem);}
.about-page h1{
  font-weight:250;
  font-size:clamp(1.9rem,4.2vw,2.8rem);
  line-height:1.2;
  letter-spacing:-.005em;
  text-transform:none;
}

/* about */
.about-lead{
  font-weight:250;
  font-size:clamp(1.35rem,2.8vw,1.85rem);
  line-height:1.45;
  letter-spacing:-.005em;
  color:var(--paper);
  margin-bottom:1.5rem;
  max-width:34ch;
  text-wrap:balance;
}
.principles{
  list-style:none;
  margin:2.75rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1rem;
}
/* frosted panels with the same gradient hairline as the ghost CTA */
.principles li{
  position:relative;
  padding:1.5rem 1.4rem 1.6rem;
  border-radius:1.1rem;
  border:1px solid transparent;
  background-image:
    linear-gradient(160deg,rgba(20,38,43,.78),rgba(12,24,28,.78)),
    linear-gradient(140deg,rgba(102,203,210,.55),rgba(244,242,238,.08) 45%,rgba(37,89,123,.45));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:box-shadow .35s var(--ease),background-image .35s;
}
.principles li:hover{
  box-shadow:0 18px 40px -22px rgba(63,189,190,.55);
  background-image:
    linear-gradient(160deg,rgba(22,43,48,.82),rgba(12,24,28,.82)),
    linear-gradient(140deg,#66CBD2,rgba(244,242,238,.16) 45%,#25597B);
}
.principles .mark{width:1.35rem;height:1.35rem;display:block;margin-bottom:1.15rem;}
.principles h3{font-size:1.05rem;margin-bottom:.45rem;}
.principles p{font-size:.93rem;line-height:1.6;margin:0;}

/* contact */
.contact{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:1rem 2.5rem;
  margin:0;
  align-content:start;
}
.contact dt{color:var(--muted);font-size:.9rem;padding-top:.15rem;}
.contact dd{margin:0;color:var(--paper);font-size:1.05rem;}
@media (max-width:36rem){
  .contact{grid-template-columns:1fr;gap:.2rem;}
  .contact dd{margin-bottom:1rem;}
}

.foot{
  display:flex;
  align-items:center;
  gap:.75rem;
  border-top:1px solid var(--hair);
  padding-top:2rem;
  padding-bottom:2.5rem;
  color:var(--muted);
  font-size:.85rem;
}
footer .mark{width:1.1rem;height:1.1rem;opacity:.8;}
footer p{margin:0;color:var(--muted);}
.foot-link{margin-left:auto;color:var(--muted);transition:color .2s;}
.foot-link:hover{color:var(--paper);}

/* long-form document page */
.doc{padding-top:clamp(3.5rem,9vw,5.5rem);padding-bottom:clamp(4rem,10vw,6rem);}
.doc > *{max-width:44rem;}
.doc h1{font-size:clamp(1.9rem,4.4vw,2.8rem);font-weight:250;letter-spacing:-.005em;text-transform:none;}
.doc .updated{color:var(--muted);font-size:.9rem;margin:1rem 0 3rem;}
.doc h2{font-size:1.3rem;font-weight:400;margin:2.75rem 0 .8rem;}

/* single entrance moment, hero only: mark draws, text settles */
.r{
  opacity:0;
  transform:translateY(10px);
  animation:rise .9s var(--ease) forwards;
}
.r-1{animation-delay:.25s}
.r-2{animation-delay:.4s}
.r-3{animation-delay:.55s}
.r-4{animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none;}}
.rule.r{animation:ruleIn 1.4s var(--ease) .45s forwards;}
@keyframes ruleIn{
  from{opacity:0;transform:scaleX(.2);}
  to  {opacity:.62;transform:scaleX(1);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .glow{animation:none;}
  .r{animation:none;opacity:1;transform:none;}
  .hero-mark{animation:none;stroke-dashoffset:0;}
  .rule.r{opacity:.62;transform:none;}
  *{transition:none !important;}
  .btn:hover{transform:none;}
  .btn-primary::after{display:none;}
}

@media (max-width:30rem){
  .site-head nav a{padding:.4rem .5rem;font-size:.85rem;}
  .brand span{font-size:.88rem;}
  .en{letter-spacing:.24em;}
  h1{letter-spacing:.03em;}
}
@media (max-width:26rem){
  .brand span{display:none;}
}