:root{
  --bg:#ffffff;
  --fg:#6c7a86; /* softer base text */
  --muted:#8b99a6; /* lighter muted text */
  --line:#e9eef5;
  /* Default UI surfaces updated */
  --surface:#ffffff; /* message/card background: pure white */
  --chrome:#ffffff;  /* header background: pure white */
  /* Brand colors with alpha matching secondary message usage */
  --accent: #fa3c2d;                 /* red */
  --accent-2: #1eb9e6;               /* blue */
  --accent-3: #ffc82d;               /* yellow */
  --radius:18px;
  --shadow:0 6px 20px rgba(17,20,24,0.06);
  --ease:cubic-bezier(0.2,0.6,0.2,1);
}

html,body{height:100%}
body{
  margin:0;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Background light (low-cost) */
.bg{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(250,60,45,0.08), transparent 60%),
    radial-gradient(50% 40% at 70% 65%, rgba(30,185,230,0.10), transparent 60%),
    radial-gradient(40% 40% at 30% 70%, rgba(255,200,45,0.12), transparent 60%);
}
.bg::after{
  content:""; position:absolute; inset:0;
  background: conic-gradient(from 0deg at 50% 45%,
    rgba(250,60,45,0.10), rgba(30,185,230,0.08), rgba(255,200,45,0.10), rgba(250,60,45,0.10));
  mask: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.9), transparent 65%);
  filter: blur(28px);
  animation: spin 36s linear infinite;
  transform-origin: 50% 45%;
}
@keyframes spin { to { transform: rotate(360deg); } }

.wrap{ width:min(1100px, calc(100% - 32px)); margin-inline:auto; }
section{ padding:86px 0; }
h1,h2,h3{ line-height:1.2; margin:0 0 16px; }
/* Larger section headings with English sublabel */
h2{ font-size: clamp(24px, 3.2vw, 36px); }
.hd{ display:flex; flex-direction: column; align-items: center; gap:12px; flex-wrap: wrap; justify-content: center; }
.hd-en{ font-size: .6em; color: var(--muted); letter-spacing: .02em; }
/* Center align main section headings */
.services h2, .works h2, .blog h2, .company h2, .contact h2{ text-align:center; }
/* Center all H2 inside main (covers message sections, etc.) */
main h2{ text-align:center; }
/* Blog: right-align the CTA and add spacing */
.blog .blog-cta{ text-align: center; margin-top: clamp(24px, 6vw, 64px); }
@media (max-width: 700px){
  .blog .blog-cta{ margin-top: clamp(48px, 10vw, 88px); }
}
/* Blog CTA button: match Contact button styling */
.blog .blog-cta .btn{
  padding:12px 18px;
  color: var(--fg);
  background: #ffffff;
  border: 1.5px solid var(--accent-2);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
 font-weight:700; }
.blog .blog-cta .btn:hover{
  background: var(--accent-2);
  color: var(--fg);
  border-color: var(--accent-2);
}
.muted{ color:var(--muted); }

/* Buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:12px; background:var(--accent); color:var(--fg); text-decoration:none; box-shadow: var(--shadow); transition: transform .2s var(--ease), filter .2s var(--ease);  font-weight:700; }
.btn:focus-visible{ outline: 3px solid rgba(30,185,230,0.35); outline-offset: 2px; }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }

/* Hero */
.hero{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center; background: #fff; }
/* Make hero a positioning context for scroll cue */
.hero{ position: relative; }
/* Ensure SVG appears above text even if markup order differs */
.hero .orb{ order: -1; }
@media (max-width: 900px){ .hero{ flex-direction:column; } }
.hero h1{ font-size: clamp(32px, 6vw, 64px); letter-spacing:-0.02em; font-weight:600; }
.lead{ font-size: clamp(16px, 2.4vw, 20px); color:var(--muted); }
/* Hero: make body text same color as heading */
.hero .lead{ color: var(--fg); }
.orb{
  display:grid; place-items:center; aspect-ratio:1/1; max-width:520px; width:100%; margin-inline:auto;
  background: transparent; /* remove surrounding gradient */
  border-radius: 50%;
}
svg.globe{ width:100%; height:auto; max-width:420px; filter: none; }
@media (max-width: 700px){
  svg.globe{ max-width:260px; }
}

/* Scroll cue (mouse) */
.scroll-cue{ position:absolute; left:50%; bottom:12px; transform: translateX(-50%); text-decoration:none; z-index:2; opacity:0.75; transition: opacity .2s var(--ease); }
.scroll-cue:hover{ opacity:1; }
/* Mask the external margin area below hero so background gradient doesn't peek */
.hero::after{
  content:""; position:absolute; left:0; right:0;
  height: var(--hero-sep-gap, 0px);
  bottom: calc(-1 * var(--hero-sep-gap, 0px));
  background: #fff; pointer-events:none;
}
/* Desktop: raise scroll cue so it's visible on initial viewport */
@media (min-width: 900px){
  .hero .scroll-cue{ bottom: 48px; }
}
/* Mobile: lower only the scroll cue (keep all other positions unchanged) */
@media (max-width: 700px){
  .hero .scroll-cue{ bottom: 0; }
}
/* Ensure next message section doesn't peek at initial view: add space below hero
   (does not affect globe, text, or arrow positions inside hero) */
@media (min-width: 900px){
  .hero{ margin-bottom: 12px; --hero-sep-gap: 12px; }
}
@media (max-width: 899.98px){
  .hero{ margin-bottom: 64px; --hero-sep-gap: 64px; }
}
/* Small screens (incl. some tablets): move only heading/body closer to globe */
@media (max-width: 900px){
  .hero h1{ margin-bottom: 4px; }
  .hero .lead{ margin-top: 0; }
  .hero .wrap{ margin-top: 0; transform: translateY(-64px); position: relative; z-index: 2; }
  .hero .orb{ position: relative; z-index: 1; }
}
/* Desktop and larger: also move only heading/body closer to globe (can overlap) */
@media (min-width: 901px){
  .hero .wrap{ margin-top: 0; transform: translateY(-72px); position: relative; z-index: 2; }
  .hero .orb{ position: relative; z-index: 1; }
}
/* Simple downwards arrow */
.scroll-arrow{ display:inline-block; width:18px; height:18px; border-right:3px solid rgba(74,85,104,0.9); border-bottom:3px solid rgba(74,85,104,0.9); transform: rotate(45deg); animation: arrowFlow 1.4s var(--ease) infinite; }
@keyframes arrowFlow{ 0%{ opacity:0; transform: translateY(0) rotate(45deg);} 30%{ opacity:1;} 100%{ opacity:0; transform: translateY(12px) rotate(45deg);} }
@media (prefers-reduced-motion: reduce){ .scroll-arrow{ animation: none; } }
/* (reverted) mobile scroll cue bottom override removed */
/* Process connector arrow animation (center-preserving) */
@keyframes procArrowFlow{
  0%   { opacity:0; transform: translateX(-50%) translateY(0) rotate(45deg); }
  30%  { opacity:1; }
  100% { opacity:0; transform: translateX(-50%) translateY(12px) rotate(45deg); }
}
.globe-v2{ width:100%; height:auto; max-width:420px; display:none; }
.hero.is-v2 .globe{ display:none; }
.hero.is-v2 .globe-v2{ display:block; }
.wire{ fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke: var(--accent-2); opacity:0.9; }
.wire.alt{ stroke: var(--accent-3); opacity:0.9; }
/* Draw 鬯ｯ・ｩ陋ｹ繝ｻ・ｽ・ｽ繝ｻ・ｶ鬯ｩ諤憺●繝ｻ・ｽ繝ｻ・ｫ鬩幢ｽ｢隴趣ｽ｢繝ｻ・ｽ繝ｻ・ｻhold 鬯ｯ・ｩ陋ｹ繝ｻ・ｽ・ｽ繝ｻ・ｶ鬯ｩ諤憺●繝ｻ・ｽ繝ｻ・ｫ鬩幢ｽ｢隴趣ｽ｢繝ｻ・ｽ繝ｻ・ｻreverse to erase 鬯ｯ・ｩ陋ｹ繝ｻ・ｽ・ｽ繝ｻ・ｶ鬯ｩ諤憺●繝ｻ・ｽ繝ｻ・ｫ鬩幢ｽ｢隴趣ｽ｢繝ｻ・ｽ繝ｻ・ｻhold */
.wire{ --dash:260; --gap: 1000; --dash-hide: calc(var(--dash) + 3); stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash); animation: dashLoop 7.2s var(--ease) infinite; }
@keyframes dashLoop{
  0%   { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
  1%   { stroke-dasharray: var(--dash);           stroke-dashoffset: var(--dash); }
  20%  { stroke-dasharray: var(--dash);           stroke-dashoffset: 0; }
  50%  { stroke-dasharray: var(--dash);           stroke-dashoffset: 0; }
  80%  { stroke-dasharray: var(--dash);           stroke-dashoffset: var(--dash); }
  99%  { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
  100% { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
}
/* small stagger so lines don't sync perfectly */
.lines .wire:nth-child(2){ animation-delay: .12s; }
.lines .wire:nth-child(3){ animation-delay: .24s; }
.lines .wire:nth-child(4){ animation-delay: .36s; }
.globe{ transform-origin:center; }
.flame{ fill: var(--accent); filter: none; }
.flame{ animation: pulse 3.6s var(--ease) infinite 1.1s; transform-origin:center; }
@keyframes pulse { 0%,100%{ transform: scale(1); } 40%{ transform: scale(1.12); } 70%{ transform: scale(0.96);} }

/* Header */
.site-header{ position: sticky; top:0; z-index: 1000; background: var(--chrome); border-bottom:1px solid var(--line); box-shadow: 0 4px 18px rgba(17,20,24,0.04); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; position: relative; }
.brand{ font-weight: 800; letter-spacing:-0.02em; color:var(--fg); text-decoration:none; }
.site-nav{ display:flex; gap:12px; }
.site-nav a{ display:inline-block; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--fg); opacity:0.9; font-weight:700; transition: background .2s var(--ease), opacity .2s var(--ease); }
.site-nav a:hover{ background: var(--surface); opacity:1; }
.site-nav a:focus-visible{ outline: 3px solid rgba(30,185,230,0.35); outline-offset: 2px; }
@media (max-width: 700px){ .site-nav a{ padding:6px 8px; } }

/* Mobile menu */
.menu-toggle{ display:none; appearance:none; background:transparent; border:0; padding:8px; border-radius:10px; cursor:pointer; }
.menu-toggle:focus-visible{ outline: 3px solid rgba(30,185,230,0.35); outline-offset: 2px; }
.menu-toggle .menu-bar{ display:block; width:22px; height:2px; background:#4a5568; margin:4px 0; border-radius:2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.site-header.is-open .menu-toggle .menu-bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.site-header.is-open .menu-toggle .menu-bar:nth-child(2){ opacity:0; }
.site-header.is-open .menu-toggle .menu-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .menu-toggle{ display:inline-block; }
  .site-nav{ position:absolute; top:100%; right:12px; left:12px; display:none; flex-direction:column; gap:6px; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow: 0 10px 24px rgba(17,20,24,0.08); z-index: 10; }
  .site-header.is-open .site-nav{ display:flex; }
  .site-nav a{ padding:10px 12px; opacity:1; }
}

/* Reveal-on-scroll (fade + lift) */
.reveal{ opacity: 0; transform: translateY(12px); will-change: opacity, transform; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition: none !important; }
}

/* Main-section center globe (fixed, calm) */
.main-globe{ position: fixed; inset: 0; display:none; place-items:center; pointer-events:none; z-index:0; }
.main-globe.is-on{ display:grid; }
.main-globe .globe-svg{ width: clamp(240px, 42vmin, 520px); height:auto; opacity:0.5; transform-origin: 50% 50%; transform-box: fill-box; overflow: visible; }
/* Ensure group transforms are centered on the globe */
.main-globe .wires{ transform-origin: 50% 50%; transform-box: fill-box; }
.main-globe .wire{ fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; animation: none !important; opacity:1; }
.main-globe .wire{ stroke: var(--accent-2); }
.main-globe .wire.alt{ stroke: var(--accent-3); }
@media (max-width: 700px){ .main-globe .globe-svg{ opacity:0.5; } }

/* Center seed in globe */
.main-globe .globe-seed{ fill: var(--accent); opacity:1; filter: drop-shadow(0 6px 18px rgba(250,60,45,0.22)); }

/* Hero V2: wireframe + routes */
.wire-base{ fill:none; stroke: var(--line); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:0.9; }
.seed{ fill: var(--accent); }
.route{ fill:none; stroke: var(--accent-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:0.95; 
  --dash: 260; --gap: 1000; --dash-hide: calc(var(--dash) + 3);
  stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash);
  animation: routeLoop 7.2s var(--ease) infinite;
}
.route.alt{ stroke: var(--accent-3); }
.routes .route:nth-child(2){ animation-delay: .18s; }
.routes .route:nth-child(3){ animation-delay: .36s; }
.routes .route:nth-child(4){ animation-delay: .54s; }

@keyframes routeLoop{
  0%   { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
  1%   { stroke-dasharray: var(--dash);           stroke-dashoffset: var(--dash); }
  20%  { stroke-dasharray: var(--dash);           stroke-dashoffset: 0; }
  50%  { stroke-dasharray: var(--dash);           stroke-dashoffset: 0; }
  80%  { stroke-dasharray: var(--dash);           stroke-dashoffset: var(--dash); }
  99%  { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
  100% { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
}

/* Company (About) */
.company .company-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:16px; align-items:start; }
@media (max-width: 900px){ .company .company-grid{ grid-template-columns: 1fr; } }
.company-dl{ display:grid; grid-template-columns: 8em 1fr; gap:8px 12px; margin:0; }
.company-dl dt{ font-weight:700; color:var(--fg); }
.company-dl dd{ margin:0; color:var(--fg); }
.company h3{ margin: 8px 0; font-size: 18px; }
.company-col h3 + .company-list{ margin-top: 8px; }
.company-list{ margin:0 0 16px; padding-left: 18px; }
.company-list li{ margin: 4px 0; }
.company-timeline{ margin:0; padding-left: 18px; }
.company-timeline li{ margin: 4px 0; }
/* Single card wrapping the entire company grid */
.company .company-card{
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(160%) blur(6px);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}

/* a11y utility */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border:0; }

/* Wander: subtle random-like drift around center */
.flame-wander{ transform-box: fill-box; transform-origin: center; animation: wander 14s var(--ease) infinite alternate; }
@keyframes wander{
  0%   { transform: translate(0px, 0px); }
  12%  { transform: translate(6px, -3px); }
  26%  { transform: translate(-5px, 4px); }
  42%  { transform: translate(8px, 2px); }
  58%  { transform: translate(-6px, -5px); }
  74%  { transform: translate(3px, 7px); }
  88%  { transform: translate(-2px, -4px); }
  100% { transform: translate(0px, 0px); }
}

/* Message */
.message{ position:relative; background: #f7f9fc; border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.message .wrap{ padding: 48px 24px; position: relative; z-index: 1; }
.message::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background: none; animation: none;
}
/* Remove previous subtle grid/breathe; keep section itself light gray via var(--surface) */

/* Background word (subtle, large) */
.message[data-bgword]::after{
  content: attr(data-bgword);
  position:absolute; top: var(--bgword-top, 50%); transform: translateY(-50%);
  font-size: clamp(64px, 18vw, 220px);
  font-weight: 800; letter-spacing: -0.04em; line-height:1;
  color: rgba(17,20,24,0.06);
  pointer-events:none; user-select:none; white-space:nowrap;
  z-index: 0;
}
.message--bg-right::after{ right: 12px; left: auto; text-align:right; }
.message--bg-left::after{ left: 12px; right: auto; text-align:left; }
@media (max-width: 700px){
  .message[data-bgword]::after{
    font-size: clamp(48px, 22vw, 120px);
    left: 50%; right: auto; text-align:center; transform: translate(-50%, -50%);
  }
}

/* Secondary message aligned to right on desktop */
.message--bg-right{ z-index: 6; }
.message--secondary{ z-index: 6; }
/* Message headings alignment overrides */
#msg-title{ text-align:left; }
#msg2-title{ text-align:right; }
.message h2{ text-align:left; }
.message.message--secondary h2{ text-align:right; }
/* Mobile: left-align headings for both message sections */
@media (max-width: 700px){
  #msg-title, #msg2-title{ text-align:left; margin-bottom: 24px; }
}
/* Mobile: lift first/second message headings by reducing top padding */
@media (max-width: 700px){
  .message.message--bg-right .wrap,
  .message.message--secondary .wrap{
    padding-top: 12px; /* was 48px */
  }
}
/* Mobile: reduce message body text slightly to avoid awkward breaks */
@media (max-width: 700px){
  .message p{ font-size: clamp(14px, 3.6vw, 16px); }
}
/* (reverted) mobile message top padding override removed */
/* Secondary message body: right-align on desktop */
@media (min-width: 900px){
  .message.message--secondary .msg-body-new{ text-align: right; }
}
/* Desktop: slightly larger message body text */
@media (min-width: 900px){
  .message p{ font-size: 17px; }
}

/* Process (vertical timeline cards) */
.process h2{ text-align:center; }
/* Swap EN/JA order for Process heading */
.process .hd{ flex-direction: column-reverse; justify-content: center; }
/* Swap sizes/colors but keep original ratio (.hd-en was .6em muted) */
.process .hd-en{ font-size: 1em; color: var(--fg); }
.process .hd span:not(.hd-en){ font-size: .55em; color: var(--fg); }
/* Works heading: left align, EN prominent, JA muted (same balance as Process) */
.works h2{ text-align:center; }
.works .hd-en{ font-size: 1em; color: var(--fg); }
.works .hd span:not(.hd-en){ font-size: .55em; color: var(--fg); }
/* Services heading: same balance as Process/Works */
.services h2{ text-align:center; }
.services .hd-en{ font-size: 1em; color: var(--fg); }
.services .hd span:not(.hd-en){ font-size: .55em; color: var(--fg); }
/* Blog heading */
.blog h2{ text-align:center; }
.blog .hd-en{ font-size: 1em; color: var(--fg); }
.blog .hd span:not(.hd-en){ font-size: .55em; color: var(--fg); }
/* Company heading */
.company h2{ text-align:center; }
.company .hd-en{ font-size: 1em; color: var(--fg); }
.company .hd span:not(.hd-en){ font-size: .55em; color: var(--fg); }
/* Contact heading */
.contact h2{ text-align:center; }
.contact .hd-en{ font-size: 1em; color: var(--fg); }
.contact .hd span:not(.hd-en){ font-size: .55em; color: var(--fg); }
/* On mobile, keep JP same size as EN for readability */
@media (max-width: 700px){
  .services .hd span:not(.hd-en),
  .process .hd span:not(.hd-en),
  .works .hd span:not(.hd-en),
  .blog .hd span:not(.hd-en),
  .company .hd span:not(.hd-en),
  .contact .hd span:not(.hd-en){
    font-size: 1em;
  }
}
/* Mobile: make JP part of headings match message body size */
@media (max-width: 700px){
  .process h2.hd span:not(.hd-en),
  .works   h2.hd span:not(.hd-en),
  .company h2.hd span:not(.hd-en),
  .contact h2.hd span:not(.hd-en){
    font-size: clamp(13px, 3.4vw, 15px);
  }
}
.steps{ position: relative; display: grid; gap: 24px; margin: 16px 0 0; padding: 0; list-style: none; justify-items: center; }
/* Ensure Process section cards have visibly larger gaps */
.process .steps{ --process-gap: 32px; column-gap: 0; row-gap: var(--process-gap); gap: var(--process-gap); }
@media (min-width: 900px){
  .process .steps{ --process-gap: 44px; }
}
/* Center the arrow within the gap between cards */
/* moved below the base rule to ensure cascade */
.steps > li{ list-style: none; }
.steps > li::marker{ content: ""; }
.steps::before{ display:none; content:none; }
.steps::after{ display:none; content:none; }
@keyframes dotsFall{
  from { background-position: center -96px, center -64px, center -32px; }
  to   { background-position: center 0,     center 32px,  center 64px; }
}
.step-card{ position: relative; background: rgba(255,255,255,0.35); backdrop-filter: saturate(160%) blur(6px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; max-width: 720px; width: 100%; margin-inline: auto; box-sizing: border-box; }
.step-card h3{ margin: 0 0 8px; font-size: 18px; }
.step-card::before{ display:none; content:none; }
.process .step-ill{ display:flex; justify-content:center; align-items:center; margin: 4px 0 10px; }
.process .step-ill img{ width: clamp(120px, 28vw, 220px); height:auto; display:block; }
.step-card:not(:last-child)::after{
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 12px; height: 12px;
  border-right: 3px solid var(--accent-2); border-bottom: 3px solid var(--accent-2); transform: translateX(-50%) rotate(45deg);
}
/* Override position inside Process to keep the arrow centered within the gap */
.process .step-card:not(:last-child)::after{
  /* Place arrow just under the upper card (top of the gap) */
  bottom: -12px;
  /* Use brand blue for arrow */
  border-right-color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  animation: procArrowFlow 1.4s var(--ease) infinite;
}
@media (max-width: 700px){
  .step-card{ padding: 16px; }
  .step-card:not(:last-child)::after{ left: 50%; }
}

@media (prefers-reduced-motion: reduce){
  .steps::after{ animation: none; opacity: 0.7; }
}

/* Respect reduced motion for process arrows as well */
@media (prefers-reduced-motion: reduce){
  .process .step-card:not(:last-child)::after{ animation: none; }
}


/* Snake animation overlay (secondary message) */
.message-snake{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.snake-svg{ width:100%; height:100%; display:block; }
.snk-seg{ /* color set inline by JS */ opacity: 0.55; }
.snk-food{ fill: var(--accent); filter: drop-shadow(0 4px 16px rgba(250,60,45,0.18)); opacity: 0.75; }

/* Secondary message: hide legacy immediate paragraphs; show new body */
.message--secondary .msg-inner > p{ display:none; }
.message--secondary .msg-body-new{ position: relative; z-index: 1; }

/* Message: network animation */
.message-net{ position:absolute; inset:0; pointer-events:none; z-index: 0; }
.mesh-svg{ width:100%; height:100%; }

/* Message: spiral runner (removed) */

/* Message: bouncing seed */
.message-bounce{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.bounce-svg{ width:100%; height:100%; display:block; }
.mb-trail{ fill:none; stroke: url(#mb-grad); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.6; }
.mb-trail.alt{ stroke: var(--accent-3); }
.mb-ball{ fill: var(--accent); opacity:0.85; }
/* gray mesh globe */
.mesh-wire{ display:none; }
.seed{ fill: var(--accent); animation: seedPop .6s var(--ease) both; animation-delay: .6s; transform-origin: center; }
@keyframes seedPop { 0%{ transform: scale(0.6); opacity:.0; } 100%{ transform: scale(1); opacity:1; } }
/* animated colored routes */
.routes .route{ fill:none; stroke: var(--accent-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:0.95;
  --dash:260; --gap:1000; --dash-hide: calc(var(--dash) + 3);
  stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash);
  animation: meshRoute 8.4s var(--ease) infinite;
}
.routes .route.alt{ stroke: var(--accent-3); }
/* slight staggers to feel like spreading */
.routes .route:nth-child(1){ animation-delay: 1.4s; }
.routes .route:nth-child(2){ animation-delay: 1.7s; }
.routes .route:nth-child(3){ animation-delay: 2.0s; }
.routes .route:nth-child(4){ animation-delay: 2.3s; }
.routes .route:nth-child(5){ animation-delay: 2.6s; }
.routes .route:nth-child(6){ animation-delay: 2.9s; }

/* radial rays from seed */
.rays .ray{ fill:none; stroke: var(--accent-2); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:0.95;
  --dash:100; --gap:600; --dash-hide: calc(var(--dash) + 3);
  stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash);
  animation: meshRoute 6.6s var(--ease) infinite;
}
.rays .ray.alt{ stroke: var(--accent-3); }
.rays .ray:nth-child(1){ animation-delay: 1.0s; }
.rays .ray:nth-child(2){ animation-delay: 1.15s; }
.rays .ray:nth-child(3){ animation-delay: 1.3s; }
.rays .ray:nth-child(4){ animation-delay: 1.45s; }
.rays .ray:nth-child(5){ animation-delay: 1.6s; }
.rays .ray:nth-child(6){ animation-delay: 1.75s; }

/* endpoints appear after rays' initial draw (~ +1.2s from each) */
.nodes .node{ fill: var(--accent); opacity:0; transform: scale(0.6); transform-origin:center; animation: nodeIn .6s var(--ease) forwards; }
@keyframes nodeIn{ to { opacity:1; transform: scale(1); } }
.nodes .node:nth-child(1){ animation-delay: 2.2s; }
.nodes .node:nth-child(2){ animation-delay: 2.35s; }
.nodes .node:nth-child(3){ animation-delay: 2.5s; }
.nodes .node:nth-child(4){ animation-delay: 2.65s; }
.nodes .node:nth-child(5){ animation-delay: 2.8s; }
.nodes .node:nth-child(6){ animation-delay: 2.95s; }

/* second wave: branches from endpoints */
.branches .branch{ fill:none; stroke: var(--accent-2); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:0.95;
  --dash:100; --gap:600; --dash-hide: calc(var(--dash) + 3);
  stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash);
  animation: meshRoute 6.6s var(--ease) infinite;
}
.branches .branch.alt{ stroke: var(--accent-3); }
.branches .branch:nth-child(1){ animation-delay: 2.6s; }
.branches .branch:nth-child(2){ animation-delay: 2.75s; }
.branches .branch:nth-child(3){ animation-delay: 2.9s; }
.branches .branch:nth-child(4){ animation-delay: 3.05s; }
.branches .branch:nth-child(5){ animation-delay: 3.2s; }
.branches .branch:nth-child(6){ animation-delay: 3.35s; }
.branches .branch:nth-child(7){ animation-delay: 3.5s; }

@keyframes meshRoute{
  0%   { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
  1%   { stroke-dasharray: var(--dash);           stroke-dashoffset: var(--dash); }
  20%  { stroke-dasharray: var(--dash);           stroke-dashoffset: 0; }
  50%  { stroke-dasharray: var(--dash);           stroke-dashoffset: 0; }
  80%  { stroke-dasharray: var(--dash);           stroke-dashoffset: var(--dash); }
  99%  { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
  100% { stroke-dasharray: var(--dash) var(--gap); stroke-dashoffset: var(--dash-hide); }
}

/* Services */
.services{ position:relative; }
.services .bg-grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0.55;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  mask: radial-gradient(120% 90% at 50% 40%, black, transparent 80%);
}
/* After-services sections: remove decorative backgrounds */
.services, .works, .blog{ background: transparent !important; }
/* Contact section: match Message styling */
.contact{
  position:relative;
  /* Card-like appearance similar to message sections */
  background: #f7f9fc !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* Ensure it layers above the globe overlay */
  z-index: 7;
}
.contact::before{ content: none; }
.contact .wrap{ padding: 48px 24px; position: relative; z-index: 1; background: transparent; border:0; border-radius: 0; backdrop-filter: none; text-align: center; }
.contact h2{ letter-spacing:-0.01em; }
.contact h2::after{ content: none; }
.contact .btn{
  padding:12px 18px;
  color: var(--fg);
  background: #ffffff;
  border: 1.5px solid var(--accent-2);
  border-radius: 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: visible;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  margin-top: 28px;
 font-weight:700; }
.contact .btn:hover{
  background: var(--accent-2);
  color: var(--fg);
  border-color: var(--accent-2);
}

/* Contact: simple line paper-airplane under the button */
.contact-plane{ margin-top: 10px; height: 48px; display:grid; place-items:center; pointer-events:none; }
.contact-plane .plane-svg{ width: 160px; height: 48px; display:block; }
.contact-plane .plane-path{ fill:none; stroke: var(--accent-2); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0.95; }

/* Contact: bouncing ball background (left area) */
/* contact-bounce styles removed */

/* Ripple element injected by JS */
.contact .btn .btn-ripple{
  position:absolute; left:50%; top:50%; width:100%; height:100%;
  border: 2px solid var(--ripple-color, currentColor);
  border-radius: inherit; box-sizing: border-box;
  transform: translate(-50%, -50%) scale(1);
  background: transparent; opacity:0.35; pointer-events:none;
  animation: contactRipple 2200ms var(--ease) forwards;
}
@keyframes contactRipple{
  0%{ transform: translate(-50%, -50%) scale(1); opacity:0.28; border-width: 2px; }
  100%{ transform: translate(-50%, -50%) scale(4.2); opacity:0; border-width: 1px; }
}

/* floating animation removed */
.lattice-scope{ background:var(--bg); }
.services .bg-grid{ display:none; }

/* Lattice background across Services + Works + Blog */
.lattice-scope{ position:relative; }
/* Fallback English labels for headings we didn't touch in HTML */
/* Inline dual-language headings now used; remove pseudo fallbacks */
/* Also render English-only for message headings */
.contact a[href="/contact"]{ display:none !important; }
.lattice{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.lattice-svg{ width:100%; height:100%; display:block; }
.lattice .lat-v{ stroke: var(--accent-3); stroke-width:1; shape-rendering:crispEdges; }
.lattice .lat-h{ stroke: var(--accent-2); stroke-width:1; shape-rendering:crispEdges; }
.lattice .lat-dot{ fill: var(--accent); opacity:0; transition: opacity 200ms var(--ease); }
.lattice .lat-dot.on{ opacity:1; }
.lattice-scope > section{ position:relative; z-index:1; }

/* Lattice edge visibility and motion (CSS-driven fade) */
.lattice .lat-v,
.lattice .lat-h{ opacity:0; transition: opacity 260ms var(--ease); stroke-linecap: butt; stroke-linejoin: miter; }
.lattice .lat-v.on,
.lattice .lat-h.on{ opacity:1; }

@media (max-width: 680px){
  .lattice .lat-v, .lattice .lat-h{ stroke-width:0.75; }
}

/* Meteor shower styling */
.lattice .met{ fill:none; stroke-width:1; shape-rendering:crispEdges; opacity:1; }
.lattice .met-h{ stroke: var(--accent-2); }
.lattice .met-v{ stroke: var(--accent-3); }
.lattice .met-dot{ fill: var(--accent); transition: opacity 160ms var(--ease); }
@media (max-width: 680px){ .lattice .met{ stroke-width:0.75; } }

/* Raise text above overlay effects (keep cards/media under) */
.lattice-scope :where(h1,h2,h3,h4,h5,h6,p,li,small,em,strong,a,span,.lead,.muted){
  position: relative;
  z-index: 4;
}
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .cards{ grid-template-columns: 1fr; } }
.card{ position:relative; padding:24px; background: rgba(255,255,255,0.65); backdrop-filter: saturate(160%) blur(6px); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.card h3{ margin-bottom:8px; font-size:20px; }
.card p{ margin:0; color:var(--muted); }
.card a{ position:absolute; inset:0; border-radius:inherit; outline: none; }
.card::before{ content:""; position:absolute; inset:-20%; background: linear-gradient(120deg, transparent, rgba(30,185,230,0.20), rgba(255,200,45,0.18), transparent); filter: blur(14px); transform: translateX(-60%) rotate(8deg); transition: transform .6s var(--ease), opacity .6s var(--ease); opacity:0; }
.card:hover::before, .card:focus-within::before{ transform: translateX(40%) rotate(8deg); opacity:1; }
.card:focus-within{ box-shadow: 0 0 0 3px rgba(30,185,230,0.35); }

/* Service icons */
.services .card{ padding-bottom: 12px; display:flex; flex-direction: column; }
/* Services: hover like Works (lift), no gradient sweep */
.services .card{ transition: transform .2s var(--ease); }
.services .card:hover{ transform: translateY(-2px); }
.services .card::before{ display:none !important; }
.services .card h3{ order:1; }
.services .card .svc-ico{ order:2; }
.services .card p{ order:3; }
.services .card a{ order:4; }
.svc-ico{ position:static; left:auto; transform: none; bottom:auto; display:block; opacity:1; pointer-events:none; margin: 8px 0 12px; }
.svc-ico svg,
.svc-ico img{ width: clamp(200px, 28vw, 300px); height:auto; display:block; }
/* Slightly scale down the first (Web) icon so all three match visually */
.services .card:first-child .svc-ico svg{ transform: scale(0.92); transform-origin: center; }
.svc-ico .stroke{ fill:none; stroke-width:0.8; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 1; shape-rendering: crispEdges; }
/* Animate first service icon lines: draw 鬯ｯ・ｩ陋ｹ繝ｻ・ｽ・ｽ繝ｻ・ｶ鬯ｩ諤憺●繝ｻ・ｽ繝ｻ・ｫ鬩幢ｽ｢隴趣ｽ｢繝ｻ・ｽ繝ｻ・ｻhold 鬯ｯ・ｩ陋ｹ繝ｻ・ｽ・ｽ繝ｻ・ｶ鬯ｩ諤憺●繝ｻ・ｽ繝ｻ・ｫ鬩幢ｽ｢隴趣ｽ｢繝ｻ・ｽ繝ｻ・ｻerase 鬯ｯ・ｩ陋ｹ繝ｻ・ｽ・ｽ繝ｻ・ｶ鬯ｩ諤憺●繝ｻ・ｽ繝ｻ・ｫ鬩幢ｽ｢隴趣ｽ｢繝ｻ・ｽ繝ｻ・ｻhold */
.services .card:first-child .svc-ico rect.stroke,
.services .card:first-child .svc-ico line.stroke,
.services .card:first-child .svc-ico circle.stroke,
.services .card:first-child .svc-ico polyline.stroke{
  /* normalized (pathLength=1) so 0..1 maps full path */
  --dash: 1;
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--dash);
  animation: svcDraw 10s var(--ease) infinite;
  stroke-linecap: butt;
}
@keyframes svcDraw{
  0%   { stroke-dashoffset: var(--dash); }
  30%  { stroke-dashoffset: 0; }
  50%  { stroke-dashoffset: 0; }
  80%  { stroke-dashoffset: var(--dash); }
  100% { stroke-dashoffset: var(--dash); }
}
/* Orange seed pop-in at center */
.svc-seed{ fill: var(--accent); transform-origin:center; transform-box: fill-box; animation: svcSeed .6s var(--ease) both, svcWander 8s var(--ease) infinite alternate; }
@keyframes svcSeed{ from{ transform: scale(0.5); opacity:0;} to{ transform: scale(0.6); opacity:1;} }
@keyframes svcWander{
  0%   { transform: translate(0px, 0px) scale(0.60); }
  15%  { transform: translate(6px, -4px) scale(0.56); }
  35%  { transform: translate(-6px, 8px) scale(0.58); }
  55%  { transform: translate(9px, 3px) scale(0.55); }
  75%  { transform: translate(-8px, -7px) scale(0.57); }
  100% { transform: translate(0px, 0px) scale(0.60); }
}
/* Web (1st card): house icon colors */
.services .card:first-child .svc-ico .stroke{ stroke: var(--accent-2); }
.services .card:first-child .svc-ico .stroke.alt{ stroke: var(--accent-3); }

/* Brand (2nd card): star icon animation and colors */
.services .cards > article.card:nth-child(2) .svc-ico path.stroke,
.services .cards > article.card:nth-child(2) .svc-ico line.stroke,
.services .cards > article.card:nth-child(2) .svc-ico circle.stroke{
  /* closed paths need a large gap to reveal progressively */
  --dash: 1; --gap: 1000;
  stroke-dasharray: var(--dash) var(--gap);
  stroke-dashoffset: var(--dash);
  animation: svcDraw 10s var(--ease) infinite;
  stroke-linecap: butt;
}
.services .cards > article.card:nth-child(2) .svc-ico .stroke{ stroke: var(--accent-2); }
.services .cards > article.card:nth-child(2) .svc-ico .stroke.alt{ stroke: var(--accent-3); }

/* EC (3rd card): cart icon animation and colors */
.services .cards > article.card:nth-child(3) .svc-ico svg,
.services .cards > article.card:nth-child(3) .svc-ico img{ width: clamp(200px, 28vw, 300px); }
.services .cards > article.card:nth-child(3) .svc-ico path.stroke,
.services .cards > article.card:nth-child(3) .svc-ico line.stroke,
.services .cards > article.card:nth-child(3) .svc-ico circle.stroke,
.services .cards > article.card:nth-child(3) .svc-ico polyline.stroke,
.services .cards > article.card:nth-child(3) .svc-ico rect.stroke{
  --dash: 1;
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--dash);
  animation: svcDraw 10s var(--ease) infinite;
  stroke-linecap: butt;
}
.services .cards > article.card:nth-child(3) .svc-ico .stroke{ stroke: var(--accent-2); }
.services .cards > article.card:nth-child(3) .svc-ico .stroke.alt{ stroke: var(--accent-3); }

/* Brand (2nd card) animation and colors */
.services .cards > article.card:nth-child(2) .svc-ico path.stroke,
.services .cards > article.card:nth-child(2) .svc-ico line.stroke,
.services .cards > article.card:nth-child(2) .svc-ico circle.stroke{
  --dash: 200;
  stroke-dasharray: var(--dash);
  stroke-dashoffset: var(--dash);
  animation: svcDraw 10s var(--ease) infinite;
  stroke-linecap: butt;
}
.services .cards > article.card:nth-child(2) .svc-ico path.stroke{ stroke: var(--accent-2); }
.services .cards > article.card:nth-child(2) .svc-ico line.stroke,
.services .cards > article.card:nth-child(2) .svc-ico circle.stroke{ stroke: var(--accent-3); }

/* Services: mobile tweaks 窶・center icons and unify size */
@media (max-width: 700px){
  .services .card .svc-ico{
    align-self: center;
    margin: 14px 0;
    width: clamp(240px, 72vw, 340px);
    height: clamp(160px, 44vw, 240px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .services .svc-ico svg,
  .services .svc-ico img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* neutralize first-card svg scaling on mobile */
  .services .card:first-child .svc-ico svg{ transform: none; }
}

/* Works */
.works-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .works-grid{ grid-template-columns: 1fr; } }
.work-card{ background: rgba(255,255,255,0.65); backdrop-filter: saturate(160%) blur(6px); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:16px; transition: transform .2s var(--ease); }
.work-card > a{ display:block; color:inherit; text-decoration:none; }
.work-card:hover{ transform: translateY(-2px); }
.work-thumb{ height:180px; border-radius: 12px; background: linear-gradient(120deg, rgba(30,185,230,0.25), rgba(255,200,45,0.25)); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); margin-bottom:12px; }
/* Works thumbnails: replace gradient with specific images */
.works .works-grid > article:nth-child(1) .work-thumb{ background: center/cover no-repeat url('../images/1.webp'); }
.works .works-grid > article:nth-child(2) .work-thumb{ background: center/cover no-repeat url('../images/2.webp'); }
.works .works-grid > article:nth-child(3) .work-thumb{ background: center/cover no-repeat url('../images/3.webp'); }

/* Blog */
.news-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(3,1fr); gap:16px; align-items: stretch; }
@media (max-width: 900px){ .news-list{ grid-template-columns: 1fr; } }
.news-card{ height:100%; }
.news-card a{ display:grid; grid-template-columns: 110px 1fr; gap:12px; padding:12px; border:1px solid var(--line); border-radius: 14px; text-decoration:none; color:inherit; background: rgba(255,255,255,0.65); backdrop-filter: saturate(160%) blur(6px); box-shadow: var(--shadow); height:100%; }
.news-thumb{ width:110px; height:80px; object-fit:cover; border-radius: 10px; background:#eee; }
.news-meta{ font-size:12px; color:var(--muted); }
.news-title{ font-size:16px; margin:4px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-excerpt{ font-size:14px; color:var(--muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Footer (base) */
footer{ padding:24px 0 48px; border-top:1px solid var(--line); color:var(--fg); font-size:14px; background: var(--surface); }

/* A11y: prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .globe{ transform: none !important; }
  .bg::after{ display:none; }
}

/* Services: make icons static (no draw/erase, no seed motion) */
.services .svc-ico .stroke,
.services .svc-ico .stroke.alt{
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.services .svc-ico .svc-seed{ display: none !important; }



/* Footer (modern, light to match overall theme) */
footer.site-footer{
  position: relative; z-index: 1000;
  border-top:1px solid var(--line);
  padding: 24px 0 48px;
  color: var(--fg);
  font-size:14px;
  background: var(--surface);
  box-shadow: 0 -2px 12px rgba(17,20,24,0.04);
}
.site-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-nav{ display:flex; gap:10px; flex-wrap: wrap; justify-content: center; }
.footer-nav a{ color:var(--fg); opacity:0.9; text-decoration:none; padding:8px 10px; border-radius:10px; white-space: nowrap; font-size:12px; border:1px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.footer-nav a:hover{ background: rgba(30,185,230,0.08); color: var(--fg); border-color: rgba(30,185,230,0.25); }
.footer-nav a:focus-visible{ outline: 3px solid rgba(30,185,230,0.35); outline-offset: 2px; }
.site-footer p{ margin: 6px 0 0; color: var(--muted); font-size:12px; }
@media (max-width: 700px){
  .site-footer .wrap{ flex-direction: column; align-items: center; gap: 10px; }
}
/* Desktop: slightly larger footer text for readability */
@media (min-width: 900px){
  .footer-nav a{ font-size: 14px; padding: 8px 12px; }
  .site-footer p{ font-size: 13px; }
}


/* Main globe dash reset (ensure lines are visible without hero animation) */
.main-globe .wire{ stroke-dasharray: none; stroke-dashoffset: 0; }

/* Contact: decorative SVG under button */
.contact .contact-art{ margin-top: 0; margin-bottom: clamp(24px, 6vw, 72px); display:flex; justify-content:center; }
.contact .contact-art img,
.contact .contact-art svg{ max-width:90px; width:100%; height:auto; opacity:0.95; display:block; }
@media (max-width: 700px){
  .contact .contact-art img,
  .contact .contact-art svg{ max-width:72px; }
}
/* Contact image heartbeat (gentle pulse) */
.contact .contact-ill{ will-change: transform; transform-origin: center; animation: heartbeat 3.2s var(--ease) infinite; }
@keyframes heartbeat{
  0%   { transform: scale(1); }
  10%  { transform: scale(1.06); }
  20%  { transform: scale(0.98); }
  30%  { transform: scale(1.04); }
  40%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .contact .contact-ill{ animation: none; }
}
/* Contact SVG stroke draw/erase loop */
.contact .ink-anim{ display:block; }
.contact .ink-anim .ink-path{
  fill: none !important;
  stroke: var(--accent-2);
  stroke-width: 16;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  --dash: 1000;
  /* Disable animation: show fully drawn stroke */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
@keyframes contactStroke{
  0%   { stroke-dashoffset: var(--dash); opacity: 0; }
  15%  { opacity: 1; }
  45%  { stroke-dashoffset: 0; opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: calc(-1 * var(--dash)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .contact .ink-anim .ink-path{ animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
}

/* Contact form */
.contact-form{ max-width: 720px; margin: 12px auto 0; text-align: left; }
.form-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px){ .form-grid{ grid-template-columns: 1fr 1fr; } }
.form-field{ display: flex; flex-direction: column; gap: 6px; }
.form-field--full{ grid-column: 1 / -1; }
.form-field label{ font-weight:600; color: var(--fg); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea{
  appearance: none;
  padding: 10px 12px; border:1px solid var(--line); border-radius: 12px;
  background:#fff; color: var(--fg); font: inherit; line-height:1.5;
}
.form-field textarea{ min-height: 140px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline: 3px solid rgba(30,185,230,0.35); outline-offset: 2px; border-color: var(--accent-2); }
.form-actions{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap: wrap; margin-top: 6px; }
.alt-contact a{ text-decoration: underline; }
/* Honeypot (visually hidden but in DOM) */
.hp-wrap{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
/* Keep Services icon centered while revealing */
.svc-ico.reveal{ transform: translateX(-50%) translateY(12px); }
.svc-ico.reveal.is-in{ transform: translateX(-50%) translateY(0); }




@media (max-width: 700px){ .footer-nav a{ padding:8px 10px; font-size:12px; } }