:root{
  --bg:#f7f7f4;
  --panel:rgba(248,248,245,.975);
  --text:#101010;
  --muted:#7c7c77;
  --line:rgba(16,16,16,.10);
  --header-h:72px;
  --footer-h:72px;

  --r1:#7ee7ff;
  --r2:#7c8cff;
  --r3:#d67cff;
  --r4:#ff8fb8;
  --r5:#ffc06f;
  --r6:#8be5ae;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

html,body{
  margin:0;
  min-height:100%;
}

body{
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);
  padding-bottom:var(--footer-h);
}

body.panel-open{overflow:hidden}


#top{
  scroll-margin-top:var(--header-h);
}

a{color:inherit;text-decoration:none}

.header,
.footer{
  position:fixed;
  z-index:40;
  left:0;
  right:0;
  height:var(--header-h);
  padding:0 32px;
  display:flex;
  align-items:center;
  background:rgba(247,247,244,.76);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.header{
  top:0;
  border-bottom:1px solid var(--line);
}

.footer{
  bottom:0;
  height:var(--footer-h);
  justify-content:space-between;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  letter-spacing:.10em;
}

.site-logo{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
}

.footer nav{
  display:flex;
  align-items:center;
  gap:0;
  height:100%;
}

.footer-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  border:0;
  padding:0 18px;
  background:none;
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  cursor:pointer;
  transition:opacity .2s ease;
}

.footer-link + .footer-link{
  border-left:1px solid rgba(16,16,16,.16);
}

.footer-link::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:7px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}

.footer-link:hover{
  opacity:.58;
}

.footer-link:hover::after,
.footer-link:focus-visible::after{
  transform:scaleX(1);
}

.footer-link:focus-visible{
  outline:1px solid var(--text);
  outline-offset:3px;
}

.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h) - var(--footer-h));
  display:grid;
  place-items:center;
  overflow:hidden;
  touch-action:manipulation;
}

.brand{
  position:relative;
  z-index:10;
  width:100%;
  padding-inline:24px;
  text-align:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  caret-color:transparent;
}

.brand h1{
  margin:0 auto;
  width:max-content;
  max-width:100%;
  font-size:clamp(2.8rem,11vw,8.75rem);
  line-height:.9;
  font-weight:400;
  letter-spacing:-.07em;
  white-space:nowrap;
}

.ripple-field{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.ripple{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}

.ripple::before,
.ripple::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:0;
  transform:scale(.08);
}

.ripple::before{
  padding:1.4px;
  background:conic-gradient(from 0deg,var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:ripplePrimary var(--duration) cubic-bezier(.17,.67,.24,1) forwards;
}

.ripple::after{
  border:1px solid rgba(16,16,16,.07);
  animation:rippleSecondary calc(var(--duration) * .82) .28s ease-out forwards;
}

.ripple-soft{filter:saturate(.72)}
.ripple-faint{opacity:.72}
.ripple-click::before{filter:saturate(.9)}

.echo{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.05);
  border:1px solid rgba(16,16,16,.045);
  opacity:0;
  animation:echoWave var(--duration) .45s ease-out forwards;
}

@keyframes ripplePrimary{
  0%{opacity:0;transform:scale(.08)}
  10%{opacity:.18}
  28%{opacity:.78}
  72%{opacity:.26}
  100%{opacity:0;transform:scale(1)}
}

@keyframes rippleSecondary{
  0%{opacity:0;transform:scale(.12)}
  20%{opacity:.16}
  100%{opacity:0;transform:scale(.82)}
}

@keyframes echoWave{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.05)}
  18%{opacity:.1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}

.scroll-cue{
  position:absolute;
  z-index:12;
  left:50%;
  bottom:22px;
  width:22px;
  height:38px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
}

.scroll-cue span{
  position:relative;
  width:1px;
  height:28px;
  background:var(--line);
  overflow:hidden;
}

.scroll-cue span::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--text);
  transform:translateY(-100%);
  animation:scrollCue 2.6s ease-in-out infinite;
}

