/* Platform chrome for the Nagi Solutions CMS layer.
   Kept separate from the concept design so the visual system stays
   exactly as delivered and the editable/admin plumbing can change
   without touching it. */

/* Keyboard skip link. Off-screen until focused. */
.skip-link{position:absolute;left:16px;top:-64px;z-index:10000;background:var(--ink);
  color:#fff;padding:12px 18px;border-radius:8px;font:600 14px/1 system-ui,sans-serif;
  text-decoration:none;transition:top .18s ease}
.skip-link:focus{top:16px}

/* Visible focus for keyboard users, on the concept's accent. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Admin-injected blocks. Empty is free: a placeholder with nothing in it
   must have no height and no margin so an unconfigured page lays out
   exactly as delivered. All spacing belongs to the injected markup. */
.slot:empty,#latest-notes:empty,#reviews:empty{display:block;height:0;margin:0;padding:0}

/* ─────────────────────────────────────────
   ADMIN-INJECTED BLOCKS
   The worker renders three blocks into these pages at request time:
   the Field Notes strip (.ln-*), published reviews (.rv-*) and images
   dropped into a slot (.slot-fig). Their markup is fixed in
   src/_shared/blocks.js and src/_shared/posts.js, so the styling has
   to live here rather than in the concept's own stylesheets.

   Written against the concept's tokens so an injected block looks like
   it was always part of the page. Every rule is scoped to a class the
   worker emits, so none of it applies until something is published.
───────────────────────────────────────── */

/* Field Notes strip */
.ln{background:var(--paper);padding:96px 0;border-top:1px solid var(--line)}
.ln-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.ln-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.ln-eyebrow{font:500 11px/1 ui-monospace,monospace;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ln-hed{font-size:clamp(28px,3.6vw,42px);line-height:1.08;color:var(--ink);margin:0}
.ln-all{font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;white-space:nowrap}
.ln-all:hover{color:var(--accent);border-color:var(--accent)}
.ln-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:24px}
.ln-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s cubic-bezier(.23,1,.32,1)}
.ln-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px -24px rgba(23,37,60,.35)}
.ln-thumb{aspect-ratio:600/315;overflow:hidden;background:var(--paper)}
/* The concept's reset does not constrain images inside injected markup,
   which let these overflow the viewport on a phone. */
