/* shadcn/ui default theme — "neutral" base colour */
:root{
  --radius:0.625rem;
  --background:oklch(1 0 0);
  --foreground:oklch(0.145 0 0);
  --card:oklch(1 0 0);
  --card-foreground:oklch(0.145 0 0);
  --popover:oklch(1 0 0);
  --popover-foreground:oklch(0.145 0 0);
  --primary:oklch(0.205 0 0);
  --primary-foreground:oklch(0.985 0 0);
  --secondary:oklch(0.97 0 0);
  --secondary-foreground:oklch(0.205 0 0);
  --muted:oklch(0.97 0 0);
  --muted-foreground:oklch(0.556 0 0);
  --accent:oklch(0.97 0 0);
  --accent-foreground:oklch(0.205 0 0);
  --destructive:oklch(0.577 0.245 27.325);
  --border:oklch(0.922 0 0);
  --input:oklch(0.922 0 0);
  --ring:oklch(0.708 0 0);

  --radius-sm:calc(var(--radius) - 4px);
  --radius-md:calc(var(--radius) - 2px);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius) + 4px);
  --shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
  --illo-accent:oklch(0.62 0 0);
  --illo-soft:color-mix(in oklab, var(--foreground) 9%, var(--card));
  color-scheme:light;
}

/* dark tokens apply when <html data-theme="dark"> (set before first paint by the inline script in <head>) */
:root[data-theme="dark"]{
    --background:oklch(0.145 0 0);
    --foreground:oklch(0.985 0 0);
    --card:oklch(0.205 0 0);
    --card-foreground:oklch(0.985 0 0);
    --popover:oklch(0.205 0 0);
    --popover-foreground:oklch(0.985 0 0);
    --primary:oklch(0.922 0 0);
    --primary-foreground:oklch(0.205 0 0);
    --secondary:oklch(0.269 0 0);
    --secondary-foreground:oklch(0.985 0 0);
    --muted:oklch(0.269 0 0);
    --muted-foreground:oklch(0.708 0 0);
    --accent:oklch(0.269 0 0);
    --accent-foreground:oklch(0.985 0 0);
    --destructive:oklch(0.704 0.191 22.216);
    --border:oklch(1 0 0 / 10%);
    --input:oklch(1 0 0 / 15%);
    --ring:oklch(0.556 0 0);
    --illo-accent:oklch(0.7 0 0);
    --illo-soft:color-mix(in oklab, var(--foreground) 12%, var(--card));
    color-scheme:dark;
}

*{ margin:0; padding:0; box-sizing:border-box; border-color:var(--border); }
html{ background:var(--background); scroll-behavior:auto; }
html.has-smooth{ scrollbar-gutter:stable; }

body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
img,canvas,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }

/* ---------- utility ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(16px,5vw,64px); }
.h2{ font-weight:600; font-size:clamp(28px,4vw,48px); letter-spacing:-.025em; line-height:1.1; margin-top:16px; }
.lead{ color:var(--muted-foreground); font-size:clamp(16px,1.5vw,18px); }
.text-muted{ color:var(--muted-foreground); }

/* Badge (variant: outline) */
.eyebrow{
  display:inline-flex; align-items:center; width:fit-content; gap:6px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:2px 8px; font-size:12px; font-weight:500; line-height:1.4; color:var(--foreground);
}

/* Button (variant: default / outline, size: lg) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  height:40px; padding:0 24px; border-radius:var(--radius-md);
  font-size:14px; font-weight:500;
  background:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-xs);
  border:1px solid transparent;
  transition:background-color .15s, color .15s, box-shadow .15s;
}
.btn:hover{ background:color-mix(in oklab, var(--primary) 90%, transparent); }
.btn.ghost{ background:var(--background); color:var(--foreground); border-color:var(--border); }
.btn.ghost:hover{ background:var(--accent); color:var(--accent-foreground); }
[data-theme="dark"] .btn.ghost{ background:color-mix(in oklab, var(--input) 30%, transparent); border-color:var(--input); }
[data-theme="dark"] .btn.ghost:hover{ background:color-mix(in oklab, var(--input) 50%, transparent); }
.btn.sm{ height:32px; padding:0 12px; gap:6px; }
.btn .arrow{ transition:transform .2s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(2px); }

/* Card */
.card{
  background:var(--card); color:var(--card-foreground);
  border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
}

