/* ===========================================================================
   The cRUD Company holding page.
   Self-contained: every rule below is taken from the production stylesheets
   (site.css, sections.css) and trimmed to what this one page uses. Nothing is
   loaded from the full website at runtime.
   =========================================================================== */

/* Inter, self-hosted: one variable file per character set covers weights 400 to 700. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --teal-black:          #081817;
  --teal-black-hover:    #0F302E;
  --teal-black-pressed:  #030C0B;
  --identity:            #306F75;
  --identity-strong:     #214F55;
  --identity-on-dark:    #9CC9C5;
  --teal-soft:           #D6E7E5;
  --teal-canvas:         #F3F8F7;
  --white:               #FFFFFF;

  --text-primary:        #081817;
  --text-secondary:      #52606D;
  --text-muted:          #5C6672;

  --radius-button:       10px;
  --radius-banner:       32px;

  --shadow-cta-light:        0 2px 3px rgba(8,24,23,0.10), 0 6px 14px -4px rgba(8,24,23,0.18);
  --shadow-cta-light-hover:  0 3px 5px rgba(8,24,23,0.12), 0 12px 22px -6px rgba(8,24,23,0.24);
  --shadow-cta-light-active: 0 1px 2px rgba(8,24,23,0.14);
  --shadow-frame-light:      inset 0 0 26px rgba(8,24,23,0.13);

  --t-fast:     120ms;
  --t-standard: 180ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* the shell: page inset, border thickness and outer radius */
  --frame:        16px;
  --frame-border: 32px;
  --frame-radius: 64px;

  /* one viewport less the shell band top and bottom; dvh follows mobile
     browser chrome, the vh line is the fallback for engines without dvh */
  --view: calc(100vh - (var(--frame) * 2));
  --view: calc(100dvh - (var(--frame) * 2));

  --open-pad-y: clamp(28px, 4vh, 64px);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* the shell steps down in thickness on smaller screens, as on the full website */
@media (max-width: 1023px) {
  :root { --frame: 12px; --frame-border: 24px; --frame-radius: 48px; }
}
@media (max-width: 767px) {
  :root { --frame: 8px; --frame-border: 16px; --frame-radius: 36px; }
}
@media (max-width: 429px) {
  :root { --frame: 6px; --frame-border: 12px; --frame-radius: 28px; }
}

/* =========================== base ======================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--white); }

body {
  margin: 0;
  padding: var(--frame);
  background: var(--white);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(48, 111, 117, 0.38);
}

/* ===================== the page shell ===================================== */

.page-frame {
  position: fixed;
  inset: calc(var(--frame) * -1);
  border: var(--frame-border) solid var(--white);
  border-radius: var(--frame-radius);
  pointer-events: none;
  z-index: 40;
  box-shadow: var(--shadow-frame-light);
}

/* iOS Safari moves its visual viewport under the status bar and the floating
   toolbar, so fixed top and bottom edges cut across the page. On narrow WebKit
   touch layouts the shell keeps only its side rim. */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (max-width: 1023px) and (max-height: 1023px) {
    .page-frame {
      border-top-width: 0;
      border-bottom-width: 0;
      border-radius: 0;
    }
  }
}

/* ===================== the opening panel ================================== */
/* The Resources opening: white centre easing to pale brand teal. min-height,
   never height, so zoom or a short screen lets the page grow and scroll. */

.hold {
  position: relative;
  min-height: var(--view);
  display: flex; flex-direction: column;
  background-color: #D6E7E5;
  background-image: radial-gradient(
    120% 90% at 50% 45%,
    #FFFFFF 0%,
    #F3F8F7 42%,
    #D6E7E5 74%,
    #BCDAD7 100%
  );
  border-radius: var(--radius-banner);
  padding:
    calc(var(--open-pad-y) + env(safe-area-inset-top, 0px))
    calc(24px + env(safe-area-inset-right, 0px))
    calc(clamp(16px, 3vh, 32px) + env(safe-area-inset-bottom, 0px))
    calc(24px + env(safe-area-inset-left, 0px));
}

.hold__body {
  position: relative; z-index: 1;
  margin: auto;
  width: 100%; max-width: 46rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.hold__logo {
  width: 104px; height: 52px; object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  margin-bottom: clamp(16px, 4vh, 40px);
}

.hold__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--identity-strong); margin-bottom: 14px;
}

.hold h1 {
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text-primary);
}

.hold__text {
  margin-top: 18px; max-width: 37rem;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6;
  color: var(--text-secondary);
}

.hold__cta { margin-top: clamp(22px, 4vh, 34px); max-width: 100%; }

.hold__foot {
  position: relative; z-index: 1;
  margin-top: clamp(20px, 4vh, 32px);
  text-align: center;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}

/* ============ the highlighted phrase ====================================== */

.hl {
  display: inline-block;
  background: var(--identity-on-dark);
  color: var(--teal-black);
  border-radius: 14px;
  padding: 0 14px;
  margin: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:where(*):has(> .hl) { isolation: isolate; }
.hl { position: relative; z-index: -1; }
.hl__t { position: relative; z-index: 1; }
.hl--flow { display: inline; padding: 0 10px; margin: 0; }
.hl-end { white-space: nowrap; }
.hl-end .hl { white-space: normal; }

/* ============ drifting particle field (light variant, no comet) =========== */

.hero__field {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden; overflow-anchor: none;
  border-radius: inherit;
}
.hero__field .pdot { position: absolute; border-radius: 50%; background: var(--identity-on-dark); will-change: transform; }
.hero__field .pdot.is-soft { filter: blur(1.5px); }
.hero__field--light .pdot { background: var(--teal-black); }

/* =========================== button ====================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  padding: 14px 22px; min-height: 46px;
  border: 1px solid transparent; border-radius: var(--radius-button);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-standard) var(--ease),
              transform var(--t-standard) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn-lg { font-size: 16px; padding: 17px 28px; min-height: 54px; }

.btn-primary {
  background: var(--teal-black); color: var(--white);
  box-shadow: var(--shadow-cta-light);
}
.btn-primary:hover  { background: var(--teal-black-hover); box-shadow: var(--shadow-cta-light-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--teal-black-pressed); box-shadow: var(--shadow-cta-light-active); transform: translateY(1px); }
/* keeps the raised shadow and adds the soft brand ring for keyboard focus */
.btn-primary:focus-visible { box-shadow: var(--shadow-cta-light), 0 0 0 3px rgba(48, 111, 117, 0.38); }

/* a very narrow screen keeps the address on one line with a little less padding */
@media (max-width: 359px) {
  .hold__cta .btn { font-size: 15px; padding-inline: 18px; }
}

/* short screens such as a phone held in landscape: the same content, set closer
   together so it still fits one screen; anything shorter simply scrolls */
@media (max-height: 500px) {
  .hold { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hold__logo { width: 80px; height: 40px; margin-bottom: 8px; }
  .hold__eyebrow { margin-bottom: 6px; }
  .hold h1 { font-size: clamp(28px, 4.2vw, 40px); }
  .hold__text { margin-top: 10px; }
  .hold__cta { margin-top: 14px; }
  .hold__foot { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover, .btn-primary:active { transform: none; }
}