/*
 * GRC 360 public site (demo.grc360.biz). Hand-written to reproduce the Wix
 * site at https://michaelgalvan9.wixsite.com/grc-360-1 without any of Wix's
 * runtime.
 *
 * UNITS. Every length is in rem, and 1rem is one "design pixel" times ten:
 *
 *   >= 1000px wide   the DESKTOP layout, drawn on Wix's 1440px canvas.
 *                    1rem = 10px at 1440 and above, and shrinks with the
 *                    window below that, so the whole page scales down as one
 *                    piece instead of reflowing (Wix clips instead).
 *   <  1000px wide   the MOBILE layout, drawn on Wix's 320px mobile canvas.
 *                    1rem = 1/32 of the window, so a 390px phone sees exactly
 *                    what Wix shows it (Wix sets viewport width=320 and lets
 *                    the phone zoom). Capped at 16px so a tablet gets a
 *                    centred 512px column rather than giant type.
 *
 * So `1.6rem` is 16 Wix pixels in either layout, and the numbers below can be
 * checked directly against the Wix page's own geometry.
 *
 * FONTS (all SIL OFL 1.1, self-hosted, licences in /assets/fonts/):
 *   Sora               headings (Wix: sora, Google font)
 *   SG Static          the Space Grotesk REGULAR file the Wix site uploads as a
 *                      custom font. Only the regular weight exists, so bold is
 *                      browser-synthesised, exactly as on Wix.
 *   Space Grotesk      the real variable family, which Wix also uses in a few
 *                      paragraphs (real bold).
 *   Arimo              stands in for Wix's proprietary "Helvetica W01 Bold"
 *                      (the 01..05 numerals). Metric-compatible with Helvetica.
 *   Nunito Sans        stands in for Wix's proprietary "Avenir LT 35 Light"
 *                      (form labels and the form button).
 */

@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-v12-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "SG Static"; src: url("/assets/fonts/space-grotesk-regular-static.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-v6-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("/assets/fonts/arimo-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-latin-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --navy: #031a29;
  --gold: #b28f6c;
  --bronze: #a48668;
  --light: #ededed;
  --ink: #3d3d3d;
  --ink2: #1f1f1f;
  --white: #ffffff;
  --sora: "Sora", sans-serif;
  --sgs: "SG Static", "Space Grotesk", sans-serif;
  --sg: "Space Grotesk", sans-serif;
  --helv: "Arimo", Helvetica, Arial, sans-serif;
  --avenir: "Nunito Sans", sans-serif;
  color-scheme: light;
}

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--light); color: var(--ink); font-family: var(--sgs); font-synthesis: weight style; overflow-x: clip; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
b, strong { font-weight: 700; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--white); color: var(--navy); padding: 8px 12px; font-family: var(--sgs); }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid #5e97ff; outline-offset: 2px; }

.frame { position: relative; margin: 0 auto; }
.strip { display: block; height: 1rem; background: var(--bronze); }
.rt p.sp { margin-top: var(--lh); }   /* the empty paragraphs Wix uses as spacers */
.c-gold { color: var(--gold); }
.c-bronze { color: var(--bronze); }