.reveal{ opacity:0; transform:translateY(28px); }
.split-line{ overflow:hidden; display:block; }
.split-line > span{ display:inline-block; will-change:transform; }

section{ position:relative; }
.section-pad{ padding:clamp(80px,10vw,128px) 0; }
.num{ font-size:14px; font-weight:500; color:var(--muted-foreground); font-variant-numeric:tabular-nums; }

/* ---------- loader ---------- */
#loader{
  position:fixed; inset:0; z-index:999; background:var(--background);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
#loader .lbar{ width:180px; height:4px; border-radius:999px; background:color-mix(in oklab, var(--primary) 20%, transparent); position:relative; overflow:hidden; }
#loader .lbar i{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--primary); }

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; width:100%; z-index:200; height:64px;
  padding:0 clamp(16px,5vw,64px); display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter:blur(12px);
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:-.01em; }
.logo-mark{ display:block; width:auto; height:28px; aspect-ratio:46/36; }
.logo .mark{
  width:32px; height:32px; border-radius:var(--radius-md); display:grid; place-items:center;
  background:var(--primary); color:var(--primary-foreground); font-size:11px; font-weight:700;
}
.header-right{ display:flex; align-items:center; gap:4px; }
nav.links{ display:flex; gap:4px; }
nav.links a{
  font-size:14px; font-weight:500; color:var(--muted-foreground);
  padding:8px 12px; border-radius:var(--radius-md); transition:color .15s, background-color .15s;
}
nav.links a:hover{ color:var(--accent-foreground); background:var(--accent); }
@media (max-width:860px){ nav.links{ display:none; } }

/* Button (variant: ghost, size: icon) */
#theme-btn{
  width:36px; height:36px; display:grid; place-items:center; border-radius:var(--radius-md);
  color:var(--foreground); transition:background-color .15s;
}
#theme-btn:hover{ background:var(--accent); }
#theme-btn svg{ width:16px; height:16px; }
#theme-btn .moon, [data-theme="dark"] #theme-btn .sun{ display:none; }
[data-theme="dark"] #theme-btn .moon{ display:block; }
@media (max-width:860px){ .header-right{ gap:8px; } }

/* Button (variant: outline, size: icon) */
#menu-btn{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:36px; height:36px; z-index:220; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--background); box-shadow:var(--shadow-xs);
}
#menu-btn span{ height:1.5px; background:var(--foreground); width:16px; border-radius:2px; transition:transform .3s var(--ease-in-out), opacity .2s; }
@media (max-width:860px){ #menu-btn{ display:flex; } }

#mnav{
  position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--background); z-index:210; display:flex; flex-direction:column;
  padding:16px; gap:4px; transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .25s var(--ease-out), opacity .25s var(--ease-out), visibility 0s linear .25s;
}
/* visibility (not just the transform) gates it hidden — if an ancestor ever gets its own
   transform/scale (e.g. devtools' responsive-mode zoom-to-fit), the fixed containing block changes */
#mnav.open{ transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible; transition:transform .25s var(--ease-out), opacity .25s var(--ease-out), visibility 0s linear 0s; }
#mnav a{ font-size:18px; font-weight:500; padding:12px; border-radius:var(--radius-md); }
#mnav a:hover{ background:var(--accent); }