.ln-thumb img,.rv img,.slot-fig img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block}
.ln-blank{width:100%;height:100%;display:grid;place-items:center;background:var(--ink)}
.ln-blank span{font:500 11px/1 ui-monospace,monospace;letter-spacing:2.6px;text-transform:uppercase;color:#9aa3a8;padding:0 18px;text-align:center}
.ln-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.ln-tag{font:500 10px/1 ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ln-t{font-size:20px;line-height:1.25;color:var(--ink);margin-bottom:9px}
.ln-s{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:16px;flex:1}
.ln-m{font:400 11px/1 ui-monospace,monospace;letter-spacing:.5px;color:var(--muted)}

/* Published reviews */
.rv{background:var(--paper);padding:96px 0;border-top:1px solid var(--line)}
.rv-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.rv-head{margin-bottom:36px}
.rv-eyebrow{font:500 11px/1 ui-monospace,monospace;letter-spacing:2.6px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.rv-hed{font-size:clamp(28px,3.6vw,42px);line-height:1.08;color:var(--ink);margin:0}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.rv-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.rv-body{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 20px}
.rv-who{display:flex;flex-direction:column;gap:3px}
.rv-name{font-weight:600;font-size:14.5px;color:var(--ink)}
.rv-role,.rv-src{font-size:13px;color:var(--muted)}

/* Image dropped into a slot */
.slot-fig{margin:0}
.slot-fig figcaption{font-size:13px;color:var(--muted);margin-top:10px}

@media(max-width:640px){
  .ln,.rv{padding:64px 0}
  .ln-wrap,.rv-wrap{padding:0 20px}
}


/* ─────────────────────────────────────────
   PORTED SECTIONS
   Content that existed before the redesign and had no equivalent in
   the concept: process steps, FAQs, pricing tiers, local market data.
   Written with the concept's own section/wrap/card vocabulary; these
   rules only add the two patterns it did not already have.
───────────────────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.process-grid .card{display:flex;flex-direction:column}
.process-grid .num{font:500 11px/1 ui-monospace,monospace;letter-spacing:2.4px;color:var(--accent);margin-bottom:14px}
.process-grid h3{font-size:19px;margin-bottom:10px}

/* FAQ. A disclosure rather than a stack of open text, so a long list
   costs one screen instead of five. */










/* Pricing tiers */

.tier{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px;display:flex;flex-direction:column}
.tier-name{font:500 11px/1 ui-monospace,monospace;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.tier-price{font-size:38px;line-height:1;color:var(--ink);margin-bottom:14px}
.tier-desc{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:18px}
.tier ul{margin:0 0 4px;padding:0}
.tier li{font-size:14.5px;line-height:1.85;color:var(--ink);padding-left:18px;position:relative}
.tier li::before{content:'';position:absolute;left:0;top:12px;width:7px;height:1.5px;background:var(--accent)}

@media(max-width:900px){
  .grid4{grid-template-columns:1fr 1fr}
  
}
@media(max-width:560px){ .grid4{grid-template-columns:1fr} }

/* The Ask Atlas button sits bottom-right at z-index 9500, which buried
   the motion toggle completely — 99x34px of overlap, unclickable on
   every page. The toggle moves to the opposite corner rather than the
   FAB, because the FAB's position is the one people are used to. */
.motion-control{right:auto;left:22px}
@media(max-width:720px){.motion-control{left:12px;right:auto}}

/* Case-study stat rows. The concept's .proof band is a full-width white
   strip with its own border, which is right at the top of a page and
   wrong in the middle of one — so these reuse its proportions without
   the band. */
.stat-row{display:flex;flex-wrap:wrap;gap:40px 56px;margin:0 0 34px}
.stat-row strong{display:block;font-size:38px;letter-spacing:-.05em;line-height:1}
.stat-row small{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
@media(max-width:720px){.stat-row{gap:26px 34px}.stat-row strong{font-size:30px}}

/* Field Notes article furniture. These four classes are emitted by the
   worker (share row, pull quote, byline, hero figure) and their CSS used to
   live in notes.css, which the article pages no longer load. Written here in
   the concept's palette rather than the old one. */
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;font-size:13px;color:var(--muted)}
.byline span:first-child{font-weight:600;color:var(--ink)}

.article-figure{margin:0 0 34px}
.article-figure img{width:100%;height:auto;border-radius:20px;display:block}

.fn-quote{margin:40px 0;padding:2px 0 2px 24px;border-left:2px solid var(--accent);max-width:60ch}
.fn-quote p{font-size:23px;line-height:1.42;color:var(--ink);margin:0;letter-spacing:-.02em}

.fn-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:52px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.fn-share-l{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-right:4px}
.fn-share-b{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;padding:0;color:var(--muted);transition:color .2s,border-color .2s,transform .2s}
.fn-share-b:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.fn-share-b svg{width:16px;height:16px;fill:currentColor}
.fn-share-ok{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
@media(prefers-reduced-motion:reduce){.fn-share-b:hover{transform:none}}

/* ─────────────────────────────────────────────────────────────────────────
   Depth and motion.

   The concept ships a lift on .btn and .service-card and almost nothing
   else: .card, the pricing tiers and the note cards had no hover at all,
   and nothing on the page had a resting shadow, so every box sat flat on
   the paper. This gives the whole site one depth scale and one curve.

   Everything here is inside @media(hover:hover), so a touch device never
   gets a hover state stuck on after a tap, and all of it is disabled
   under prefers-reduced-motion. The "Pause motion" toggle already kills
   it through .motion-off in styles.css.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --lift-curve:cubic-bezier(.2,.65,.3,1);
  --lift-fast:.28s;
  --lift-slow:.42s;
  /* one shadow scale, warm-neutral to match the paper rather than pure black */
  --sh-rest:0 1px 2px rgba(32,39,45,.04), 0 6px 16px -10px rgba(32,39,45,.10);
  --sh-hover:0 2px 4px rgba(32,39,45,.05), 0 18px 40px -16px rgba(32,39,45,.22);
  --sh-press:0 1px 2px rgba(32,39,45,.06), 0 4px 10px -6px rgba(32,39,45,.14);
}

/* Boxes sit slightly off the paper at rest and rise when pointed at. */
.card,.note-card,.work-card,.tier,.cta,.atlas-panel,.timeline,.confirmation{
  transition:transform var(--lift-slow) var(--lift-curve),
             box-shadow var(--lift-slow) var(--lift-curve),
             border-color var(--lift-fast) var(--lift-curve);
}
.card,.tier,.cta,.confirmation{box-shadow:var(--sh-rest)}

@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover,.tier:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);border-color:#cfd5d3}
  .card.dark:hover{border-color:#3a4450}
  /* .service-card already lifts 6px in styles.css; give it the shadow too */
  .service-card:hover{box-shadow:var(--sh-hover)}
  .note-card:hover{transform:translateY(-3px)}
  .work-card:hover{transform:translateY(-3px)}
  .work-card:hover .work-image{box-shadow:var(--sh-hover)}
}

/* Images inside a card need the same curve as the card, or the picture
   finishes moving a beat after the box it sits in. */
.work-image img,.studio-image img,.article-figure img{
  transition:transform var(--lift-slow) var(--lift-curve)}
.work-image{transition:box-shadow var(--lift-slow) var(--lift-curve);overflow:hidden}

/* Buttons: a real resting shadow, a deeper one on hover, and a press that
   actually presses. The arrow leans into the direction it points. */
.btn{transition:transform var(--lift-fast) var(--lift-curve),
                box-shadow var(--lift-fast) var(--lift-curve),
                background var(--lift-fast) var(--lift-curve),
                border-color var(--lift-fast) var(--lift-curve);
     box-shadow:var(--sh-rest)}
.btn span[aria-hidden]{transition:transform var(--lift-fast) var(--lift-curve);display:inline-block}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
  .btn:hover span[aria-hidden]{transform:translate(3px,-3px)}
  .btn.primary:hover{box-shadow:0 2px 4px rgba(32,39,45,.10), 0 20px 42px -16px rgba(32,39,45,.45)}
}
.btn:active{transform:translateY(0);box-shadow:var(--sh-press);transition-duration:.08s}

/* Text links: the rule moves with the arrow rather than sitting still. */
.text-link{transition:color var(--lift-fast) var(--lift-curve),
                      border-color var(--lift-fast) var(--lift-curve)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .text-link:hover{color:var(--accent);border-color:var(--accent)}
  .breadcrumbs a{transition:color var(--lift-fast) var(--lift-curve)}
  .breadcrumbs a:hover{color:var(--accent)}
}

/* FAQ rows respond to the pointer before they are clicked. */
.faq summary{transition:color var(--lift-fast) var(--lift-curve)}
.faq summary:after{transition:transform var(--lift-fast) var(--lift-curve),
                              color var(--lift-fast) var(--lift-curve)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .faq summary:hover{color:var(--accent)}
  .faq summary:hover:after{color:var(--accent);transform:scale(1.15)}
}

/* Injected blocks get the same treatment, so an admin-published note or
   review is not the one flat box on the page. */
.ln-card,.rv-card{box-shadow:var(--sh-rest);
  transition:transform var(--lift-slow) var(--lift-curve),box-shadow var(--lift-slow) var(--lift-curve)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .ln-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)}
  .ln-card:hover .ln-thumb img{transform:scale(1.04)}
}
.ln-thumb{overflow:hidden}
.ln-thumb img{transition:transform var(--lift-slow) var(--lift-curve)}

