/* Global chrome -----------------------------------------------------------
   Lifted from the head style block the prototypes share. Values are
   reproduced exactly; the inline style attributes are not.

   Everything here is intentionally global rather than component-scoped: the
   responsive behaviour is driven by data-* hooks that the style guide and
   audit.js both refer to by name, and the @media overrides use !important
   against them exactly as the prototypes do.
-------------------------------------------------------------------------- *//* Design tokens -----------------------------------------------------------
   Built from handoff/style-guide.md, not re-derived from the prototypes.
   The prototypes also carry the Roofstock product palette inside their
   data-audit="product-ui" regions; none of those hexes belong here.

   Note: the cover-page eyebrow ink is deliberately NOT defined here. It
   belongs to the display scale and is set in cover.css, so it never reaches
   the CSS a case study page loads. (Naming the hex in this comment would be
   enough for the drift audit to report it on a case study page.)
-------------------------------------------------------------------------- */

:root {
  /* Backgrounds and ink */
  --c-page:            #FFFFFF;
  --c-rose-near-white: #FEFBFB;
  --c-ink:             #1B302A;
  --c-body:            #4E625B;
  --c-meta:            #566661;
  --c-meta-soft:       #647670;
  --c-hairline:        #E9E9E6;
  --c-divider:         #E3EDE7;
  --c-cover-fill:      #F2F2EF;
  --c-cover-border:    #E8E8E4;

  /* Brand hues (from the logo — do not introduce new ones) */
  --c-mint:       #7BD8B0;
  --c-periwinkle: #BFB2EF;
  --c-rose:       #EDAEC3;
  --c-apricot:    #E7B87F;

  /* Skill-icon extensions only */
  --c-blue:      #8FC9E8;
  --c-soft-gold: #E3CE7C;

  /* Accents in use */
  --c-btn-fill:        #C4F0DA;
  --c-btn-label:       #123028;
  --c-btn-hover:       #9FE0C2;
  --c-btn-2-border:    #D5E4DB;
  --c-clarity:         #7A6AD0;
  --c-link-hover:      #8B7BD8;
  --c-mint-on-white:   #0E7A55;

  /* Case-study additions, grouped by meaning */
  --c-rose-ink:    #A83355;
  --c-rose-tint:   #F3D5DF;
  --c-mint-ink:    #0E7A55;
  --c-mint-tint:   #C9E9D9;
  --c-mint-wash:   #EEF8F3;
  --c-lilac-ink:   #6B5BA8;
  --c-lilac-mid:   #BFB2EF;
  --c-lilac-wash:  #F4F2FB;
  --c-apricot-ink: #8F6224;
  --c-apricot-wash:#FBF1E4;
  --c-apricot-line:#EFD9B6;
  --c-micro-label: #8B9A94;

  /* Surfaces and hairlines */
  --c-surface-1: #F4F4F2;
  --c-surface-2: #FBFBFA;
  --c-surface-3: #F1F1EE;
  --c-line-2:    #EDEDEA;
  --c-line-3:    #DADAD5;

  /* Type */
  --font-display: 'Figtree', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Case-study type scale */
  --t-h1:        clamp(38px, 8.5vw, 68px);
  --t-h2:        clamp(30px, 4vw, 40px);
  --t-statement: clamp(23px, 3vw, 30px);
  --t-intro:     clamp(17px, 1.75vw, 20px);
  --t-body:      clamp(16px, 1.6vw, 18px);
  --t-eyebrow:   clamp(11.5px, 1.15vw, 13px);

  /* Layout */
  --gutter:     max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2));
  --block:      clamp(80px, 12vw, 136px);
  --pair-gap:   88px;
  --pair-row:   34px;
  --copy-gap:   22px;
  --cols3-gap:  48px;
  --card-gap:   24px;

  /* Motion */
  --ease-rise: cubic-bezier(0.16, 0.84, 0.28, 1);
  /* The overshoot curve the prototypes use for reveals, word masks and the
     project-cover hover. Copied verbatim; it is load-bearing for the feel. */
  --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 100%);
}

/* Base -------------------------------------------------------------------- */