/* Buttons. Hover states are Wix's own, reproduced as-is. */
.btn { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--gold); color: var(--white); border: 1px solid var(--ink); font-family: var(--sgs); font-weight: 700; font-size: 1.6rem; line-height: 1.4; transition: border-color .4s ease, background-color .4s ease, color .4s ease; }
.btn:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--hero { border-color: #000; }
.btn--hero:hover { background: #0038ff; border-color: #0038ff; color: var(--white); }
.btn--learn { background: var(--bronze); border-color: var(--ink2); font-size: 1.4rem; letter-spacing: .1em; gap: .4rem; }
.btn--learn img { width: 1.2rem; height: 1.2rem; }
.btn--learn:hover { background: var(--ink2); color: var(--light); }
.btn--learn:hover img { filter: brightness(0) invert(93%); }

/* -------------------------------------------------------------- header -- */
.site-header { background: var(--navy); position: relative; z-index: 20; }
.nav a { font-family: var(--sgs); font-weight: 700; font-size: 1.6rem; line-height: 3rem; color: #fffffe; padding: 0 1.5rem; display: block; white-space: nowrap; transition: color .4s ease; }
.nav a[aria-current="page"] { color: var(--gold); }
.nav-list { display: flex; justify-content: flex-end; }
.nav-more { position: relative; }
.nav-more > button { background: none; border: 0; cursor: pointer; font-family: var(--sgs); font-weight: 700; font-size: 1.6rem; line-height: 3rem; color: #fffffe; padding: 0 .5rem; }
.nav-more-list { display: none; position: absolute; right: 0; top: 100%; background: var(--white); min-width: 100%; padding: .4rem 0; }
.nav-more.open .nav-more-list { display: block; }
.nav-more-list a { color: var(--ink); padding: 0 1.2rem; }
.nav-more-list a[aria-current="page"] { color: var(--gold); }
.menu-toggle { display: none; }

.mobile-menu { position: fixed; inset: 0; z-index: 50; background: var(--light); }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { width: 18.8rem; margin: 5.8rem auto 0; }
.mobile-menu li { border-bottom: 1px solid var(--ink); }
.mobile-menu a { display: block; text-align: center; font-family: var(--sgs); font-size: 1.6rem; line-height: 5.6rem; color: var(--ink); }
.mobile-menu a[aria-current="page"] { color: var(--ink2); }
.mobile-menu .menu-close { position: absolute; top: 11.3rem; left: calc(50% + 11.4rem); width: 2.6rem; height: 2.6rem; background: none; border: 0; padding: 0; cursor: pointer; }
.mobile-menu .menu-close::before, .mobile-menu .menu-close::after { content: ""; position: absolute; left: .1rem; top: 1.2rem; width: 2.4rem; height: .25rem; background: var(--ink); border-radius: .2rem; transform: rotate(45deg); }
.mobile-menu .menu-close::after { transform: rotate(-45deg); }

.to-top { display: none; }

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--navy); color: var(--white); font-family: var(--sgs); }
.site-footer .f-text { font-size: 1.6rem; line-height: 1.4; letter-spacing: -.01em; }
.site-footer a:hover { text-decoration: underline; }

/* Card gradient: the 1x100 PNG Wix tiles across the top of each card. */
.card { background: linear-gradient(rgba(0,0,0,.09) 0, rgba(0,0,0,.086) 1rem, rgba(0,0,0,.071) 2.5rem, rgba(0,0,0,.043) 5rem, rgba(0,0,0,.016) 7.5rem, rgba(0,0,0,.004) 9rem, rgba(0,0,0,0) 10rem) 0 0 / 100% 10rem no-repeat, var(--white); border: 1px solid #324158; border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------- form -- */
.demo-form label { display: block; font-family: var(--avenir); font-weight: 300; color: var(--white); }
.demo-form .req::after { content: " *"; }
.demo-form input, .demo-form select { display: block; width: 100%; border: 0; border-bottom: 1px solid rgba(61,61,61,.5); border-radius: 0; background: var(--white); color: var(--gold); font-family: var(--avenir); font-weight: 300; padding: .3rem .3rem .3rem .7rem; outline: none; transition: border .5s ease; -webkit-appearance: none; appearance: none; }
.demo-form input:hover, .demo-form input:focus, .demo-form select:hover, .demo-form select:focus { border-bottom-width: 2px; }
.demo-form input::placeholder { color: var(--gold); opacity: 1; }
.demo-form input[aria-invalid="true"], .demo-form select[aria-invalid="true"] { border-bottom: 2px solid #ff4040; }
/* "Preferred Contact Method": a native select (the phone's own picker), drawn
   like the inputs, with a gold chevron where the browser's arrow was. */
.demo-form select { padding-right: 4rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b28f6c' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2rem center; background-size: 1.2rem auto; }
.demo-form button[type="submit"] { width: 100%; background: var(--gold); color: var(--white); border: 1px solid var(--ink2); font-family: var(--avenir); font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .4s ease, background-color .4s ease, color .4s ease; }
.demo-form button[type="submit"]:hover { background: var(--light); color: var(--ink2); }
.demo-form button[disabled] { opacity: .7; cursor: progress; }
/* The Turnstile widget box: empty, so invisible, unless Cloudflare asks for a click (demo-form.js). */
.demo-form .cf-box { position: absolute; }
.form-status { font-family: var(--avenir); color: var(--white); }
.form-status[data-kind="error"] { color: #ff8a8a; }

.nf { background: var(--navy); color: var(--white); padding: 12rem 2rem; text-align: center; }
.nf h1 { font: 700 4.4rem/1.2 var(--sora); color: var(--gold); }
.nf p { margin: 2rem 0 3rem; font: 400 2rem/1.4 var(--sgs); }
.nf .btn { width: 16rem; height: 5rem; margin: 0 auto; }

/* =========================================================== DESKTOP === */
@media (min-width: 1000px) {
  html { font-size: min(10px, calc(100vw / 144)); }
  .frame { width: 144rem; max-width: 100%; }

  .site-header .frame { height: 7rem; display: flex; align-items: flex-start; padding: 0 12.8rem 0 9.2rem; }
  .logo { margin-top: .6rem; width: 5.8rem; height: 5.8rem; }
  .logo img { width: 5.8rem; height: 5.8rem; }
  .nav { margin-left: auto; margin-top: 2rem; }
  .btn--hdr { margin-top: 1rem; width: 16rem; height: 5rem; }

  .site-footer { height: 43.3rem; }
  .site-footer .frame { height: 100%; }
  .f-rule { position: absolute; left: 12rem; top: 3.3rem; width: 120rem; border-top: 1px solid var(--white); }
  .f-logo { position: absolute; left: 12rem; top: 2.9rem; width: 39.3rem; height: 36.4rem; }
  .f-logo img { width: 100%; height: 100%; object-fit: contain; }
  .f-text { position: absolute; left: 86.8rem; width: 25.5rem; }
  .f-site { top: 6.1rem; } .f-phone { top: 9.5rem; } .f-email { top: 12.8rem; }
  .f-addr { top: 16.1rem; width: 18.3rem; } .f-copy { top: 28.6rem; }
  .f-privacy { top: 7.2rem; left: 111.1rem; width: 18.3rem; } .f-access { top: 10.6rem; left: 111.1rem; width: 18.3rem; }
  .m-strip { display: none; }

  /* ---- home ---- */
  .h-hero { position: relative; height: 47rem; background: var(--navy); overflow: hidden; }
  .h-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .h-hero .frame { height: 100%; }
  .h-kicker { position: absolute; left: 9.2rem; top: 3.2rem; width: 64.9rem; font: 700 2.6rem/1.2 var(--sora); letter-spacing: -.02em; color: var(--gold); }
  .h-title { position: absolute; left: 9.2rem; top: 10.7rem; width: 62.6rem; font: 700 4.5rem/1.25 var(--sora); color: var(--light); }
  .h-lead { position: absolute; left: 9.2rem; top: 28.9rem; width: 56.3rem; font: 400 2rem/3.34rem var(--sgs); color: var(--light); }
  .h-hero .btn { position: absolute; left: 9.2rem; top: 38.2rem; width: 16rem; height: 4rem; }

  .h-ops { background: var(--white); height: 85rem; }
  .h-ops .frame { padding: 2.6rem 0 0 11rem; }
  .h-ops h2 { width: 55.7rem; font: 700 6.4rem/1.2 var(--sora); letter-spacing: -.02em; color: var(--navy); }
  .h-ops .rt { --lh: 3.36rem; width: 96.6rem; font: 400 2.4rem/3.36rem var(--sgs); letter-spacing: -.01em; color: var(--ink); }

  .h-platform { background: var(--white); height: 33.6rem; }
  .h-platform .frame { height: 33.6rem; }
  .h-platform .p-kicker { position: absolute; left: 33rem; top: 2.2rem; width: 78rem; text-align: center; font: 700 3.2rem/4rem var(--sora); color: var(--gold); }
  .h-platform h2 { position: absolute; left: 33rem; top: 6.2rem; width: 78rem; text-align: center; font: 700 4rem/5rem var(--sora); color: var(--navy); }
  .h-platform .p-lead { position: absolute; left: 23rem; top: 12.4rem; width: 98rem; text-align: center; font: 400 1.8rem/2.34rem var(--sgs); letter-spacing: -.01em; color: var(--ink); }
  .cards { position: absolute; left: 32.2rem; top: 19.5rem; display: flex; gap: 2.5rem; align-items: flex-start; }
  .card { position: relative; width: 18rem; height: 8.3rem; }
  .card--tall { height: 10.1rem; }
  .card img { position: absolute; }
  .card .c-label { position: absolute; top: 5.4rem; left: 0; width: 100%; text-align: center; font: 700 1.5rem/1.8rem var(--sora); letter-spacing: -.02em; color: var(--ink); }
  .card--people img { left: 6.9rem; top: .8rem; width: 4.1rem; height: 4.1rem; }
  .card--projects img { left: -.6rem; top: -2.7rem; width: 19.3rem; height: 11.1rem; }
  .card--field img { left: -1.1rem; top: -2.7rem; width: 20.3rem; height: 11.1rem; }
  .card--field .c-label { left: 2.7rem; width: 10rem; text-align: left; }
  .card--business img { left: 6.8rem; top: .6rem; width: 4.6rem; height: 4.6rem; }
  .card--business .c-label { left: 1.1rem; width: 16.1rem; text-align: left; }

  .h-core { background: var(--bronze); height: 83rem; }
  .h-core .bg { position: relative; height: 81.3rem; overflow: hidden; background: #404656; }
  .h-core .bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
  .h-core .frame { height: 100%; }
  .h-core h2 { position: absolute; left: 9.2rem; top: 4.2rem; width: 98.2rem; font: 700 4.4rem/5.28rem var(--sora); letter-spacing: -.02em; color: var(--white); }
  .h-core h2 .c-bronze { color: var(--bronze); }
  .h-core h3 { position: absolute; left: 9.2rem; top: 22.6rem; width: 36.8rem; font: 700 2.2rem/2.64rem var(--sora); letter-spacing: -.02em; color: var(--white); }
  .h-core .c-lead { position: absolute; left: 9.2rem; top: 30.5rem; width: 56.3rem; font: 400 2rem/3.34rem var(--sgs); color: var(--light); }
  .pillars { position: absolute; left: 13.1rem; top: 43.8rem; display: flex; }
  .pillar { width: 23.6rem; padding-top: 5.5rem; text-align: center; }
  .pillar img { width: 9.1rem; height: 8.4rem; margin: 0 auto 4rem; }
  .pillar p { font: 700 1.6rem/2.08rem var(--sora); letter-spacing: -.01em; color: var(--white); }
  .pillar:first-child p { letter-spacing: 0; line-height: 2.1rem; }
  .h-core .rule-l, .h-core .rule-r { position: absolute; top: 71.2rem; width: 48rem; border-top: 1px solid var(--white); }
  .h-core .rule-l { left: 13.2rem; } .h-core .rule-r { left: 82.9rem; }
  .h-core .tag { position: absolute; top: 71.9rem; width: 48rem; text-align: center; font: 700 1.5rem/2.505rem var(--sgs); color: var(--bronze); }
  .h-core .tag-l { left: 13.2rem; } .h-core .tag-r { left: 82.9rem; }
  .h-core .btn--learn { position: absolute; left: 64rem; top: 71.2rem; width: 16rem; height: 4rem; }

  /* ---- why ---- */
  .w-main { background: var(--navy); height: 130.6rem; }
  .w-main .frame { height: 100%; }
  .w-main .w-kicker { position: absolute; left: 9.2rem; top: 2.2rem; width: 40.7rem; font: 700 2.8rem/3.5rem var(--sora); color: #fdfbfe; }
  .w-main h1 { position: absolute; left: 9.2rem; top: 5.7rem; width: 73.2rem; font: 700 5.8rem/8.12rem var(--sora); letter-spacing: -.02em; color: var(--bronze); }
  .w-story { --lh: 2.52rem; position: absolute; left: 9.2rem; top: 32.8rem; width: 69.2rem; font: 400 1.8rem/2.52rem var(--sg); letter-spacing: -.01em; color: var(--white); }
  .w-story .sgs { font-family: var(--sgs); }
  .w-photo { position: absolute; left: 84.3rem; top: 5.7rem; width: 42.1rem; height: 25.9rem; object-fit: cover; }
  .w-quote { position: absolute; left: 84.3rem; top: 33.2rem; width: 42.1rem; height: 15.1rem; border: 2px solid var(--white); padding: 1.1rem 0 0 .6rem; font: 700 2.4rem/3.12rem var(--sora); letter-spacing: .01em; color: var(--light); }
  .w-questions { --lh: 2.24rem; position: absolute; left: 9.2rem; top: 56.5rem; width: 73.8rem; font: italic 700 1.6rem/2.24rem var(--sora); letter-spacing: -.01em; color: var(--gold); }
  .w-center { --lh: 2.52rem; position: absolute; left: 23rem; top: 76.2rem; width: 97.5rem; text-align: center; font: 400 1.8rem/2.52rem var(--sgs); letter-spacing: -.01em; color: var(--white); }
  .w-more { position: absolute; left: 6.6rem; top: 104.5rem; width: 130.8rem; text-align: center; font: 700 2.8rem/3.6rem var(--sora); color: var(--bronze); }
  .w-created { position: absolute; left: 23.2rem; top: 111.5rem; width: 97.5rem; text-align: center; font: 400 1.8rem/2.52rem var(--sgs); letter-spacing: -.01em; color: var(--white); }
  .w-built { position: absolute; left: 6.6rem; top: 118.9rem; width: 130.8rem; text-align: center; font: 700 2.8rem/3.6rem var(--sora); color: var(--gold); }
  .w-main .btn { position: absolute; left: 64rem; top: 123.3rem; width: 16rem; height: 5rem; }

  /* ---- principles ---- */
  .pr-page { background: var(--bronze); }
  .pr-main { background: var(--navy); }
  .pr-intro { height: 22.2rem; }
  .pr-intro .frame { height: 100%; }
  .pr-intro h1 { position: absolute; left: 7.9rem; top: 6.1rem; width: 49.4rem; font: 700 4.4rem/5.28rem var(--sora); color: var(--light); }
  .pr-intro h1 .c-bronze { color: var(--bronze); }
  .pr-intro p { position: absolute; left: 72rem; top: 3.9rem; width: 57rem; font: 400 1.6rem/2.88rem var(--sgs); color: var(--light); }
  .pr-list .frame { width: 92.2rem; padding-left: 0; }
  .pr-item { position: relative; padding: 3.6rem 0 2.6rem 14rem; }
  .pr-num { position: absolute; left: 3.9rem; top: 2.2rem; width: 7.4rem; text-align: center; font: 700 6.7rem/8.04rem var(--helv); color: var(--bronze); }
  .pr-icon { position: absolute; left: 3rem; top: 13.5rem; width: 9.1rem; height: 8.4rem; }
  .pr-body { --lh: 3.22rem; width: 70.9rem; font: 400 2.3rem/3.22rem var(--sgs); letter-spacing: -.01em; }
  .pr-body h2 { font: 700 2.3rem/2.53rem var(--sora); color: var(--white); margin-bottom: 2.63rem; }
  .pr-body .sg { font-family: var(--sg); }
  .pr-body .tight { line-height: 2.53rem; letter-spacing: -.02em; }
  .pr-rule { margin: 4.2rem 0 0 -11rem; width: 45rem; height: .5rem; border-top: 3px solid var(--bronze); }
  .pr-cta { padding: 0 0 2.5rem; }
  .pr-cta .btn { margin: 0 auto; width: 16rem; height: 5rem; }
  .c1 { color: var(--white); } .c2 { color: #fdfbfe; } .c3 { color: var(--light); }

  /* ---- demo ---- */
  .d-main { background: var(--bronze); height: 107.6rem; }
  .d-main .frame { height: 100%; }
  .d-left { position: absolute; left: 6rem; top: 6rem; width: 52.8rem; height: 95.6rem; background: var(--navy); }
  .d-left h1 { position: absolute; left: 4.6rem; top: 2.8rem; width: 43.6rem; font: 700 5.6rem/7rem var(--sora); color: #fffffe; }
  .d-left hr { position: absolute; left: 3.6rem; top: 45.4rem; width: 45.6rem; margin: 0; border: 0; border-top: 3px solid var(--light); }
  .d-left .rt { --lh: 2.6rem; position: absolute; left: 4.6rem; top: 47.6rem; width: 31.7rem; font: 400 2rem/2.6rem var(--sgs); color: var(--white); }
  .d-right { position: absolute; left: 61.8rem; top: 6rem; width: 76.2rem; height: 95.6rem; background: var(--navy); }
  .demo-form { position: absolute; left: 15.5rem; top: 4.1rem; width: 45.6rem; height: 45.6rem; }
  .demo-form .fld { position: absolute; width: 20rem; }
  .demo-form label { font-size: 1.4rem; line-height: 1.4rem; margin-bottom: .8rem; }
  .demo-form input, .demo-form select { height: 4rem; font-size: 1.4rem; }
  .fd-first { left: 1.3rem; top: 3.6rem; } .fd-last { left: 24.3rem; top: 3.6rem; }
  .demo-form .fd-email { left: 1.3rem; top: 10.7rem; width: 43rem; }
  .fd-phone { left: 1.3rem; top: 18.8rem; } .fd-company { left: 24.2rem; top: 18.8rem; }
  .fd-contact { left: 1.3rem; top: 28.2rem; }
  .demo-form .f-submit { position: absolute; left: 1.3rem; top: 35.7rem; width: 43rem; }
  .demo-form button[type="submit"] { height: 6rem; font-size: 2rem; }
  .form-status { position: absolute; left: 1.3rem; top: 43rem; width: 43rem; font-size: 1.6rem; line-height: 1.4; }
  .demo-form .cf-box { left: 1.3rem; top: 48.5rem; }
}

/* ============================================================ MOBILE === */
@media (max-width: 999.98px) {
  html { font-size: min(calc(100vw / 32), 16px); }
  .frame { width: 32rem; max-width: 100%; }
  .nav, .to-top-hide { display: none; }

  .site-header { height: 19rem; }
  .site-header .frame { height: 100%; }
  .logo { position: absolute; left: 13rem; top: 2rem; width: 6rem; height: 6rem; }
  .logo img { width: 6rem; height: 6rem; }
  .btn--hdr { position: absolute; left: 8rem; top: 11.9rem; width: 16rem; height: 4.2rem; font-size: 1.49333rem; line-height: 2.09067rem; }
  .menu-toggle { display: block; position: absolute; left: 27.4rem; top: 11.3rem; width: 2.6rem; height: 2.6rem; background: none; border: 0; padding: 0; cursor: pointer; }
  .menu-toggle span { position: absolute; left: .2rem; width: 2.2rem; height: .2rem; border-radius: .2rem; background: var(--white); }
  .menu-toggle span:nth-child(1) { top: .3rem; } .menu-toggle span:nth-child(2) { top: 1.2rem; } .menu-toggle span:nth-child(3) { top: 2.1rem; }

  .m-strip { width: 28rem; margin: 0 auto; height: 1rem; background: var(--bronze); }
  .strip { display: none; }

  .to-top { display: block; position: fixed; right: calc(50% - 14rem); bottom: 4rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid rgba(61,61,61,.25); background: rgba(255,255,255,.9); z-index: 30; cursor: pointer; padding: 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .to-top.show { opacity: 1; pointer-events: auto; }
  .to-top::before { content: ""; position: absolute; left: 1.45rem; top: 1.75rem; width: 1.3rem; height: 1.3rem; border-left: 1px solid #555; border-top: 1px solid #555; transform: rotate(45deg); }

  .site-footer { height: 38.1rem; position: relative; }
  .site-footer .frame { height: 100%; }
  .site-footer .m-strip { position: absolute; left: 2rem; top: 2rem; }
  .f-rule { position: absolute; left: 2rem; top: 4rem; width: 28rem; border-top: 1px solid var(--white); }
  .f-logo { position: absolute; left: 13.7rem; top: 5rem; width: 4.5rem; height: 4.2rem; }
  .f-logo img { width: 100%; height: 100%; object-fit: contain; }
  .site-footer .f-text { position: absolute; left: 2rem; width: 28rem; font-size: 1.4rem; }
  .f-site { top: 9.2rem; } .f-phone { top: 12.2rem; } .f-email { top: 15.2rem; }
  .f-privacy { top: 19.7rem; width: 17rem !important; } .f-access { top: 21.7rem; width: 17rem !important; }
  .f-addr { top: 26.5rem; width: 17rem !important; } .f-copy { top: 31.5rem; }

  /* ---- home ---- */
  .h-hero-wrap { padding: 0 0 2rem; }
  .h-hero-wrap .m-strip { margin-bottom: 1rem; }
  .h-hero { position: relative; height: 41.8rem; background: var(--navy); overflow: hidden; }
  .h-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .h-hero .frame { height: 100%; }
  .h-kicker { position: absolute; left: 2rem; top: 2rem; width: 28rem; font: 700 1.9rem/2.28rem var(--sora); letter-spacing: -.02em; color: var(--gold); }
  .h-title { position: absolute; left: 2rem; top: 7.6rem; width: 28rem; font: 700 2.5rem/3.125rem var(--sora); color: var(--light); }
  .h-lead { position: absolute; left: 2rem; top: 17.9rem; width: 28rem; font: 400 1.7rem/2.839rem var(--sgs); color: var(--light); }
  .h-hero .btn { position: absolute; left: 8rem; top: 30.3rem; width: 16rem; height: 4.2rem; }

  .h-ops { background: var(--white); padding: 2rem 0 6rem; }
  .h-ops .frame { padding: 2rem 0 0 2rem; }
  .h-ops h2 { width: 29rem; font: 700 3.8rem/4.56rem var(--sora); letter-spacing: -.02em; color: var(--navy); }
  .h-ops .rt { --lh: 2.66rem; width: 28rem; font: 400 1.9rem/2.66rem var(--sgs); letter-spacing: -.01em; color: var(--ink); }

  .h-platform { padding-top: 2rem; }
  .h-platform .inner { background: var(--white); padding: 2rem 0 2.1rem; }
  .h-platform .frame { display: flex; flex-direction: column; align-items: center; }
  .h-platform .p-kicker { margin-top: 1rem; width: 28rem; text-align: center; font: 700 2.7rem/3.375rem var(--sora); color: var(--gold); }
  .h-platform h2 { width: 24.7rem; text-align: center; font: 700 2.9rem/3.625rem var(--sora); color: var(--navy); margin-top: -.1rem; }
  .h-platform .p-lead { order: 3; width: 28rem; margin-top: 2.6rem; text-align: center; font: 400 1.7rem/2.21rem var(--sgs); letter-spacing: -.01em; color: var(--ink); }
  .cards { order: 2; width: 18rem; margin-top: .8rem; }
  .card { position: relative; width: 18rem; }
  .card img { position: absolute; }
  .card .c-label { position: absolute; left: 1rem; width: 16rem; text-align: center; font: 700 1.5rem/1.8rem var(--sora); letter-spacing: -.02em; color: var(--ink); }
  .card--people { height: 9.7rem; }
  .card--people img { left: 7rem; top: 1rem; width: 4rem; height: 4rem; }
  .card--people .c-label { top: 6rem; }
  .card--projects { height: 12.9rem; margin-top: 2.1rem; }
  .card--projects img { left: -2.2rem; top: -1rem; width: 22.5rem; height: 12.9rem; }
  .card--projects .c-label { top: 10.1rem; }
  .card--field { height: 11.9rem; margin-top: 2.6rem; }
  .card--field img { left: -3.5rem; top: -2rem; width: 25.1rem; height: 13.9rem; }
  .card--field .c-label { top: 9rem; left: 1.6rem; width: 14.7rem; font-size: 1.7rem; line-height: 2.04rem; }
  .card--business { height: 11.6rem; margin-top: 1.1rem; }
  .card--business img { left: 6.5rem; top: 1rem; width: 5rem; height: 5rem; }
  .card--business .c-label { top: 7rem; text-align: left; }

  .h-core { padding-top: 2rem; }
  .h-core .bg { position: relative; height: 139.9rem; overflow: hidden; background: #404656; }
  .h-core .bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
  .h-core .frame { height: 100%; }
  .h-core h2 { position: absolute; left: 2rem; top: 2rem; width: 28rem; font: 700 2.5rem/3rem var(--sora); letter-spacing: -.02em; color: var(--white); }
  .h-core h2 .c-bronze { color: var(--bronze); }
  .h-core h3 { position: absolute; left: 2rem; top: 21rem; width: 28rem; white-space: nowrap; font: 700 1.8rem/2.16rem var(--sora); letter-spacing: -.02em; color: var(--white); }
  .h-core .c-lead { position: absolute; left: 2rem; top: 26.3rem; width: 28rem; font: 400 1.7rem/2.839rem var(--sgs); color: var(--light); }
  .pillars { position: absolute; left: 0; top: 48.1rem; width: 32rem; }
  .pillar { padding: 2.1rem 0 1.9rem; text-align: center; }
  .pillar img { width: 6rem; height: 5.7rem; margin: 0 auto 1rem; }
  .pillar p { width: 18.4rem; margin: 0 auto; font: 700 1.6rem/2.08rem var(--sora); letter-spacing: -.01em; color: var(--white); }
  .pillar:first-child p { width: 28rem; letter-spacing: 0; line-height: 2.1rem; }
  .pillar:last-child p { width: 25rem; }
  .h-core .rule-l, .h-core .rule-r { position: absolute; left: 2rem; width: 28rem; border-top: 1px solid var(--white); }
  .h-core .rule-l { top: 121.4rem; } .h-core .rule-r { top: 132.2rem; }
  .h-core .tag { position: absolute; left: 2rem; width: 28rem; text-align: center; font: 700 1.3rem/2.171rem var(--sgs); color: var(--bronze); }
  .h-core .tag-l { top: 122.8rem; } .h-core .tag-r { top: 133.6rem; }
  .h-core .btn--learn { position: absolute; left: 8rem; top: 127rem; width: 16rem; height: 4.2rem; }

  /* ---- why ---- */
  .w-main { background: var(--navy); padding: 2rem 0 1rem; }
  .w-main .frame { padding: 0 2rem; display: flex; flex-direction: column; }
  .w-main .w-kicker { order: 1; margin-top: 1rem; font: 700 2.2rem/2.7rem var(--sora); color: #fdfbfe; }
  .w-main h1 { order: 2; margin-top: 1rem; width: 28rem; font: 700 2.8rem/3.92rem var(--sora); letter-spacing: -.02em; color: var(--bronze); }
  .w-story { order: 3; --lh: 2.38rem; font: 400 1.7rem/2.38rem var(--sg); letter-spacing: -.01em; color: var(--white); }
  .w-story .sgs { font-family: var(--sgs); }
  .w-questions { order: 4; --lh: 1.68rem; margin: 1.4rem 0 0 1.8rem; width: 24.4rem; font: italic 700 1.2rem/1.68rem var(--sora); letter-spacing: -.01em; color: var(--gold); }
  .w-photo { order: 5; margin-top: 1.3rem; width: 28rem; height: 17.2rem; object-fit: cover; }
  .w-quote { order: 6; margin-top: 1.4rem; width: 28rem; height: 14.4rem; border: 2px solid var(--white); padding: .8rem 0 0 .8rem; font: 700 1.9rem/2.47rem var(--sora); letter-spacing: .01em; color: var(--light); }
  .w-center { order: 7; --lh: 2.38rem; margin-top: .1rem; text-align: center; font: 400 1.7rem/2.38rem var(--sgs); letter-spacing: -.01em; color: var(--white); }
  .w-more { order: 8; margin-top: 1.2rem; text-align: center; font: 700 2rem/2.6rem var(--sora); color: var(--bronze); }
  .w-created { order: 9; margin-top: 1.2rem; text-align: center; font: 400 1.7rem/2.38rem var(--sgs); letter-spacing: -.01em; color: var(--white); }
  .w-built { order: 10; margin-top: 1.3rem; text-align: center; font: 700 2rem/2.6rem var(--sora); color: var(--gold); }
  .w-main .btn { order: 11; margin: 2rem auto 0; width: 16rem; height: 4.2rem; font-size: 1.49333rem; line-height: 2.09067rem; }

  /* ---- principles ---- */
  .pr-page { background: var(--bronze); }
  .pr-main { background: var(--navy); }
  .pr-intro .frame { padding: 3.8rem 0 0; }
  .pr-intro h1 { margin-left: 2rem; width: 28rem; font: 700 2.7rem/3.24rem var(--sora); color: var(--light); }
  .pr-intro h1 .c-bronze { color: var(--bronze); }
  .pr-intro p { margin: 4rem 0 0 3rem; width: 26rem; font: 400 1.6rem/2.88rem var(--sgs); color: var(--light); }
  .pr-intro .m-strip { margin-top: 5.5rem; }
  .pr-intro .m-strip + .m-strip { margin-top: 1rem; }
  .pr-list { padding-top: 1rem; }
  .pr-item { position: relative; padding: 2rem 0 2rem; }
  .pr-num { margin-left: 2rem; font: 700 3.3rem/3.96rem var(--helv); color: var(--bronze); }
  .pr-icon { width: 6rem; height: 5.7rem; margin: 1.1rem auto 0; }
  .pr-body { --lh: 3.22rem; margin: 1rem 0 0 4.4rem; width: 23.3rem; font: 400 2.3rem/3.22rem var(--sgs); letter-spacing: -.01em; }
  .pr-body h2 { font: 700 2.3rem/2.53rem var(--sora); color: var(--white); margin-bottom: 2.63rem; }
  .pr-body .sg { font-family: var(--sg); }
  .pr-body .tight { line-height: 2.53rem; letter-spacing: -.02em; }
  .pr-rule { margin: 2rem 0 0 2rem; width: 28rem; border-top: 3px solid var(--bronze); height: .5rem; }
  .pr-cta { padding: 1rem 0 2rem; }
  .pr-cta .btn { margin: 0 auto; width: 16rem; height: 4.2rem; font-size: 1.49333rem; line-height: 2.09067rem; }
  .c1 { color: var(--white); } .c2 { color: #fdfbfe; } .c3 { color: var(--light); }

  /* ---- demo ---- */
  .d-main { background: var(--bronze); padding-top: 6rem; border-bottom: 1rem solid #fff; }
  .d-left { background: var(--navy); height: 37.5rem; position: relative; }
  .d-left h1 { position: absolute; left: 2rem; top: 2rem; width: 28rem; font: 700 2.8rem/3.5rem var(--sora); color: #fffffe; }
  .d-left hr { position: absolute; left: 14.1rem; top: 18rem; width: 3.8rem; margin: 0; border: 0; border-top: 3px solid var(--light); }
  .d-left .rt { --lh: 2.1rem; position: absolute; left: 2rem; top: 19.5rem; width: 28rem; font: 400 1.6rem/2.1rem var(--sgs); color: var(--white); }
  .d-right { background: var(--navy); height: 73.8rem; margin: 3rem 0 9rem; position: relative; }
  .demo-form { position: absolute; left: 2rem; top: 2.5rem; width: 28rem; }
  .demo-form .fld { position: absolute; left: 1rem; width: 26rem; }
  .demo-form label { font-size: 1.6rem; line-height: 1.6rem; margin-bottom: .8rem; }
  .demo-form input, .demo-form select { height: 3.6rem; font-size: 1.6rem; }
  .fd-first { top: 1rem; } .fd-last { top: 8rem; } .fd-email { top: 15rem; } .fd-phone { top: 22rem; } .fd-company { top: 29rem; } .fd-contact { top: 36rem; }
  .demo-form .f-submit { position: absolute; left: 1rem; top: 43rem; width: 26rem; }
  .demo-form button[type="submit"] { height: 4.2rem; font-size: 1.86667rem; }
  .form-status { position: absolute; left: 1rem; top: 49rem; width: 26rem; font-size: 1.6rem; line-height: 1.4; }
  .demo-form .cf-box { left: 1rem; top: 57rem; }
}