/* Kot & Dimi. Layout: "Bold type". Oversized Manrope headlines with one phrase in Electric indigo, big product rows,
   eyebrow-led blocks, and an indigo quote band with a fill-in-the-blank enquiry. Max-1180 wrap.
   Palette chosen by owner: Cloud Dancer base, Stone, ink, one accent. */
:root {
  --ink: #111111;
  --muted: #5a5a5a;
  --paper: #f0eee9;      /* Pantone Cloud Dancer */
  --field: #fbfaf8;      /* form field fill */
  --soft: #e6e3dc;       /* Stone */
  --line: #ddd9d1;
  --accent: #274a78;     /* Seiran 青藍, Japanese blue indigo (colordic.org) */
  --accent-deep: #345d93; /* hover: a step lighter */
  --accent-ink: #ffffff;
  --error: #b3261e;
  --f-sans: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --t-sm: .875rem; --t-base: 1rem; --t-md: 1.125rem;
  --t-hero: clamp(2.9rem, 8.4vw, 7.4rem);
  --t-h1: clamp(2.6rem, 6.6vw, 5.6rem);
  --t-row: clamp(1.5rem, 3.6vw, 2.6rem);
  --ease: cubic-bezier(.22, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/1.6 var(--f-sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band :focus-visible { outline-color: #fff; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.hl { color: var(--accent); }
.select { user-select: all; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(17,17,17,.35); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; position: relative; }
.brand { display: block; line-height: 0; padding-block: .15rem; }
.brand img { width: 172px; }
@media (max-width: 480px) { .brand img { width: 148px; } }
.nav { display: flex; align-items: center; gap: 1.75rem; font-size: .92rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--muted); transition: color .25s var(--ease); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
.menu-btn { display: none; font: 600 .9rem var(--f-sans); background: none; border: 1px solid var(--line); color: var(--ink); padding: .45rem .9rem; border-radius: 8px; cursor: pointer; }
@media (max-width: 820px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: .25rem max(20px, env(safe-area-inset-right, 0px)) 1.25rem max(20px, env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding-block: .85rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { margin-top: 1rem; text-align: center; }
}

/* buttons and links */
.btn { display: inline-block; font: 600 1rem/1 var(--f-sans); text-decoration: none; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 10px; padding: 1rem 1.5rem; cursor: pointer; transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { transform: translateY(-2px); background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .65rem 1rem; font-size: .9rem; }
.btn--light { background: #fff; color: var(--accent); border-color: #fff; }
.btn--light:hover { background: var(--paper); border-color: var(--paper); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.link { font-weight: 600; text-underline-offset: .3em; text-decoration-thickness: 1.5px; transition: color .25s var(--ease), text-underline-offset .25s var(--ease); }
.link:hover { text-underline-offset: .4em; }
.link:hover { color: var(--accent); }
.band .link:hover { color: #fff; opacity: .85; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* hero */
.hero > .wrap { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4rem); }
.hero h1 { margin-top: 1.25rem; font-size: var(--t-h1); font-weight: 800; line-height: .98; letter-spacing: -.045em; max-width: 12em; }
.hero--big h1 { font-size: clamp(2.7rem, 7vw, 6.2rem); max-width: 13em; }
.hero__sub { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-top: 2.5rem; }
.lead { max-width: 30em; font-size: 1.1rem; color: var(--muted); }

/* blocks */
.block > .wrap { padding-block: clamp(3rem, 7vw, 5.5rem); display: grid; gap: 2rem; }
.block--flush > .wrap { padding-top: 0; }
.block--line { border-top: 1px solid var(--line); }
.statement { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; max-width: 24em; }
.prose { display: grid; gap: 1.25rem; max-width: 44rem; font-size: var(--t-md); }
.note { font-size: var(--t-sm); color: var(--muted); }

.bigrows { border-top: 1px solid var(--line); }
.bigrow { display: flex; align-items: center; justify-content: space-between; gap: .5rem 2rem; text-decoration: none; padding-block: 1.5rem; border-bottom: 1px solid var(--line); background: linear-gradient(var(--soft), var(--soft)) no-repeat left / 0 100%; transition: background-size .5s var(--ease); }
a.bigrow:hover { background-size: 100% 100%; }
.bigrow__n { font-size: var(--t-row); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; transition: color .35s var(--ease), transform .35s var(--ease); }
.bigrow__d { color: var(--muted); font-size: .95rem; text-align: right; max-width: 24em; }
a.bigrow:hover .bigrow__n { color: var(--accent); transform: translateX(12px); }
@media (max-width: 640px) { .bigrow { flex-direction: column; align-items: start; } .bigrow__d { text-align: left; } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.steps li { display: grid; gap: .4rem; align-content: start; }
.steps .k { font-size: .8rem; font-weight: 700; color: var(--accent); margin-bottom: .2rem; }
.steps h3 { font-size: 1.15rem; font-weight: 700; }
.steps p { color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

.terms { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.terms div { display: grid; gap: .3rem; align-content: start; }
.terms dt { font-size: var(--t-sm); color: var(--muted); }
.terms dd { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
@media (max-width: 720px) { .terms { grid-template-columns: 1fr; } }

.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; transition: color .25s var(--ease); list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.4rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { content: "+"; color: var(--accent); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 1.5rem; color: var(--muted); max-width: 40em; font-size: var(--t-md); }

/* indigo bands. Home: stacked heading + roomy fill-in-the-blank form. Other pages: one-line call to action. */
.band { background: var(--accent); color: #fff; }
.band__in { display: grid; gap: 2.5rem 4rem; padding-block: clamp(4rem, 9vw, 6.5rem); }
.band h2 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.band__head p { margin-top: 1rem; color: rgba(255,255,255,.82); max-width: 28em; font-size: var(--t-md); }
.band--cta .band__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 700px) { .band--cta .band__in { grid-template-columns: 1fr; } }
.band--stack .band__in { gap: clamp(2.5rem, 5vw, 3.5rem); }
.sentence { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.sentence__text { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); font-size: clamp(1.45rem, 3.2vw, 2.3rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
.sentence .ln { display: block; }
.sentence input { font: inherit; letter-spacing: inherit; color: #fff; background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,.45); border-radius: 0; padding: .05em .2em .1em; margin: 0 .15em; width: 8em; max-width: 100%; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.sentence input.w-s { width: 4.2em; text-align: center; }
.sentence input.w-l { width: 11em; }
.sentence input::placeholder { color: rgba(255,255,255,.45); }
.sentence input:hover { border-bottom-color: rgba(255,255,255,.75); }
.sentence input:focus { outline: none; border-bottom-color: #fff; background-color: rgba(255,255,255,.06); }
.sentence input[aria-invalid="true"] { border-bottom-color: #ffb4ab; }
.sentence__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.band .form__msg { color: #fff; }
.band .form__msg.err { color: #ffd9d4; }

/* full form */
.contact { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: start; }
.contact__side { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.5rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.form label { display: grid; gap: .4rem; font-size: var(--t-sm); font-weight: 600; min-width: 0; }
.form .span2 { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: 400 1rem var(--f-sans); color: var(--ink); background: var(--field); border: 1px solid #c4bfb5; border-radius: 10px; padding: .85rem .95rem; width: 100%; min-width: 0; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form textarea { resize: vertical; }
.form [aria-invalid="true"] { border-color: var(--error); }
.form .btn { justify-self: start; }
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } .form .btn { justify-self: stretch; text-align: center; } }
.form__msg { font-size: var(--t-sm); min-height: 1.5em; font-weight: 600; }
.form__msg.err { color: var(--error); }

/* footer */
.foot { background: var(--soft); font-size: var(--t-sm); color: var(--muted); }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; padding-block: 3rem 2rem; }
.foot__brand { display: grid; gap: 1rem; align-content: start; }
.foot__brand img { width: min(100%, 260px); margin-top: 1.25rem; }
.foot__links, .foot__contact { display: grid; gap: .45rem; align-content: start; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot__contact .select { color: var(--ink); }
.foot__legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.25rem; }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr; } }

/* scroll reveal: only for content below the fold at load; everything is visible without JS */
.pre { opacity: 0; transform: translateY(18px); }
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) { *, .pre { transition: none !important; opacity: 1 !important; transform: none !important; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile only appears when a visitor needs a check; until then it takes no space. */
.cf-turnstile { max-width: 100%; position: absolute; }
.cf-turnstile.is-shown { position: static; }