/* Form fields, so typing into them feels connected to the click. */
.field input,.field select,.field textarea{
  transition:border-color var(--lift-fast) var(--lift-curve),
             box-shadow var(--lift-fast) var(--lift-curve)}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 3px rgba(180,61,43,.10)}

@media(prefers-reduced-motion:reduce){
  .card,.note-card,.work-card,.tier,.cta,.btn,.ln-card,.rv-card,
  .work-image img,.studio-image img,.article-figure img,.ln-thumb img{
    transition:none!important;transform:none!important}
}

/* .js-motion .reveal.visible{transform:none} in styles.css is (0,3,0) and
   beats .card:hover at (0,2,0), so once a card had been revealed by the
   scroll observer its hover lift silently stopped working — which is most
   cards on most pages. These restate the lift above that weight. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .js-motion .card.reveal.visible:hover,
  .js-motion .tier.reveal.visible:hover,
  .js-motion .ln-card.reveal.visible:hover{transform:translateY(-4px)}
  .js-motion .note-card.reveal.visible:hover,
  .js-motion .work-card.reveal.visible:hover{transform:translateY(-3px)}
  .js-motion .service-card.reveal.visible:hover{transform:translateY(-6px)}
  .js-motion .cta.reveal.visible:hover{transform:none}
}

/* ─────────────────────────────────────────────────────────────────────────
   Footer.

   Back to the five columns the site had before the redesign — brand,
   Company, Services, Resources, Ventures — in the redesign's own colours
   and type. refinements.css collapses this to a single centred row and
   hides every column but the first, which is the concept package's
   compressed footer; these rules undo that.
   ───────────────────────────────────────────────────────────────────── */
.footer{padding:64px 0 76px;border-top:1px solid var(--line)}
.footer-top{display:grid;grid-template-columns:1.9fr 1fr 1.25fr 1.25fr 1fr;gap:34px 30px;text-align:left}
.footer .footer-top>div:not(:first-child),
.footer .footer-top>div:first-child{display:block}
.footer-top>div:first-child p{margin:16px 0 0!important;text-align:left;font-size:14px;line-height:1.65;color:var(--muted);max-width:34ch}
.footer-top .identity{width:160px;height:auto}
.footer-top h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);opacity:.62;margin:0 0 14px}
.footer-top a:not(.brand){display:block;font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 9px;padding:0;
  transition:color .28s var(--lift-curve),transform .28s var(--lift-curve)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .footer-top a:not(.brand):hover{color:var(--ink);transform:translateX(2px)}
}
.footer-bottom{border-top:1px solid var(--line);margin-top:44px;padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
/* styles.css sets display:block on every footer anchor, which stacked
   Privacy / Terms onto three lines down the middle of the bar. */
.footer .footer-bottom a:not(.brand){display:inline;margin:0;color:var(--muted)}
.footer .footer-bottom a:not(.brand):hover{color:var(--ink)}

@media(max-width:1040px){
  .footer-top{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
  .footer-top>div:first-child{grid-column:1 / -1}
  .footer-top>div:first-child p{max-width:58ch}
}
@media(max-width:720px){
  .footer{padding:46px 0 22px}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px 22px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:36px}
}