/* ==========================================================================
   morganavenia.com

   A cooler, quieter cut of the ClearLeaf system. Same typefaces, same arc
   geometry, sky-forward instead of tomato-forward.

   Spacing is structural, not inline. If something needs more room, change
   the rule here rather than adding a style attribute in the markup.

   To match the brand guide exactly, replace the hex values in :root and in
   [data-theme="clearleaf"]. Nothing else needs to change.
   ========================================================================== */

:root {
  --ink:        #26231f;
  --ink-soft:   #4d463d;
  --ink-faint:  #8b8377;
  --paper:      #ece8e0;
  --paper-lift: #f5f2ec;
  --sky:        #3f6e85;
  --sky-soft:   #8fb3c4;
  --tomato:     #ce4327;
  --apricot:    #e4a363;
  --rule:       #cbc4b7;

  --shell:  76rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --rail-w: 9rem;

  --step-0: .925rem;
  --step-1: 1.0625rem;
  --step-2: clamp(1.3rem, 2.2vw, 1.55rem);
  --step-3: clamp(1.7rem, 3.4vw, 2.3rem);
  --step-4: clamp(2.75rem, 6vw, 5.25rem);

  --space-band: clamp(3.75rem, 7vw, 6.5rem);
  --space-lg:   clamp(1.25rem, 2.5vw, 2rem);
  --space-md:   clamp(.9rem, 1.5vw, 1.2rem);

  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* the agency arm runs warm. temperature is the tell that you've crossed over */
[data-theme="clearleaf"] {
  --ink:        #3d2419;
  --ink-soft:   #6b4a38;
  --ink-faint:  #a08a78;
  --paper:      #f6efe4;
  --paper-lift: #fdf9f2;
  --sky:        #7aa8bf;
  --sky-soft:   #b7d0dd;
  --tomato:     #e1543a;
  --apricot:    #f0a868;
  --rule:       #ddccb8;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 20rem;
  background:
    radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--sky-soft) 16%, transparent), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--step-1);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.mono {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .145em;
  text-transform: uppercase;
  line-height: 1.5;
}

.lede {
  font-size: var(--step-2);
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 48ch;
  letter-spacing: -0.005em;
}

.dim { color: var(--ink-soft); }

.h-sec { font-size: var(--step-3); max-width: 29ch; }

/* ==========================================================================
   Shell, bands, rail
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--space-band); }
.band + .band { border-top: 1px solid var(--rule); }

/* the rail is an axis. labels sit in the margin like scale markings. */
.rail {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.25rem);
  align-items: start;
}

.rail-label {
  color: var(--ink-faint);
  padding-top: .45rem;
  margin: 0;
  position: relative;
}

.rail-label::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 1px;
  margin-bottom: .8rem;
  background: var(--sky-soft);
}

/* a rail used as a section header, with its content in a sibling shell */
.band > .shell:first-child > .rail { margin-bottom: 1.5rem; }

@media (max-width: 46rem) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .rail-label { padding-top: 0; }
  .rail-label::before { margin-bottom: .65rem; }
}

/* vertical rhythm inside a rail body, so the markup carries no margins */
.h-sec + p,
.h-sec + .stack,
.stack > * + * { margin-top: var(--space-md); }

.h-sec + .grid-2,
.h-sec + .spec,
p + .grid-2,
p + .spec,
.stack .grid-2 { margin-top: var(--space-lg); }

.h-sec + .product-rows { margin-top: var(--space-lg); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.site-head.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 20px -12px color-mix(in srgb, var(--ink) 60%, transparent);
}

.site-head .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex: none;
}

.mark svg {
  color: var(--sky);
  flex: none;
  transition: transform .4s var(--ease-out);
}

.mark:hover svg { transform: translateY(-2px); }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
}

.site-nav a {
  position: relative;
  text-decoration: none;
  font-size: var(--step-0);
  color: var(--ink-soft);
  padding-block: .35rem;
  white-space: nowrap;
  transition: color .25s var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}

.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }

.status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .38rem .78rem;
  color: var(--ink-soft);
  flex: none;
}

.status::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--sky);
  animation: pulse 2.8s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

@media (max-width: 60rem) {
  .status { display: none; }
}

@media (max-width: 44rem) {
  .site-head .shell { flex-wrap: wrap; min-height: 0; padding-block: .75rem; }
  .site-nav {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 92%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--rule) 72%, transparent);
    padding-top: .45rem;
  }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-block: clamp(4.25rem, 9vw, 8rem) clamp(3.75rem, 7vw, 6rem); }

/* the hero already carries bottom padding, so the first band after it does
   not need a full one. without this the seam runs to nearly 10rem. */
.hero + .band { padding-top: var(--space-band); }

/* a hero that is the whole page needs room before the footer */
.hero:last-child { min-height: calc(100svh - 10rem); padding-bottom: clamp(4rem, 9vw, 8rem); }