@keyframes scrollCue{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

.services{
  min-height:72svh;
  padding:120px 28px 150px;
  border-top:1px solid var(--line);
  background:var(--bg);
}

.section-head,
.service-list,
.dummy-note{
  width:min(1180px,100%);
  margin-left:auto;
  margin-right:auto;
}

.section-head{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:48px;
  align-items:end;
  margin-bottom:76px;
}

.section-kicker,
.service-index,
.service-meta,
.dummy-note{
  color:var(--muted);
  font-size:9px;
  letter-spacing:.12em;
}

.section-kicker{margin:0}

.section-head h2{
  margin:0;
  font-size:clamp(38px,5vw,66px);
  font-weight:400;
  letter-spacing:-.055em;
}

.service-list{
  border-top:1px solid var(--line);
}

.service-row{
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 110px 22px;
  gap:24px;
  align-items:center;
  min-height:138px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  transition:opacity .22s ease;
}

.service-row:hover{opacity:.56}

.service-main h3{
  margin:0 0 8px;
  font-size:clamp(28px,4vw,48px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.045em;
}

.service-main p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.service-arrow{
  justify-self:end;
  font-size:15px;
}

.dummy-note{margin-top:22px}

.overlay{
  position:fixed;
  inset:0;
  z-index:100;
  visibility:hidden;
  pointer-events:none;
}

.overlay.is-open{
  visibility:visible;
  pointer-events:auto;
}

.overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(16,16,16,.14);
  opacity:0;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:opacity .4s ease;
}

.overlay.is-open .overlay-backdrop{opacity:1}

.overlay-panel{
  position:absolute;
  inset:18px;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  transform:translateY(34px);
  opacity:0;
  overflow:hidden;
  transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .32s ease;
}

.overlay.is-open .overlay-panel{
  transform:translateY(0);
  opacity:1;
}

.overlay-header{
  flex:0 0 72px;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
  letter-spacing:.18em;
}

.close-button{
  position:relative;
  width:34px;
  height:34px;
  border:0;
  background:none;
  cursor:pointer;
}

.close-button span{
  position:absolute;
  left:8px;
  top:16px;
  width:18px;
  height:1px;
  background:var(--text);
}

.close-button span:first-child{transform:rotate(45deg)}
.close-button span:last-child{transform:rotate(-45deg)}

.overlay-content{
  flex:1;
  overflow-y:auto;
  width:min(980px,calc(100% - 80px));
  margin:0 auto;
  padding:84px 0 110px;
}

.overlay-title{margin-bottom:84px}

.overlay-title h2{
  margin:0;
  font-size:clamp(42px,6vw,76px);
  font-weight:400;
  letter-spacing:-.055em;
}

.company-list{margin:0}

.company-list>div{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:48px;
  padding:28px 0;
  border-top:1px solid var(--line);
}

.company-list>div:last-child{border-bottom:1px solid var(--line)}

.company-list dt{
  color:var(--muted);
  font-size:12px;
}

.company-list dd{
  margin:0;
  font-size:14px;
  line-height:1.9;
}

.policy-content{width:min(900px,calc(100% - 80px))}
.policy-body{max-width:720px}

.policy-body section{
  padding:28px 0;
  border-top:1px solid var(--line);
}

.policy-body section:last-child{border-bottom:1px solid var(--line)}

.policy-body h3{
  margin:0 0 14px;
  font-size:13px;
  font-weight:500;
}

.policy-body p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:2;
}

@media(max-width:720px){
  :root{
    --header-h:64px;
    --footer-h:64px;
  }

  .header,.footer{
    padding-left:20px;
    padding-right:20px;
  }

  .site-logo,
  .footer{
    font-size:10px;
  }

  .footer nav{
    gap:0;
  }

  .footer-link{
    min-height:40px;
    padding:0 10px;
    font-size:11px;
  }

  .footer-link::after{
    left:10px;
    right:10px;
  }

  .brand{padding-inline:18px}

  .brand h1{
    font-size:clamp(2.45rem,17vw,5.2rem);
    letter-spacing:-.075em;
  }

  .services{padding:88px 18px 110px}

  .section-head{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:52px;
  }

  .service-row{
    grid-template-columns:42px minmax(0,1fr) 18px;
    gap:14px;
    min-height:122px;
  }

  .service-meta{display:none}

  .service-main h3{font-size:30px}
  .service-main p{font-size:11px;line-height:1.7}

  .overlay-panel{inset:8px}

  .overlay-header{
    flex-basis:62px;
    padding:0 18px;
  }

  .overlay-content,
  .policy-content{
    width:calc(100% - 36px);
    padding:60px 0 80px;
  }

  .overlay-title{margin-bottom:56px}

  .company-list>div{
    grid-template-columns:1fr;
    gap:10px;
    padding:22px 0;
  }
}