body { margin: 0; background: #FFFFFF; }
a { color: #1B302A; text-decoration: none; }
a:hover { color: #7A6AD0; }

/* The root wrapper every prototype opens with. */
[data-page] {
  width: 100%;
  background: #FFFFFF;
  color: #1B302A;
  font-family: 'DM Sans', sans-serif;
}

/* Scroll reveal ------------------------------------------------------------
   The rise distance differs by page: the case studies and the case-studies
   index rise 22px, the homepage rises 30px. Pages set --rise where they
   differ from the 22px default.
-------------------------------------------------------------------------- */

[data-rise] {
  transition:
    transform 1150ms linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 100%),
    opacity 900ms ease;
}
[data-rise]:not([data-shown]) {
  opacity: 0;
  transform: translateY(var(--rise, 22px));
}

/* Hero headline per-word mask reveal --------------------------------------- */

[data-mask] > span {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}
[data-mask] > span > span {
  display: inline-block;
  transition: transform 1150ms linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 100%);
}
[data-mask]:not([data-shown]) > span > span { transform: translateY(110%); }

/* Nav ---------------------------------------------------------------------- */

[data-navwrap] { position: relative; }

[data-nav] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2));
}

[data-navlogo] { display: flex; align-items: center; }
[data-navlogo] img { display: block; }

[data-navtoggle] {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
[data-navtoggle]:hover { background: #F4F4F2; }
[data-navtoggle] > span { display: flex; flex-direction: column; gap: 4px; }
[data-navtoggle] > span > span {
  width: 18px;
  height: 1.5px;
  background: #1B302A;
  transition: transform 260ms cubic-bezier(0.16, 0.84, 0.28, 1), opacity 160ms ease;
}
[data-navtoggle][data-open="open"] > span > span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[data-navtoggle][data-open="open"] > span > span:nth-child(2) { opacity: 0; }
[data-navtoggle][data-open="open"] > span > span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

[data-nav-links] {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.9vw, 36px);
  font-size: clamp(13.5px, 1.35vw, 15px);
  color: #4E625B;
}

/* The "Get in touch" pill. Its label colour is restated on :hover because the
   prototype carries it as an inline style, which outranks the global a:hover
   rule; as a stylesheet rule it would otherwise lose to it. */
[data-nav-cta] {
  padding: clamp(9px, 1.15vw, 11px) clamp(16px, 2.2vw, 22px);
  border-radius: 99px;
  background: #C4F0DA;
  color: #123028;
  font-weight: 500;
  font-size: clamp(12.5px, 1.3vw, 14px);
}
[data-nav-cta]:hover { background: #9FE0C2; color: #123028; }

/* Footer ------------------------------------------------------------------
   Present on the homepage and the case-studies index only; the three case
   studies end on their "Next" card. The homepage sets 14.5px over this.
-------------------------------------------------------------------------- */

[data-foot] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2));
  border-top: 1px solid #E3EDE7;
  font-size: 15px;
  color: #647670;
  font-weight: 300;
}
[data-contact-links] { display: flex; gap: 26px; }

/* Responsive --------------------------------------------------------------- */

@media (max-width: 860px) {
  [data-nav] { flex-wrap: wrap; gap: 18px; }
  [data-nav-links] { gap: 20px !important; font-size: 14px !important; }
  /* One footer on every page: it wraps to two left-aligned rows rather than
     staying on one line. Previously the homepage wrapped, the case-studies
     index went to a centred column, and the three case studies did neither. */
  [data-foot] { flex-wrap: wrap; gap: 14px; }
}

@media (max-width: 760px) {
  [data-navlogo] { position: relative; z-index: 80; }
  [data-navtoggle] { display: flex !important; position: relative; z-index: 80; }
  [data-nav-links] {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center;
    gap: clamp(14px, 3.4vw, 22px) !important;
    padding: 0 clamp(24px, 6vw, 80px);
    background: #FFFFFF;
    z-index: 70;
    font-size: inherit !important;
  }
  [data-nav-links] > a {
    font-family: 'Figtree', sans-serif;
    font-size: clamp(30px, 8.4vw, 44px) !important;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #1B302A;
  }
  [data-nav-links] > a:last-child {
    margin-top: clamp(18px, 5vw, 34px);
    font-size: clamp(14px, 3.9vw, 16px) !important;
    font-weight: 500 !important;
    padding: 14px 26px !important;
  }
  [data-nav-links][data-open="closed"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rise],
  [data-mask] > span > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}