.hero > p.mono:first-child { margin-bottom: 1.15rem; }

.hero h1 {
  font-size: var(--step-4);
  max-width: 18ch;
  margin-bottom: 1.1rem;
}

.hero h1 em { font-style: normal; color: var(--sky); }

.hero .lede:not(:last-child) { margin-bottom: 1.65rem; }

.hero-readout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .72fr);
  grid-template-areas:
    "eyebrow readout"
    "title readout"
    "lede readout"
    "actions readout";
  column-gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.hero-readout > p.mono:first-child { grid-area: eyebrow; }
.hero-readout > h1 { grid-area: title; }
.hero-readout > .lede { grid-area: lede; }
.hero-readout > .readout {
  grid-area: readout;
  align-self: center;
  margin-top: .25rem;
}
.hero-readout > .btn-row { grid-area: actions; }

@media (max-width: 56rem) {
  .hero-readout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lede" "readout" "actions";
  }
  .hero-readout > .readout { margin-top: .65rem; }
}

/* breadcrumb line */
.hero p.mono a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.hero p.mono a:hover { color: var(--ink); border-bottom-color: currentColor; }

/* ==========================================================================
   The readout: signature element

   Every piece of work on this site opens with the gap between what was
   reported and what actually happened. That gap is the job, so it gets
   the one real animated moment on the page.
   ========================================================================== */

.readout {
  border: 1px solid var(--rule);
  border-radius: .75rem;
  background: var(--paper-lift);
  padding: clamp(1.25rem, 2.8vw, 1.75rem);
  max-width: 34rem;
  box-shadow: 0 24px 60px -46px color-mix(in srgb, var(--ink) 72%, transparent);
}

.readout > p.mono:first-child { margin-bottom: .85rem; }

.readout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .75rem;
  padding-block: .65rem;
}

.readout-row + .readout-row { border-top: 1px dashed var(--rule); }

.readout-key { color: var(--ink-faint); font-size: var(--step-0); }