@media(max-width:420px){
  .brand h1{
    font-size:min(15.5vw,4.3rem);
    letter-spacing:-.08em;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
  }

  .ripple-field{display:none}
}


/* Contact --------------------------------------------------------------- */
.contact-content{
  width:min(900px,calc(100% - 80px));
}

.contact-title-block{
  display:grid;
  gap:18px;
}

.contact-title-block p{
  margin:0;
  max-width:560px;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}

.contact-form{
  max-width:720px;
  border-top:1px solid var(--line);
}

.form-row{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:48px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}

.form-row label{
  padding-top:12px;
  color:var(--muted);
  font-size:12px;
}

.form-row label span{
  display:block;
  margin-top:4px;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.65;
}

.form-row input,
.form-row textarea{
  width:100%;
  min-width:0;
  border:0;
  border-radius:0;
  padding:10px 0;
  outline:none;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:14px;
  line-height:1.8;
  resize:vertical;
}

.form-row input:focus,
.form-row textarea:focus{
  box-shadow:inset 0 -1px 0 var(--text);
}

.honeypot{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:24px 0 18px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  cursor:pointer;
}

.consent-row input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  accent-color:#111;
}

.turnstile-wrap{
  min-height:70px;
  padding:8px 0 20px;
}

.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.form-status{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.form-status.is-error{color:#8a3d3d}
.form-status.is-success{color:#397054}

.submit-button{
  min-width:150px;
  height:48px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border:1px solid rgba(16,16,16,.22);
  background:transparent;
  color:var(--text);
  font-size:11px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}

.submit-button:hover{
  background:var(--text);
  color:var(--bg);
}

.submit-button:disabled{
  opacity:.4;
  cursor:wait;
}

@media(max-width:720px){
  .contact-content{
    width:calc(100% - 36px);
  }

  .form-row{
    grid-template-columns:1fr;
    gap:4px;
    padding:20px 0;
  }

  .form-row label{
    padding-top:0;
  }

  .form-row label span{
    display:inline;
    margin-left:8px;
  }

  .form-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .submit-button{
    width:100%;
  }
}


/* Intro: restrained first-view animation */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.brand-char{
  display:inline-block;
  opacity:0;
  transform:translateY(3px);
  filter:blur(1.4px);
  transition:
    opacity .42s cubic-bezier(.2,.7,.2,1),
    transform .42s cubic-bezier(.2,.7,.2,1),
    filter .42s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform,filter;
}

.brand-char.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}


@media (prefers-reduced-motion: reduce){
  .brand-char{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .intro-ripple{display:none}
}




/* Intro completion ripple: same design as regular ripples, slightly stronger. */
.intro-ripple-strong{
  opacity:1 !important;
  filter:saturate(1.42) contrast(1.10);
}

.intro-ripple-strong::before,
.intro-ripple-strong::after{
  opacity:1;
}

.intro-ripple-strong.ripple-soft{
  --intro-line-strength:1;
}


@keyframes introRippleStrong{
  0%{
    opacity:1;
  }
  25%{
    opacity:1;
  }
  50%{
    opacity:1;
  }
  75%{
    opacity:1;
  }
  100%{
    opacity:1;
  }
}

.intro-ripple-strong{
  animation-name:introRippleStrong !important;
  opacity:1 !important;
  filter:saturate(1.42) contrast(1.10);
}


/* Intro completion ripple: keep the actual ring fully visible until it leaves the viewport. */
.intro-ripple-strong::before{
  animation:introRipplePrimary var(--duration) cubic-bezier(.17,.67,.24,1) forwards !important;
}

.intro-ripple-strong::after{
  animation:introRippleSecondary calc(var(--duration) * .82) .28s ease-out forwards !important;
}

.intro-ripple-strong > .echo{
  animation:introEchoWave var(--duration) .45s ease-out forwards !important;
}

@keyframes introRipplePrimary{
  0%{opacity:1;transform:scale(.08)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes introRippleSecondary{
  0%{opacity:1;transform:scale(.12)}
  100%{opacity:1;transform:scale(.82)}
}

@keyframes introEchoWave{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.05)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
}


/* Intro completion ripple: stronger dedicated color palette. */
.intro-ripple-strong::before{
  background:conic-gradient(
    from 0deg,
    #19c6ed,
    #4157ff,
    #ad39dc,
    #ef4a86,
    #f1952d,
    #2fbd72,
    #19c6ed
  ) !important;
  filter:saturate(1.18) contrast(1.08);
}