/* ---------- hero ---------- */
#hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; padding-top:100px; }
#hero-canvas-wrap{ position:absolute; inset:0; z-index:0; opacity:.85; }
#hero-canvas-wrap canvas{ width:100%; height:100%; }
#hero-canvas-wrap::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%, transparent 0%, var(--background) 78%);
}
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-mark{ width:auto; height:clamp(56px,7vw,88px); aspect-ratio:46/36; margin-bottom:28px; }
.hero-title{
  font-weight:800; text-transform:uppercase;
  font-size:clamp(36px,7.5vw,85px); line-height:.9; letter-spacing:-.04em;
}
.hero-title-row{ display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:0 26px; }
.hero-reflection{
  margin-top:-6px; transform:scaleY(-1); opacity:.15; user-select:none; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 65%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 65%);
}
.hero-sub{
  max-width:540px; margin-top:32px; color:var(--muted-foreground); font-size:clamp(16px,1.6vw,18px); line-height:1.6;
}
.hero-ctas{ display:flex; justify-content:center; gap:12px; margin-top:40px; flex-wrap:wrap; }
.scroll-cue{
  position:absolute; bottom:34px; left:clamp(16px,5vw,64px); display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:500; color:var(--muted-foreground); z-index:2;
}
.scroll-cue i{ display:block; width:2px; height:38px; border-radius:2px; background:var(--border); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--foreground); animation:cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- services (sticky stack) ---------- */
.stack{ position:relative; }
.panel{
  position:sticky; top:0; height:100svh; display:flex; align-items:center;
  background:var(--background); border-top:1px solid var(--border);
}
.panel-inner{ width:100%; display:grid; grid-template-columns:.55fr 1fr; gap:60px; align-items:center; }
@media (max-width:860px){ .panel-inner{ grid-template-columns:1fr; gap:24px; } }
.panel-illo{ color:var(--foreground); }
@media (max-width:860px){ .panel-illo .illo{ max-width:260px; } }

/* service illustrations: theme greys + one accent */
.illo{ width:100%; max-width:440px; height:auto; overflow:visible; }
.illo .ln{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.illo .i-card{ fill:var(--card); stroke:currentColor; stroke-width:2; }
.illo .i-soft{ fill:var(--illo-soft); }
.illo .i-fg{ fill:currentColor; }
.illo .i-ac{ fill:var(--illo-accent); }
.illo .ln-stroke{ stroke:currentColor; stroke-width:2; }
.illo .i-tick{ fill:none; stroke:var(--card); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.illo .i-teeth{ fill:none; stroke:currentColor; stroke-width:10; stroke-dasharray:10 10.94; }
.illo .i-flow{ fill:none; stroke:var(--muted-foreground); stroke-width:2; stroke-linecap:round; stroke-dasharray:4 6; animation:illo-flow 1.2s linear infinite; }
.illo .i-spin{ transform-box:fill-box; transform-origin:center; animation:illo-spin 14s linear infinite; }
@keyframes illo-flow{ to{ stroke-dashoffset:-20; } }
@keyframes illo-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .illo .i-flow, .illo .i-spin{ animation:none; } }
.panel h3{ font-weight:600; font-size:clamp(30px,4.4vw,56px); letter-spacing:-.03em; line-height:1.05; margin:16px 0 20px; }
.panel p{ color:var(--muted-foreground); max-width:520px; font-size:clamp(15px,1.4vw,17px); }
.panel .tags{ display:flex; gap:8px; margin-top:24px; flex-wrap:wrap; }
/* Badge (variant: secondary) */
.tags span{
  font-size:12px; font-weight:500; line-height:1.4; color:var(--secondary-foreground);
  background:var(--secondary); border:1px solid transparent; border-radius:var(--radius-md); padding:2px 8px;
}

/* ---------- parallax process ---------- */
#process{ background:color-mix(in oklab, var(--muted) 50%, var(--background)); border-top:1px solid var(--border); overflow:hidden; }
.peaks{
  position:relative; height:clamp(360px,52vw,620px); margin-top:64px; color:var(--foreground);
  /* fade the base into mist so the parallax-shifted layer bottoms never show as hard bands */
  -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 70%, transparent 100%);
}
/* paths extend 300 units below the viewBox so the layer base stays out of view when parallax lifts it */
.peaks svg{ position:absolute; bottom:0; left:0; width:100%; height:auto; overflow:visible; }
.steps{
  position:relative; z-index:4; margin-top:-120px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:24px; }
.step .num{ display:block; margin-bottom:12px; }
.step h4{ font-weight:600; font-size:16px; line-height:1.3; margin-bottom:6px; }
.step p{ color:var(--muted-foreground); font-size:14px; }

