/* Swiss mono: after instalanding.ai's craft-studio-webgl-landing-page (MIT). Paper, card
   and ink with hairline rules, Inter Tight at weight 900 in tight caps for display, numbered
   section labels from CSS counters, and one accent only: the prism gradient, used sparingly
   (the hero ring, hover bars, the footer wordmark). Suits architects, interior designers, studios. */

:root[data-theme="swiss"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 40px; --reveal-ease: cubic-bezier(0.7, 0, 0.2, 1); --nav-lift: 0 1px 0 var(--ink); --hero-in: slide; --reveal-in: curtain;
  --bg: #e9e9e7;
  --bg-soft: #f3f3f1;
  --surface: #f3f3f1;
  --ink: #111111;
  --ink-2: #2b2b2a;
  --muted: #595957;
  --line: rgb(17 17 17 / 0.14);
  --accent: #111111; /* focus rings, stars and ticks stay ink; colour is the prism's alone */
  --prism: linear-gradient(90deg, #ff3b3b, #ffb000, #2fd27a, #1e90ff, #a24bff);
  --prism-ring: conic-gradient(#ff3b3b, #ffb000, #2fd27a, #1e90ff, #a24bff, #ff3b3b);
  --primary: #111111;
  --primary-ink: #e9e9e7;
  --glass: rgb(233 233 231 / 0.88);
  --glass-border: rgb(17 17 17 / 0.14);
  --ease: cubic-bezier(0.7, 0, 0.2, 1);

  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "Inter Tight", system-ui, sans-serif;
  --display-weight: 900;
  --display-tracking: -0.045em;
  --display-leading: 0.9;

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow: none;
  --card-border: 1px solid var(--line);

  --slab-bg: #111111;
  --slab-ink: #e9e9e7;
  --footer-bg: #111111;
  --footer-ink: #e9e9e7;

  --ph-1: radial-gradient(circle at 50% 50%, transparent 0 38%, rgb(17 17 17 / 0.16) 38.4% 39%, transparent 39.4%), repeating-linear-gradient(135deg, #deded9 0 2px, #eaeae6 2px 14px);
  --ph-2: radial-gradient(circle at 1px 1px, rgb(17 17 17 / 0.28) 1.2px, transparent 1.6px) 0 0 / 16px 16px, #eeeeeb;
  --ph-3: radial-gradient(60% 60% at 62% 40%, #fafaf8, #cfcfcb 70%, #b9b9b4);
  --ph-4: repeating-linear-gradient(90deg, rgb(17 17 17 / 0.7) 0 1px, transparent 1px 22px), #d9d9d5;
  --ph-5: conic-gradient(from 210deg at 30% 70%, #f3f3f1, #d8d8d3, #f3f3f1, #c9c9c4, #f3f3f1);
  --ph-6: linear-gradient(135deg, #1b1b1b 0 50%, #e6e6e2 50% 100%);

  --section-pad: clamp(64px, 9vw, 128px);
  counter-reset: sw;

  & body { background: var(--bg); letter-spacing: -0.01em; }
  & h1, & h2, & h3, & h4 { text-transform: uppercase; }
  & h1 { font-size: clamp(34px, 5.4vw, 76px); }
  & h2 { font-size: clamp(36px, 6.4vw, 96px); line-height: 0.88; letter-spacing: -0.05em; }
  & .section-head h2 { max-width: 14ch; }
  & h3, & h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  & .lead { font-weight: 500; letter-spacing: -0.015em; }
  & ::selection { background: #111; color: #e9e9e7; }

  /* numbered section labels: (01) before each section's eyebrow, from a counter */
  & main > .section { counter-increment: sw; border-top: 1px solid var(--ink); }
  & .eyebrow {
    display: flex; gap: 14px; align-items: baseline;
    font: 600 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
    margin-bottom: 22px;
  }
  & main > .section .eyebrow::before { content: "(" counter(sw, decimal-leading-zero) ")"; color: var(--muted); font-variant-numeric: tabular-nums; }
  & .hero .eyebrow::before { content: "(00)"; color: var(--muted); }
  & main > .section .pricing-slab .eyebrow::before { color: inherit; opacity: 0.7; }

  /* buttons: square ink blocks; hover draws the prism as a bar under the label */
  & .btn { position: relative; overflow: hidden; border-radius: 0; height: 52px; padding: 0 26px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; font-size: 14px; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
  & .btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--prism); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
  & .btn:hover { transform: none; }
  & .btn:hover::after, & .btn:focus-visible::after { transform: scaleX(1); }
  & .btn-primary { border-color: var(--ink); }
  & .btn-ghost { border-color: var(--ink); background: transparent; color: var(--ink); }
  & .btn-ghost:hover { background: var(--ink); color: var(--bg); }
  & .btn-sm { height: 40px; padding: 0 16px; font-size: 12px; }
  & .pill { border-radius: 0; background: transparent; border-color: var(--ink); color: var(--ink); font: 600 11px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; }
  & :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 0; }

  /* nav: paper bar with a hairline, ink wordmark, prism underline on hover */
  & .nav { background: rgb(233 233 231 / 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  & .brand-mark { border-radius: 0; font-weight: 900; }
  & .brand-name { font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; }
  & .nav-links a, & .nav-phone { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }
  & .nav-links a { position: relative; }
  & .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--prism); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
  & .nav-links a:hover::after { transform: scaleX(1); }
  & .nav-menu summary { border-radius: 0; border-color: var(--ink); }
  & .nav-menu ul { border-radius: 0; border-color: var(--ink); background: var(--bg-soft); }
  & .nav-menu a { border-radius: 0; }
  & .nav-menu a:hover { background: var(--ink); color: var(--bg); }

  /* ---------- signature hero ---------- */
  & .sw-hero { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 104px); overflow: hidden; }
  & .sw-hero .wrap { container-type: inline-size; }
  & .sw-name {
    margin: 0 0 clamp(24px, 4vw, 56px); padding-top: 0.04em;
    font: 900 min(220px, max(calc(100cqw / (var(--n) * 0.68)), 12cqw))/0.84 var(--font-display);
    letter-spacing: -0.045em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
    user-select: none;
  }
  & .sw-grid { display: grid; gap: 40px; align-items: center; border-top: 1px solid var(--ink); padding-top: 28px; }
  & .sw-copy h1 { max-width: 14ch; }
  & .sw-copy .lead { margin-top: 22px; }
  & .sw-knot { position: relative; width: min(100%, 360px); aspect-ratio: 1; justify-self: center; }
  & .sw-knot i { position: absolute; border-radius: 50%; }
  & .sw-glow { inset: 8%; background: var(--prism-ring); filter: blur(34px); opacity: 0.4; }
  & .sw-ring {
    inset: 0; background: var(--prism-ring);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 38px), #000 calc(100% - 37px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 38px), #000 calc(100% - 37px));
  }
  & .sw-ring-2 { inset: 22%; transform: rotate(120deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); }
  & .sw-core { inset: 38%; background: radial-gradient(circle at 35% 30%, #ffffff, #cfcfcb 60%, #8d8d89); box-shadow: inset -6px -8px 16px rgb(17 17 17 / 0.25); }
  @media (min-width: 900px) {
    & .sw-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; }
  }

  /* ---------- sections ---------- */
  & .highlights { border-block: 1px solid var(--ink); padding-block: 14px; background: var(--ink); color: var(--bg); }
  & .marquee-track { font: 800 clamp(18px, 2.4vw, 28px)/1.1 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; color: var(--bg); gap: 28px; padding-right: 28px; }
  & .marquee-track li { gap: 28px; }
  & .marquee-track li::after { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--prism-ring); flex: none; }

  & .group-title { border-top: 1px solid var(--ink); padding-top: 14px; font-size: 14px; letter-spacing: 0.04em; font-weight: 700; }
  & .services-grid { gap: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  & .service {
    position: relative; padding: 24px; min-height: 280px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: linear-gradient(var(--ink), var(--ink)) no-repeat bottom / 100% 0%, var(--surface);
    transition: background-size 0.6s var(--ease), color 0.4s var(--ease);
  }
  & .service-name { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; line-height: 0.95; letter-spacing: -0.045em; }
  & .index { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  & .price { font-weight: 800; letter-spacing: -0.03em; }
  @media (hover: hover) {
    & .service:hover { background-size: 100% 100%; color: var(--bg); }
    & .service:hover .service-desc, & .service:hover .index { color: rgb(233 233 231 / 0.8); }
    & .service:hover .pill, & .service:hover .btn-ghost { border-color: var(--bg); color: var(--bg); }
    & .service:hover .btn-ghost:hover { background: var(--bg); color: var(--ink); }
    & .service:hover .service-foot { border-top-color: rgb(233 233 231 / 0.25); }
    & .service:hover :focus-visible { outline-color: var(--bg); }
  }

  & .about-media, & .gallery-item, & .hero-media { border-radius: 0; border: 1px solid var(--ink); }
  & .ph-label { border-radius: 0; background: var(--bg); color: var(--ink); font: 600 11px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; }
  & .about-copy p { font-weight: 500; }
  & .stats { gap: 0 20px; }
  & .stat { border-top: 1px solid var(--ink); padding-top: 12px; }
  & .stat dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  & .stat dd { font-size: clamp(32px, 3.8vw, 52px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
  & .gallery-grid { gap: 10px; }

  & .stars { color: var(--ink); }
  & .review blockquote { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
  & .review-author { text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }

  & .pricing-slab { border-radius: 0; background: var(--ink); }
  & .pricing-slab .eyebrow { color: inherit; }
  & .plan { border-radius: 0; border-color: rgb(233 233 231 / 0.25); }
  & .plan.featured { background: var(--bg-soft); color: var(--ink); }
  & .plan-name { text-transform: uppercase; }
  & .plan-price .mono { font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -0.05em; }
  & .plan-features li::before { content: "—"; color: inherit; opacity: 0.6; }
  & .plan:not(.featured) .btn-primary { background: var(--bg); color: var(--ink); border-color: var(--bg); }
  & .plan:not(.featured) .btn-ghost { border-color: var(--bg); color: var(--bg); }
  & .plan:not(.featured) .btn-ghost:hover { background: var(--bg); color: var(--ink); }
  & .pricing-slab :focus-visible { outline-color: var(--bg); }
  & .plan.featured :focus-visible { outline-color: var(--ink); }

  & .faq-item summary { font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; font-size: clamp(17px, 1.8vw, 22px); }
  & .faq-item, & .faq-item:first-child { border-color: var(--ink); }
  & .faq-item:not(:first-child) { border-top: 0; }
  & .faq-item p { font-weight: 500; }

  & .chips .pill { padding: 10px 18px; font-size: 12px; }
  & .chips .pill:hover { background: var(--ink); color: var(--bg); }

  & .hours caption { font: 700 12px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; }
  & .hours th, & .hours td { font-weight: 600; }
  & .map { border: 1px solid var(--ink); border-radius: 0; }
  & .map iframe { filter: grayscale(1) contrast(1.05); }

  & .contact-direct a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
  & .field label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
  & .field input, & .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding-inline: 0; border-radius: 0; }
  & .field input:focus, & .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 4px; border-bottom-width: 1px; }

  /* footer: an ink block with a viewport-wide prism wordmark */
  & .footer { padding: 0; background: var(--footer-bg); color: var(--footer-ink); }
  & .footer-card { border-radius: 0; padding-inline: 0; padding-bottom: 0; background: none; }
  & .footer :focus-visible { outline-color: var(--bg); }
  & .footer-name { font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; font-size: 28px; }
  & .footer-title { opacity: 0.65; font-weight: 600; }
  & .footer .btn-primary { background: var(--bg); color: var(--ink); border-color: var(--bg); margin-top: 8px; }
  & .footer-base { border-top-color: rgb(233 233 231 / 0.25); opacity: 0.85; }
  & .wordmark {
    display: block; margin: 28px 0 0; padding-bottom: 0.04em;
    font: 900 clamp(56px, 15.5vw, 230px)/0.8 var(--font-display); letter-spacing: -0.06em; text-transform: uppercase;
    overflow-wrap: anywhere; user-select: none;
    background: var(--prism); -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  & .callbar { background: var(--bg); border-top: 1px solid var(--ink); }

  /* ---------- layouts: rail, index, mosaic ---------- */
  /* the numbered label is the rail's first line; the heading sits beneath at poster weight */
  & .page-rail .eyebrow { margin-bottom: 0; }
  & .page-rail .section-head .eyebrow, & .page-rail .about-copy > .eyebrow, & .page-rail .visit-card > .eyebrow { margin-bottom: 14px; }
  & .page-rail .visit-card { box-shadow: none; background: none; padding: 0; }

  /* services "index": huge numbered rows, ink rules, the prism drawn as a bar on hover */
  & .ix { position: relative; border-top: 1px solid var(--ink); transition: color 0.4s var(--ease); }
  & .ix-list > li:last-child .ix { border-bottom: 1px solid var(--ink); }
  & .ix::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; background: var(--prism, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
  & .ix-n { font-weight: 600; letter-spacing: 0.05em; }
  & .ix-name { font-size: clamp(28px, 7vw, 44px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.95; }
  @media (min-width: 900px) { & .ix-name { font-size: clamp(30px, 4vw, 56px); } }
  & .ix-details { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
  & .ix-meta { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
  & .ix:hover::after, & .ix:focus-visible::after { transform: scaleX(1); }
  & .ix:focus-visible { outline-offset: -3px; }

  /* gallery "mosaic": square-cornered, tight */
  & .mosaic { gap: 10px; }
  & .mosaic .gallery-item { border-radius: 0; }

  /* ---------- motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) .sw-name { animation: sw-rise 1s var(--ease) both; }
    &[data-motion="showpiece"] {
      & .sw-ring { animation: sw-spin 22s linear infinite; }
      & .sw-ring-2 { animation: sw-spin-rev 30s linear infinite; }
      & .sw-glow { animation: sw-pulse 8s ease-in-out infinite; }
    }
  }
}

@keyframes sw-rise { from { translate: 0 24px; } }
@keyframes sw-spin { to { transform: rotate(360deg); } }
@keyframes sw-spin-rev { from { transform: rotate(120deg); } to { transform: rotate(-240deg); } }
@keyframes sw-pulse { 50% { opacity: 0.6; scale: 1.08; } }