.readout-val {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.readout-val small {
  font-family: "DM Sans", sans-serif;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
  margin-left: .4rem;
}

.readout-row.is-actual .readout-val { color: var(--tomato); }

.bars { margin-top: 1.15rem; display: grid; gap: .4rem; }

.bar {
  height: .45rem;
  border-radius: 999px;
  background: var(--sky-soft);
  width: var(--w, 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

.bar.is-actual { background: var(--tomato); }

.readout.is-visible .bar { animation: draw 1s var(--ease-out) both; }
.readout.is-visible .bar.is-actual { animation-delay: .3s; }

@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tick-rule {
  height: 10px;
  margin-top: 1rem;
  background-image: repeating-linear-gradient(
    to right, var(--rule) 0 1px, transparent 1px 10px);
  clip-path: inset(0 100% 0 0);
}

.readout.is-visible .tick-rule { animation: sweep 1.1s var(--ease-out) .15s both; }

@keyframes sweep { to { clip-path: inset(0 0 0 0); } }

.readout-note {
  margin-top: .95rem;
  font-size: .92rem;
  color: var(--ink-soft);
  max-width: none;
}

/* ==========================================================================
   Cards and product rows
   ========================================================================== */

.cards,
.product-rows {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: .8rem;
  overflow: hidden;
}

.card,
.product {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) 11rem;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.card {
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.card:hover,
.card:focus-visible {
  background: var(--paper-lift);
  color: var(--ink);
}

.card h3,
.product h3 { font-size: var(--step-2); margin-bottom: .45rem; }

.card > div,
.product > div { max-width: 42rem; }

.card p,
.product p { font-size: .98rem; color: var(--ink-soft); }

/* the title gains a marker on hover, so the row reads as a destination */
.card h3::after {
  content: "\2192";
  display: inline-block;
  margin-left: .5rem;
  color: var(--sky);
  opacity: 0;
  transform: translateX(-.35rem);
  transition: opacity .3s var(--ease), transform .3s var(--ease-out);
}

.card:hover h3::after,
.card:focus-visible h3::after { opacity: 1; transform: translateX(0); }

.card-meta { color: var(--ink-faint); margin: 0; }

/* first meta cell is the client label, last is the figure */
.card > p.card-meta:last-of-type,
.product > p.card-meta:last-of-type {
  text-align: right;
  white-space: nowrap;
  padding-top: .3rem;
}

.card-figure {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--sky);
  display: block;
  letter-spacing: -0.025em;
}

.links { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: 1rem; }

.links a {
  color: var(--sky);
  font-size: .95rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.links a:hover { border-bottom-color: currentColor; }

[data-theme="clearleaf"] .links a { color: var(--tomato); }

a.ext::after {
  content: "\2197";
  font-size: .85em;
  margin-left: .25em;
  display: inline-block;
  transition: transform .3s var(--ease-out);
}
a.ext:hover::after { transform: translate(2px, -2px); }

@media (max-width: 52rem) {
  .card, .product { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .card > p.card-meta:last-of-type,
  .product > p.card-meta:last-of-type { text-align: left; padding-top: .35rem; }
  .card-figure { display: inline; margin-right: .5rem; }
}

/* ==========================================================================
   Panels, specs, tags
   ========================================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.grid-2:has(> :last-child:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  border: 1px solid var(--rule);
  border-radius: .75rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--paper-lift);
  min-height: 100%;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease);
}

.panel:hover { transform: translateY(-2px); border-color: var(--sky-soft); }

.panel h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.panel p { font-size: .98rem; color: var(--ink-soft); }

@media (max-width: 52rem) {
  .grid-2,
  .grid-2:has(> :last-child:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
}

.tag {
  display: inline-block;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .22rem .65rem;
  margin: 0 .3rem .4rem 0;
  color: var(--ink-soft);
}

.spec { list-style: none; padding: 0; margin: 0; }

.spec li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: .9rem;
  border-top: 1px solid var(--rule);
}

.spec li:last-child { border-bottom: 1px solid var(--rule); }
.spec .k { color: var(--ink-faint); }

@media (max-width: 40rem) {
  .spec li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

.arches {
  height: 26px;
  margin-block: 1.1rem;
  background:
    radial-gradient(circle at 13px 26px, var(--tomato) 12px, transparent 12.5px) 0 0/52px 26px repeat-x,
    radial-gradient(circle at 39px 26px, var(--apricot) 12px, transparent 12.5px) 0 0/52px 26px repeat-x;
}

[data-theme="clearleaf"] .card-figure,
[data-theme="clearleaf"] .mark svg { color: var(--tomato); }
[data-theme="clearleaf"] .site-nav a::after { background: var(--tomato); }
[data-theme="clearleaf"] .status::before { background: var(--tomato); }
[data-theme="clearleaf"] .panel:hover { border-color: var(--apricot); }

/* ==========================================================================
   Buttons and forms
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  min-height: 3rem;
  padding: .7rem 1.4rem;
  text-decoration: none;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease);
}

.btn:hover { transform: translateY(-2px); background: var(--sky); border-color: var(--sky); }
.btn:active { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

[data-theme="clearleaf"] .btn:hover { background: var(--tomato); border-color: var(--tomato); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }

.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field label { color: var(--ink-faint); }

.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: .35rem;
  padding: .7rem .8rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
  width: 100%;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--sky);
  background: var(--paper);
  outline: 2px solid color-mix(in srgb, var(--sky) 30%, transparent);
  outline-offset: 1px;
}

:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

.form { max-width: 34rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 2.5rem;
  color: var(--ink-soft);
}

.site-foot .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: baseline;
}

.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.site-foot a { text-decoration: none; font-size: var(--step-0); }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: .6rem; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: .5rem .9rem; border-radius: .3rem;
}

@media (max-width: 38rem) {
  .hero { padding-block: 3.5rem 3.75rem; }
  .hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .readout-row { align-items: start; }
  .readout-val small { display: block; margin-left: 0; text-align: right; }
  .site-foot .shell { align-items: flex-start; }
  .site-foot nav { width: 100%; margin-left: 0; gap: .75rem 1.25rem; }
}

/* ==========================================================================
   Motion

   Restrained on purpose. A page-load sequence on the hero, a soft reveal as
   sections arrive, and the readout counting up. Everything else is hover.
   Without JS nothing is hidden, and reduced-motion turns all of it off.
   ========================================================================== */

/* Elements are pre-hidden by CSS, gated on the .js class set in <head>, so
   nothing paints and then vanishes. The script only adds .is-visible. If the
   script never runs, a failsafe drops the .js class and everything shows. */

.js .band .rail,
.js .cards > *,
.js .product-rows > *,
.js .grid-2 > *,
.js .spec > li {
  opacity: 0;
  transform: translateY(14px);
}

.js .band .rail.is-visible,
.js .is-visible,
.js .is-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js .hero > * { animation: rise .8s var(--ease-out) both; }
.js .hero > *:nth-child(1) { animation-delay: .05s; }
.js .hero > *:nth-child(2) { animation-delay: .14s; }
.js .hero > *:nth-child(3) { animation-delay: .23s; }
.js .hero > *:nth-child(4) { animation-delay: .32s; }
.js .hero > *:nth-child(5) { animation-delay: .41s; }
.js .hero > *:nth-child(6) { animation-delay: .50s; }
.js .hero > *:nth-child(7) { animation-delay: .59s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .band .rail,
  .js .cards > *,
  .js .product-rows > *,
  .js .grid-2 > *,
  .js .spec > li,
  .js .hero > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bar { transform: scaleX(1); animation: none !important; }
  .tick-rule { clip-path: none; animation: none !important; }
  .status::before { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}