:root {
    --navy: #1f2d44;
    --navy-2: #283a5a;
    --navy-deep: #16213a;
    --navy-ink: #0f1830;
    --camel: #c08b41;
    --camel-deep: #95672a;
    --camel-light: #d9b06a;
    --camel-soft: #efe3cd;
    --ivory: #f6f3ea;
    --cream: #ece6d6;
    --paper: #fbf9f2;
    --ink: #1a2333;
    --muted: #586074;
    --faint: #8b93a3;
    --line: #e5dfd0;
    --line-strong: #d6cdb8;
    --line-d: rgba(255,255,255,.13);
    --serif: "Newsreader", Georgia, serif;
    --sans: "Spline Sans", system-ui, sans-serif;
    --ease: cubic-bezier(.16,1,.3,1);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--sans); background: var(--ivory); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .serif { font-family: var(--serif); }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; }
  em { font-style: italic; color: var(--camel); }
  p { text-wrap: pretty; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
  .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--camel-deep); display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
  .eyebrow.light { color: var(--camel-light); }
  .eyebrow .ln { width: 34px; height: 1px; background: currentColor; opacity: .55; }

  /* buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 24px; letter-spacing: .01em; cursor: pointer; border: 1px solid transparent; border-radius: 4px; padding: 15px 26px; transition: all .25s var(--ease); white-space: nowrap; }
  .btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
  .btn:hover svg { transform: translateX(3px); }
  /* Phone-icon links shake (ring) on hover instead of sliding — matches the banner phone. */
  a[href^="tel:"]:hover svg { transform: none; animation: ring-ring .5s ease; }
  .btn-camel { background: var(--camel); color: #1c1206; }
  .btn-camel:hover { background: var(--camel-light); }
  .btn-navy { background: var(--navy); color: var(--ivory); }
  .btn-navy:hover { background: var(--navy-2); }
  .btn-line { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
  .btn-line:hover { border-color: var(--navy); background: #fff; }
  .btn-line.on-dark { border-color: rgba(255,255,255,.28); color: var(--ivory); }
  .btn-line.on-dark:hover { border-color: var(--camel-light); color: #fff; background: rgba(255,255,255,.04); }

  /* ---------- Top bar stack ---------- */
  .topbarstack { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: transform .35s var(--ease); }
  .topbarstack.up { transform: translateY(-40px); }
  .topstrip { background: var(--navy-ink); color: #aeb9cd; font-family: var(--sans); font-size: 12.5px; }
  .topstrip .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap; }
  .topstrip .l { letter-spacing: .14em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
  .topstrip a { color: #fff; font-weight: 600; letter-spacing: .03em; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
  .topstrip svg { width: 14px; height: 14px; }
  .topstrip a .callnow { display: none; font-weight: 700; }
  @keyframes callShimmer {
    0% { background-position: 170% 0; }
    40% { background-position: -70% 0; }
    40.01%, 100% { background-position: 170% 0; }
  }

  /* ---------- Header ---------- */
  header.site { position: relative; z-index: 60; transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); border-bottom: 1px solid transparent; }
  header.site .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 24px; position: relative; z-index: 56; }
  header.site.scrolled { background: rgba(22,33,58,.86); backdrop-filter: blur(12px) saturate(1.3); border-bottom-color: var(--line-d); box-shadow: 0 10px 40px -24px rgba(0,0,0,.6); }
  .brand { display: inline-flex; align-items: center; gap: 13px; color: var(--ivory); }
  .brand .crest { width: 42px; height: 42px; display: block; flex: none; }
  .brand .name b { font-family: var(--serif); font-weight: 500; font-size: 20px; display: block; line-height: 1; white-space: nowrap; }
  .brand .name span { font-family: var(--sans); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--camel-light); font-weight: 600; }
  nav.main { display: flex; align-items: center; gap: 32px; font-family: var(--sans); }
  nav.main a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.78); letter-spacing: .02em; transition: color .2s; }
  nav.main a:hover { color: #fff; }
  .header-cta { display: flex; align-items: center; gap: 16px; }

  /* ---------- Hero ---------- */
  .hero { position: relative; background: var(--navy); color: var(--ivory); overflow: hidden; padding: 150px 0 96px; }
  .hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 78% 18%, rgba(192,139,65,.16), transparent 42%), radial-gradient(circle at 12% 88%, rgba(40,58,90,.7), transparent 50%); pointer-events:none; }
  .hero::after { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 72%); mask-image: radial-gradient(circle at 70% 40%, #000, transparent 72%); }
  .hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.18fr .82fr; gap: 56px; align-items: center; }
  .hero h1 { font-size: clamp(44px, 5.5vw, 76px); font-weight: 300; margin-top: 24px; letter-spacing: -0.022em; line-height: 1.07; }
  .hero h1 em { font-weight: 400; }
  .hero .sub { font-size: 20px; color: #c4ccda; margin-top: 32px; max-width: 46ch; font-weight: 400; }
  .hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
  .hero-stats { display: flex; gap: clamp(18px, 2.4vw, 36px); margin-top: 52px; }
  .hero-stats .st b { font-family: var(--serif); font-size: 34px; font-weight: 400; color: #fff; display: block; line-height: 1; }
  .hero-stats .st b .amp { color: var(--camel-light); }
  .hero-stats .st small { font-family: var(--sans); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #95a0b5; font-weight: 500; display: block; margin-top: 9px; white-space: nowrap; }
  .hero-stats .vr { width: 1px; background: var(--line-d); flex: none; }

  /* hero visual */
  .hero-visual { position: relative; }
  .hero-visual .frame { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/4.5; background: #243450; border: 1px solid var(--line-d); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
  .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; color: #aab6cc;
    background-image: radial-gradient(circle at 50% 38%, rgba(192,139,65,.14), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 15px); }
  .ph svg { width: 44px; height: 44px; opacity: .6; }
  .ph .pl { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .ph .pl small { display: block; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 15px; color: #8d99af; margin-top: 6px; font-weight: 400; }
  .hero-visual .chip { position: absolute; left: -26px; bottom: 40px; background: var(--camel); color: #1c1206; border-radius: 6px; padding: 14px 18px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); max-width: 210px; }
  .hero-visual .chip b { font-family: var(--serif); font-size: 17px; display: block; }
  .hero-visual .chip small { font-family: var(--sans); font-size: 12.5px; font-weight: 500; opacity: .85; }

  /* ---------- Marquee ---------- */
  .marquee { background: var(--camel); color: #1c1206; overflow: hidden; border-top: 1px solid var(--camel-deep); }
  .marquee .track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: slide 70s linear infinite; }
  .marquee .track span { font-family: var(--serif); font-size: 20px; font-style: italic; padding: 16px 30px; display: inline-flex; align-items: center; gap: 30px; }
  .marquee .track span::after { content: "✦"; font-style: normal; font-size: 12px; opacity: .55; }
  @keyframes slide { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; } }

  /* ---------- Section scaffolding ---------- */
  section.block { padding: 104px 0; }
  .sec-head { display: block; }
  /* No width cap on the block: the measure belongs to the paragraph, not
     the heading, which should run as far as it needs to stay on one line. */
  .sec-head .lead { max-width: none; }
  .sec-head h2 { font-size: clamp(34px, 4.4vw, 54px); margin-top: 24px; }
  .sec-head .lead p { font-size: 18px; color: var(--muted); margin-top: 16px; text-wrap: pretty; max-width: 620px; }

  /* ---------- Services bento ---------- */
  .bento { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 56px; }
  .tile { border-radius: 10px; padding: 38px 36px; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  .tile .tnum { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; }
  .tile h3 { font-size: 30px; margin-top: 16px; }
  .tile p { font-size: 16px; margin-top: 12px; }
  .tile .tico { position: absolute; top: 34px; right: 34px; width: 30px; height: 30px; }
  .tile .tico svg { width: 100%; height: 100%; }
  .tile.dark { background: var(--navy); color: var(--ivory); grid-column: span 1; }
  .tile.dark .tnum { color: var(--camel-light); }
  .tile.dark p { color: #c1c9d8; }
  .tile.dark .tico { color: var(--camel-light); }
  .tile.light { background: #fff; border: 1px solid var(--line); color: var(--ink); }
  .tile.light .tnum { color: var(--camel-deep); }
  .tile.light p { color: var(--muted); }
  .tile.light .tico { color: var(--camel); }
  .tile.feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; padding: 40px 44px; }
  .tile.feature.maint { grid-template-columns: 1fr .85fr; }
  /* the chat mini lays out in-flow: aspect-ratio sets its preferred 2:1 size,
     but as a grid item its content-based minimum wins, so it grows instead of clipping */
  .tile.feature .mini:has(.chatbody) { display: flex; flex-direction: column; min-height: max-content; aspect-ratio: auto; }
  .tile.feature .mini:has(.chatbody) .bar { position: static; flex: none; }
  .tile.feature .mini:has(.chatbody) .chatbody { position: static; flex: 1; }
  .tile.feature .mini { border: 1px solid var(--line-d); border-radius: 8px; background: var(--navy-deep); aspect-ratio: 2 / 1; position: relative; overflow: hidden; }
  .tile.feature .mini .bar { position:absolute; top:0; left:0; right:0; height:30px; background: rgba(255,255,255,.05); border-bottom:1px solid var(--line-d); display:flex; align-items:center; gap:6px; padding:0 12px; }
  .tile.feature .mini .bar i { width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.25); }
  .tile.feature .mini .body { position:absolute; top:30px; left:0; right:0; bottom:0; padding:16px 18px; display:flex; flex-direction:column; gap:9px; justify-content:center; }
  .tile.feature .mini .body .l { height:9px; border-radius:3px; background: rgba(255,255,255,.1); }
  .tile.feature .mini .body .l.cam { background: var(--camel); width:42%; height:13px; }
  .tile.feature .mini .body .l.w70 { width:70%; } .tile.feature .mini .body .l.w90 { width:90%; } .tile.feature .mini .body .l.w50 { width:50%; }
  .tile.feature .mini .chatbody { justify-content: flex-end; }
  .msg { max-width: 80%; border-radius: 8px; padding: 8px 12px; font-family: var(--sans); font-size: 13px; line-height: 1.4; }
  .msg.them { background: rgba(255,255,255,.08); color: #d6dce8; align-self: flex-start; border: 1px solid var(--line-d); }
  .msg.them b { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--camel-light); margin-bottom: 3px; font-weight: 600; }
  .msg.us { background: var(--camel); color: #1c1206; align-self: flex-end; }
  .msg small { display: block; font-size: 10.5px; opacity: .6; margin-top: 4px; }
  .tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(15,24,48,.5); }

  /* ---------- Process ---------- */
  .process { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 60px; position: relative; }
  .steps::before { content:""; position:absolute; top: 19px; left: 20px; right: calc(25% - 20px); height:1px; background: var(--line-strong); }
  .stp { padding: 0 44px 0 0; position: relative; }
  .stp .node { width: 40px; height: 40px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--camel); color: var(--camel-deep); font-family: var(--serif); font-style: italic; font-size: 19px; display: grid; place-items: center; position: relative; z-index: 2; }
  .stp h4 { font-family: var(--serif); font-size: 21px; font-weight: 500; margin-top: 22px; }
  .stp .price { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--camel-deep); margin-top: 6px; }
  .stp p { font-size: 15px; color: var(--muted); margin-top: 10px; }

  /* ---------- Pricing (dark) ---------- */
  .pricing { background: var(--navy); color: var(--ivory); position: relative; overflow: hidden; }
  .pricing::after { content:""; position:absolute; inset:0; opacity:.45; background-image: radial-gradient(circle at 85% 10%, rgba(192,139,65,.18), transparent 46%), radial-gradient(circle at 6% 92%, rgba(40,58,90,.6), transparent 52%); pointer-events:none; }
  .pricing .wrap { position: relative; z-index: 2; }
  .pricing .sec-head { text-align: center; max-width: 660px; margin: 0 auto; }
  .pricing .sec-head .eyebrow { justify-content: center; }
  .pricing .sec-head h2 { font-size: clamp(34px, 4.4vw, 54px); margin-top: 22px; }
  .pricing .sec-head p { font-size: 18px; color: #c1c9d8; margin-top: 16px; }

  .textlink { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ivory); display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: border-color .2s, color .2s; }
  .textlink:hover { color: var(--camel-light); border-color: var(--camel-light); }
  .textlink svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
  .textlink:hover svg { transform: translateX(3px); }
  .pill { font-family: var(--sans); display: inline-block; white-space: nowrap; background: rgba(192,139,65,.16); color: var(--camel-light); border: 1px solid var(--camel); border-radius: 4px; padding: 1px 8px; font-size: 12.5px; font-weight: 600; }

  /* ---------- Work preview (prebuilt themes) ---------- */
  .work .gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
  /* No window chrome: the screenshot is the card, with the caption under it. */
  .theme-card { display: block; transition: transform .3s var(--ease); }
  .theme-card .shot { aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 14px 34px -26px rgba(15,24,48,.5); transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .theme-card:hover { transform: translateY(-5px); }
  .theme-card:hover .shot { border-color: var(--line-strong); box-shadow: 0 26px 50px -28px rgba(15,24,48,.55); }
  .theme-card .cap { padding: 16px 2px 0; }
  .theme-card .cap b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; }
  .theme-card .cap small { display: block; font-family: var(--sans); font-size: 12px; color: var(--faint); letter-spacing: .04em; margin-top: 4px; }
  .work .work-foot { display: flex; justify-content: center; margin-top: 44px; }

  /* ---------- About ---------- */
  .about { background: var(--cream); }
  .about .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
  .about .imgcol .frame { border-radius: 10px; overflow: hidden; aspect-ratio: 4/4.6; background: var(--ivory); border: 1px solid var(--line-strong); position: relative; box-shadow: 0 30px 60px -34px rgba(15,24,48,.45); }
  .about .imgcol .frame .ph { color: var(--camel-deep); background-image: radial-gradient(circle at 50% 40%, rgba(192,139,65,.12), transparent 60%), repeating-linear-gradient(45deg, rgba(31,45,68,.05) 0 2px, transparent 2px 15px); }
  .about .imgcol .frame .ph .pl small { color: var(--muted); }
  .about h2 { font-size: clamp(32px, 4vw, 50px); margin-top: 22px; }
  .about p { color: var(--muted); margin-top: 18px; font-size: 18px; }
  .about .pull { font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--navy); border-left: 2px solid var(--camel); padding-left: 22px; margin-top: 28px; }
  .about .sig { margin-top: 28px; font-family: var(--serif); font-style: italic; font-size: 23px; color: var(--navy); }
  .about .sig small { display: block; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-weight: 500; }

  /* ---------- Testimonial ---------- */
  .quote { background: var(--ivory); }
  .quote .wrap { padding: 96px 40px; text-align: center; max-width: 920px; }
  .quote .q { font-family: var(--serif); font-size: 64px; line-height: .6; color: var(--camel); }
  .quote blockquote { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.34; font-weight: 400; margin-top: 22px; color: var(--ink); letter-spacing: -0.01em; }
  .quote .ph-note { margin-top: 24px; font-family: var(--sans); font-size: 12px; color: var(--faint); letter-spacing: .04em; }
  .quote cite { display: block; margin-top: 14px; font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--navy); }

  /* ---------- CTA ---------- */
  .cta { background: var(--navy-deep); color: var(--ivory); position: relative; overflow: hidden; }
  .cta::after { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(circle at 20% 30%, rgba(192,139,65,.16), transparent 40%), radial-gradient(circle at 85% 80%, rgba(40,58,90,.8), transparent 45%); }
  .cta .wrap { position: relative; z-index: 2; padding: 110px 40px; text-align: center; max-width: 880px; }
  .cta h2 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 300; margin-top: 26px; }
  .cta h2 em { font-weight: 400; }
  .cta p { color: #bcc5d4; font-size: 19px; margin-top: 20px; }
  .cta .actions { display: flex; gap: 16px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }
  .cta .phone-line { margin-top: 26px; font-family: var(--sans); font-size: 14px; color: #95a0b5; letter-spacing: .03em; }
  .cta .phone-line a { color: var(--camel-light); font-weight: 600; }

  /* ---------- Footer ---------- */
  footer.site { background: var(--navy-ink); color: #9aa5ba; padding: 84px 0 34px; font-family: var(--sans); position: relative; overflow: hidden; }
  footer.site .bigmark { font-family: var(--serif); font-size: clamp(60px, 12vw, 170px); font-weight: 300; color: rgba(255,255,255,.045); line-height: .8; letter-spacing: -0.03em; position: absolute; bottom: -10px; left: 40px; pointer-events: none; white-space: nowrap; }
  footer.site .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 40px; position: relative; z-index: 2; }
  footer.site .brand { color: #fff; }
  footer.site .fdesc { font-size: 14.5px; margin-top: 18px; max-width: 32ch; color: #8893a8; line-height: 1.6; }
  footer.site h5 { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
  footer.site ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
  footer.site ul a { color: #9aa5ba; font-size: 14.5px; }
  footer.site ul a:hover { color: #fff; }
  footer.site .fphone { font-family: var(--serif); color: #fff; font-size: 22px; }
  /* 1fr|auto|1fr keeps the legal links on true center; space-between would
     drift them toward the shorter side. */
  footer.site .fbar { border-top: 1px solid var(--line-d); margin-top: 64px; padding-top: 24px; display: grid; grid-template-columns: 1fr auto 1fr; font-size: 12.5px; color: #69748a; gap: 10px 24px; letter-spacing: .03em; position: relative; z-index: 2; }
  footer.site .fbar > :nth-child(2) { text-align: center; }
  footer.site .fbar > :last-child { text-align: right; }
  footer.site .fbar a:hover { color: #fff; }
  @media (max-width: 720px) {
    footer.site .fbar { grid-template-columns: 1fr; }
    footer.site .fbar > span { text-align: center !important; }
  }

  /* ---------- Mobile nav ---------- */
  .navtoggle { display: none; position: relative; background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; width: 46px; height: 46px; cursor: pointer; color: var(--ivory); padding: 0; transition: border-color .2s; }
  .navtoggle:hover { border-color: var(--camel-light); }
  .navtoggle svg { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; transition: opacity .25s, transform .4s var(--ease); }
  .navtoggle .ic-burger { opacity: 1; transform: rotate(0deg); }
  .navtoggle .ic-close { opacity: 0; transform: rotate(-45deg); }
  .navtoggle.open .ic-burger { opacity: 0; transform: rotate(45deg); }
  .navtoggle.open .ic-close { opacity: 1; transform: rotate(0deg); }

  .mobilenav { display: none; position: fixed; inset: 0; z-index: 55; background: var(--navy-ink); color: var(--ivory); flex-direction: column; justify-content: space-between; padding: 150px 40px 42px; overflow-y: auto; visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease), visibility 0s linear .65s; }
  .mobilenav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 82% 18%, rgba(192,139,65,.15), transparent 48%), radial-gradient(circle at 10% 92%, rgba(40,58,90,.65), transparent 50%); }
  .mobilenav::after { content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none; background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(circle at 75% 30%, #000, transparent 75%); mask-image: radial-gradient(circle at 75% 30%, #000, transparent 75%); }
  .mobilenav.open { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0% 0); transition: clip-path .65s var(--ease); }
  .mwrap { display: flex; flex-direction: column; position: relative; z-index: 1; }
  .mlink { display: flex; align-items: baseline; gap: 20px; font-family: var(--serif); font-size: clamp(34px, 8vw, 54px); font-weight: 300; letter-spacing: -0.015em; line-height: 1.1; color: var(--ivory); padding: 16px 0; border-bottom: 1px solid var(--line-d); opacity: 0; transform: translateY(28px); transition: opacity .55s var(--ease), transform .55s var(--ease), color .2s; }
  .mlink:hover { color: var(--camel-light); }
  .mlink:last-child { border-bottom: 0; }
  .mnum { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--camel-light); width: 34px; flex: none; }
  .mobilenav.open .mlink { opacity: 1; transform: none; }
  .mobilenav.open .mlink:nth-child(1) { transition-delay: .18s; }
  .mobilenav.open .mlink:nth-child(2) { transition-delay: .26s; }
  .mobilenav.open .mlink:nth-child(3) { transition-delay: .34s; }
  .mobilenav.open .mlink:nth-child(4) { transition-delay: .42s; }
  .mobilenav.open .mlink:nth-child(5) { transition-delay: .5s; }
  .mobilenav.open .mlink:nth-child(6) { transition-delay: .56s; }
  .mfoot { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .mobilenav.open .mfoot { opacity: 1; transform: none; transition-delay: .58s; }
  .mphone { font-family: var(--serif); font-style: italic; font-size: 25px; color: var(--camel-light); white-space: nowrap; }
  .mnote { font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #69748a; font-weight: 500; }
  body.nav-open { overflow: hidden; }
  @media (max-height: 700px) {
    .mobilenav { padding-top: 110px; padding-bottom: 28px; }
    .mlink { font-size: clamp(24px, 5.5vh, 40px); padding: 10px 0; }
    .mfoot { margin-top: 18px; }
    .mphone { font-size: 21px; }
  }

  /* ---------- Motion ---------- */
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; } }
  @keyframes rise-soft { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; } }
  @keyframes chip-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; } }
  @keyframes underline-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes draw-check { to { stroke-dashoffset: 0; } }
  @keyframes ring-ring { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-13deg); } 65% { transform: rotate(9deg); } }

  /* scroll reveals (staggered via --d, set by JS) */
  .js .reveal { opacity: 0; }
  .js .reveal.is-in { animation: rise .7s var(--ease) var(--d, 0s) both; }

  /* hero entrance sequence */
  .js .hero .eyebrow, .js .hero h1, .js .hero .sub, .js .hero-actions, .js .hero-stats, .js .hero-visual, .js .hero-visual .chip { opacity: 0; }
  .js .hero .eyebrow { animation: rise .8s var(--ease) .1s both; }
  .js .hero h1 { animation: rise .8s var(--ease) .22s both; }
  .js .hero .sub { animation: rise .8s var(--ease) .38s both; }
  .js .hero-actions { animation: rise .8s var(--ease) .52s both; }
  .js .hero-stats { animation: rise .8s var(--ease) .66s both; }
  .js .hero-visual { animation: rise-soft 1s var(--ease) .4s both; }
  .js .hero-visual .chip { animation: chip-in .6s var(--ease) 1.15s both; }
  .hero h1 em { position: relative; }
  .hero h1 em::after { content: ""; position: absolute; left: .04em; right: .08em; bottom: .02em; height: 2px; background: var(--camel); opacity: .45; transform: scaleX(0); transform-origin: left; }
  .js .hero h1 em::after { animation: underline-in .65s var(--ease) 1.15s both; }

  /* nav link underline */
  nav.main a { position: relative; white-space: nowrap; }
  nav.main a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--camel-light); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
  nav.main a:hover::after { transform: scaleX(1); transform-origin: left; }

  /* button lift */
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); transition-duration: .1s; }

  /* marquee pauses under the cursor */
  .marquee:hover .track { animation-play-state: paused; }

  /* phone icon ring on hover */
  .topstrip a:hover svg { animation: ring-ring .5s ease; }

  /* process line draws itself across */
  .js .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .25s; }
  .js .steps.is-in::before { transform: scaleX(1); }

  /* feature-tile browser mockups build line by line */
  .js .tile .mini .l { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
  .js .tile.is-in .mini .l { transform: scaleX(1); }
  .js .tile.is-in .mini .l:nth-child(1) { transition-delay: .4s; }
  .js .tile.is-in .mini .l:nth-child(2) { transition-delay: .5s; }
  .js .tile.is-in .mini .l:nth-child(3) { transition-delay: .6s; }
  .js .tile.is-in .mini .l:nth-child(4) { transition-delay: .7s; }

  /* maintenance tile: messages arrive in turn */
  .js .tile .msg { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js .tile.is-in .msg.them { opacity: 1; transform: none; transition-delay: .45s; }
  .js .tile.is-in .msg.us { opacity: 1; transform: none; transition-delay: .95s; }

  /* pricing checkmarks draw in, one by one */
  .js .pcard li svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
  .js .pcard.is-in li svg path { animation: draw-check .45s var(--ease) both; }
  .js .pcard.is-in li:nth-child(1) svg path { animation-delay: .25s; }
  .js .pcard.is-in li:nth-child(2) svg path { animation-delay: .37s; }
  .js .pcard.is-in li:nth-child(3) svg path { animation-delay: .49s; }
  .js .pcard.is-in li:nth-child(4) svg path { animation-delay: .61s; }
  .js .pcard.is-in li:nth-child(5) svg path { animation-delay: .73s; }

  /* theme cards: very slow photo zoom on hover */
  .theme-card .shot img { transition: transform 1.1s var(--ease); }
  .theme-card:hover .shot img { transform: scale(1.045); }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .hero .eyebrow, .js .hero h1, .js .hero .sub, .js .hero-actions, .js .hero-stats, .js .hero-visual, .js .hero-visual .chip { opacity: 1 !important; animation: none !important; }
    .js .hero h1 em::after { animation: none !important; transform: scaleX(1); }
    .js .steps::before, .js .tile .mini .l, .js .tile .msg { transform: none !important; transition: none !important; opacity: 1 !important; }
    .js .pcard li svg path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
    .mobilenav, .mobilenav .mlink, .mobilenav .mfoot, .navtoggle svg { transition: none !important; }
    .mobilenav .mlink, .mobilenav .mfoot { transform: none; }
    .theme-card, .theme-card .shot img { transition: none; }
    .topstrip a:hover svg, .btn:hover { animation: none; transform: none; }
    .topstrip a { animation: none; }
  }

  @media (max-width: 1024px) {
    .hero .wrap, .pricing .wrap, .about .wrap { grid-template-columns: 1fr; }
    .bento, .tile.feature, .tile.feature.maint { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr 1fr; gap: 36px 0; }
    .steps::before { display: none; }
    .work .gal { grid-template-columns: 1fr; }
    nav.main { display: none; }
    .header-cta .btn-line { display: none; }
    .topstrip a .callnow { display: inline-block; }
    .topstrip a { color: #fff; background-image: linear-gradient(100deg, #fff 0%, #fff 40%, #93a9cf 50%, #fff 60%, #fff 100%); background-size: 280% 100%; background-position: 170% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: callShimmer 14s var(--ease) infinite; }
    .navtoggle { display: inline-block; }
    .mobilenav { display: flex; }
    .hero { padding-top: 130px; }
    footer.site .cols { grid-template-columns: 1fr 1fr; }
  }

  /* ===== Themes gallery (/themes) ===== */

  /* Sub-hero (shared with the other interior pages) */
  .subhero { position: relative; background: var(--navy); color: var(--ivory); overflow: hidden; padding: 150px 0 92px; text-align: center; }
  .subhero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 78% 18%, rgba(192,139,65,.16), transparent 42%), radial-gradient(circle at 12% 88%, rgba(40,58,90,.7), transparent 50%); pointer-events:none; }
  .subhero::after { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(circle at 50% 42%, #000, transparent 72%); mask-image: radial-gradient(circle at 50% 42%, #000, transparent 72%); }
  .subhero .wrap { position: relative; z-index: 2; max-width: 880px; }
  .subhero .eyebrow { justify-content: center; }
  .subhero h1 { font-size: clamp(40px, 5vw, 68px); font-weight: 300; margin-top: 22px; letter-spacing: -0.022em; line-height: 1.06; }
  .subhero h1 em { font-weight: 400; }
  .subhero .sub { font-size: 20px; color: #c4ccda; margin-top: 24px; max-width: 56ch; margin-left: auto; margin-right: auto; }

  .gallery { background: var(--ivory); }
  .gallery-hint { display: none; }

  /* ---- The catalog ----
     Twelve designs at every width: three across with room to read, two across
     once that would squeeze them. Every card is a plain link to its demo, so
     with no JavaScript — and on a phone, where there is no room for a preview
     over the page — the grid is the whole feature. */
  .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 20px; margin-top: 44px; }

  .theme-card { display: block; color: var(--ink); transition: transform .3s var(--ease); }
  .theme-card:hover { transform: translateY(-4px); }
  .theme-card:focus-visible { outline: 2px solid var(--camel-deep); outline-offset: 4px; border-radius: 10px; }
  .theme-shot { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 14px 34px -26px rgba(15,24,48,.5); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
  .theme-card:hover .theme-shot { border-color: var(--line-strong); box-shadow: 0 26px 50px -28px rgba(15,24,48,.55); }
  .theme-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .theme-meta { display: block; padding: 14px 2px 0; text-align: center; }
  .theme-meta b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--navy); line-height: 1.2; }

  /* ---- The viewer ----
     Needs a wide screen and JavaScript, and even then only exists once someone
     opens it. A <dialog> in the top layer, so the fixed header is under it
     without a z-index to argue about. */
  .theme-modal { display: none; }

  @media (min-width: 900px) {
    html.js .gallery-hint { display: block; font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 34px; }
    html.js .gallery-hint + .theme-grid { margin-top: 16px; }

    .theme-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 28px; }

    /* The page holds still underneath. Locking the scroll is what stops a demo
       run to its last pixel from chaining out and taking the page with it, and
       the reserved gutter keeps the layout from jumping sideways as the
       scrollbar goes. */
    html.is-viewer-open { overflow: hidden; scrollbar-gutter: stable; }

    /* The dialog itself is the room the panel sits in, so a click that misses
       the panel is a click on the backdrop. Centred by hand: the page's reset
       zeroes every margin, which takes the usual `margin: auto` with it. */
    html.js .theme-modal[open] {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      width: 100%; max-width: none; height: 100%; max-height: none;
      padding: 30px; border: 0; background: transparent; overflow: visible;
      animation: viewer-rise .26s var(--ease) both;
    }
    .theme-modal::backdrop { background: rgba(10, 17, 34, .72); }
    html.js .theme-modal[open]::backdrop { animation: viewer-dim .26s var(--ease) both; }
    .theme-modal.is-closing { animation: viewer-sink .16s ease-in both; }
    .theme-modal.is-closing::backdrop { animation: viewer-lift .16s ease-in both; }

    @keyframes viewer-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
    @keyframes viewer-sink { to { opacity: 0; transform: translateY(8px) scale(.99); } }
    @keyframes viewer-dim { from { opacity: 0; } }
    @keyframes viewer-lift { to { opacity: 0; } }

    .theme-modal-panel {
      display: flex; flex-direction: column;
      width: min(1720px, 100%); height: 100%;
      background: #fff; border: 1px solid var(--line); border-radius: 12px;
      box-shadow: 0 40px 90px -30px rgba(10, 17, 34, .7);
    }

    .viewer-bar { border-radius: 11px 11px 0 0; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
    .viewer-id b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--navy); line-height: 1.15; }
    .viewer-tools { display: flex; align-items: center; gap: 18px; }
    .device-toggle { display: inline-flex; background: #fff; border: 1px solid var(--line-strong); border-radius: 5px; overflow: hidden; }
    .device-btn { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--muted); background: transparent; border: 0; padding: 8px 15px; cursor: pointer; transition: background .2s, color .2s; }
    .device-btn + .device-btn { border-left: 1px solid var(--line-strong); }
    .device-btn:hover { color: var(--navy); background: var(--cream); }
    .device-btn[aria-pressed="true"] { background: var(--navy); color: var(--ivory); }
    .device-btn:focus-visible { outline: 2px solid var(--camel-deep); outline-offset: 2px; }
    .viewer-full { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--camel-deep); border-bottom: 1px solid var(--camel-soft); padding-bottom: 2px; white-space: nowrap; transition: color .2s, border-color .2s; }
    .viewer-full:hover { color: var(--camel); border-color: var(--camel); }
    .viewer-full svg { width: 15px; height: 15px; flex: none; }
    .viewer-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
    .viewer-close:hover { background: var(--cream); border-color: var(--line-strong); color: var(--navy); }
    .viewer-close:focus-visible { outline: 2px solid var(--camel-deep); outline-offset: 2px; }
    .viewer-close svg { width: 17px; height: 17px; }
    /* The iframe renders at a pinned device viewport (1280w desktop, 390x844
       phone) and is scaled by themes.js to fit; the .viewer-vp box reserves
       the scaled footprint because transforms don't affect layout. */
    /* The frame does not clip, so the chevrons can straddle the panel's edge;
       the stage inside it still does, which is what holds the scaled demo. */
    .viewer-stage-frame { position: relative; flex: 1; min-height: 0; display: flex; }
    .viewer-stage { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; background: var(--cream); overflow: hidden; }

    /* One design either side, hung on the panel's edges: half on the scrim,
       half on the preview, so they take as little of the demo as a target that
       size can. They wrap, so neither one is ever a dead button. */
    .viewer-step { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 50%; color: var(--navy); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(10,17,34,.75); transition: background .2s, border-color .2s, color .2s; }
    .viewer-step--prev { left: -22px; }
    .viewer-step--next { right: -22px; }
    .viewer-step:hover { background: #fff; border-color: var(--camel); color: var(--camel-deep); }
    .viewer-step:focus-visible { outline: 2px solid var(--camel-deep); outline-offset: 2px; }
    /* A chevron's weight sits behind its point — both arms end on the open
       side — so a glyph centred by its box reads as pushed away from where it
       points. Each one moves a pixel back towards its own tip. */
    .viewer-step svg { width: 20px; height: 20px; }
    .viewer-step--prev svg { transform: translateX(-1px); }
    .viewer-step--next svg { transform: translateX(1px); }
    .viewer-vp { position: relative; overflow: hidden; background: #fff; }
    .viewer-frame { border: 0; display: block; background: #fff; transform-origin: 0 0; }
    .viewer-stage.is-mobile, .viewer-stage.is-tablet { padding: 20px; }
    .viewer-stage.is-mobile .viewer-vp, .viewer-stage.is-tablet .viewer-vp { border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 18px 44px -28px rgba(15,24,48,.55); }

    /* ---- The rail ----
       The catalog again, along the foot of the panel, so switching designs
       never means closing the preview to go back for the next one. One row you
       scroll by hand or with the arrow keys; mandatory snapping is what makes
       it come to rest on a whole card rather than a sliced thumbnail. */
    .theme-rail {
      border-radius: 0 0 11px 11px;
      flex: none;
      display: flex; flex-direction: row; gap: 10px;
      padding: 10px 10px 12px;
      background: var(--paper); border-top: 1px solid var(--line);
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 4px;
      scroll-behavior: smooth;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--line-strong) transparent;
    }
    .theme-rail::-webkit-scrollbar { height: 8px; }
    .theme-rail::-webkit-scrollbar-track { background: transparent; }
    .theme-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
    .theme-rail::-webkit-scrollbar-thumb:hover { background: var(--camel); }

    .theme-card--rail { flex: 0 0 154px; scroll-snap-align: start; padding: 6px; border: 1px solid transparent; border-radius: 9px; transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
    .theme-card--rail:hover { transform: none; background: #fff; border-color: var(--line); }
    .theme-card--rail .theme-shot { border-radius: 5px; box-shadow: none; }
    .theme-card--rail:hover .theme-shot { box-shadow: none; }
    .theme-card--rail .theme-meta { padding: 7px 2px 1px; }
    .theme-card--rail .theme-meta b { font-size: 14px; }
    .theme-card--rail.is-selected { background: #fff; border-color: var(--camel); box-shadow: 0 16px 34px -28px rgba(15,24,48,.6); }
    .theme-card--rail.is-selected .theme-shot { border-color: var(--camel); }
    .theme-card--rail.is-selected .theme-meta b { color: var(--camel-deep); }
  }

  @media (prefers-reduced-motion: reduce) {
    .theme-card, .theme-shot { transition: none; }
    .theme-card:hover { transform: none; }
    /* The viewer arrives and leaves without the rise and fade, and the arrow
       keys jump the rail sideways instead of gliding it. */
    html.js .theme-modal[open], html.js .theme-modal[open]::backdrop,
    .theme-modal.is-closing, .theme-modal.is-closing::backdrop { animation: none; }
    html, .theme-rail { scroll-behavior: auto; }
  }

  @media (max-width: 1024px) {
    .subhero { padding-top: 130px; }
  }