/* ---------- work services ---------- */
#work{ border-top:1px solid var(--border); }
.work-head{ margin-bottom:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.work-head p{ max-width:340px; font-size:14px; }
#work-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--border); border-left:1px solid var(--border);
}
.work-service{
  min-height:250px; padding:clamp(28px,4vw,48px) clamp(18px,3vw,38px);
  display:flex; flex-direction:column; justify-content:flex-start; align-items:center;
  text-align:center; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
}
.work-service h3{ max-width:18ch; font-size:clamp(18px,2vw,24px); font-weight:500; line-height:1.3; margin-bottom:14px; }
.work-service p{ max-width:32ch; color:var(--muted-foreground); font-size:clamp(14px,1.5vw,17px); line-height:1.65; }
@media (max-width:900px){ #work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ #work-grid{ grid-template-columns:1fr; } .work-service{ min-height:0; padding:28px 20px; } }

/* ---------- values band ---------- */
.values-band{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.values{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.value{ padding:32px clamp(16px,3vw,40px); text-align:center; }
.value + .value{ border-left:1px solid var(--border); }
.value h3{ font-weight:600; font-size:16px; margin-bottom:6px; }
.value p{ color:var(--muted-foreground); font-size:14px; }
@media (max-width:760px){
  .values{ grid-template-columns:1fr; }
  .value + .value{ border-left:0; border-top:1px solid var(--border); }
  .value{ padding:24px 16px; }
}

/* ---------- about ---------- */
#about{ border-top:1px solid var(--border); }
#about .wrap{ display:grid; grid-template-columns:1fr .8fr; gap:64px; align-items:center; }
@media (max-width:900px){ #about .wrap{ grid-template-columns:1fr; } }
#about h2{ font-weight:600; font-size:clamp(30px,4vw,48px); letter-spacing:-.025em; line-height:1.1; margin:16px 0 20px; }
#about p{ color:var(--muted-foreground); font-size:16px; max-width:520px; margin-bottom:16px; }
#stone-wrap{ height:clamp(260px,32vw,420px); position:relative; }
#stone-wrap canvas{ width:100%; height:100%; }

/* ---------- contact ---------- */
#contact{ background:color-mix(in oklab, var(--muted) 50%, var(--background)); border-top:1px solid var(--border); }
#contact .head{ text-align:center; max-width:760px; margin:0 auto 56px; }
#contact h2{ font-weight:700; letter-spacing:-.04em; font-size:clamp(34px,6vw,72px); line-height:1; }
#contact h2 .sub{ display:block; color:var(--muted-foreground); }
#contact .head p{ color:var(--muted-foreground); margin-top:20px; font-size:17px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:980px; margin:0 auto; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.email-box, #contact-form{ padding:24px; }
.email-box{ display:flex; flex-direction:column; gap:16px; }
.email-box .big-email{ font-weight:600; font-size:clamp(20px,2.6vw,28px); letter-spacing:-.02em; word-break:break-word; }
.email-box .row{ display:flex; gap:8px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
/* Label */
.field label{ font-size:14px; font-weight:500; line-height:1; }
/* Input / Textarea */
.field input, .field textarea{
  width:100%; background:transparent; color:var(--foreground);
  border:1px solid var(--input); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);
  font-family:inherit; font-size:14px; padding:8px 12px; resize:vertical;
  transition:border-color .15s, box-shadow .15s;
}
.field input{ height:36px; padding-top:4px; padding-bottom:4px; }
.field textarea{ min-height:64px; }
[data-theme="dark"] .field input, [data-theme="dark"] .field textarea{ background:color-mix(in oklab, var(--input) 30%, transparent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-foreground); }
.field input:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
#contact-form .btn{ width:100%; margin-top:4px; }

/* Toast (sonner) */
#toast{
  position:fixed; bottom:24px; right:24px; transform:translateY(16px); opacity:0; pointer-events:none;
  background:var(--popover); color:var(--popover-foreground); border:1px solid var(--border);
  font-size:14px; font-weight:500; padding:16px; width:356px; max-width:calc(100vw - 32px);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); z-index:400;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
#toast.show{ opacity:1; transform:translateY(0); }
@media (max-width:600px){ #toast{ right:16px; bottom:16px; } }

/* ---------- footer ---------- */
footer{ padding:40px clamp(16px,5vw,64px); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
footer .fmark .logo-mark{ height:24px; }
footer .fsub{ color:var(--muted-foreground); font-size:14px; }
footer .fmeta{ color:var(--muted-foreground); font-size:14px; text-align:right; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}