@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("https://unpkg.com/prewindcss@1.3.1");

@layer styles {
  /* Shared proportions for the small, single-purpose owner screens. */
  .admin-access { max-width:29rem; margin:clamp(0rem,4vh,3rem) auto; padding:var(--space-lg); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--white); box-shadow:0 8px 32px rgb(0 0 0 / .035); }
  .admin-access > h1 { letter-spacing:-.035em; }
  .admin-access > p { font-size:var(--text-base); }
  .admin-access > p:last-child { font-size:max(.875rem,var(--text-sm)); }
  .container { min-width:0; max-width:100%; }
  .admin-access form { margin-block:var(--space-lg); }
  .admin-access .form-field { margin-bottom:var(--space-md); font-size:var(--text-sm); }
  .admin-access input { font-size:max(1rem,var(--text-base)); }
  .admin-access .code-input { max-width:none; }
  .admin-access [role="alert"],.admin-access [role="status"] { padding:var(--space-sm); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--lighter); }
  main > .container > h1 { max-width:20ch; }
  main > .container > h1:first-child { margin-top:0; }
  main > .container > p { max-width:58ch; }
  .desktop-navigation { display:flex; gap:var(--space-md); }
  .mobile-menu-toggle { display:none; align-items:center; justify-content:center; width:48px; height:48px; padding:8px; border:0; background:transparent; color:var(--black); }
  .mobile-menu-toggle:hover { background:transparent; }
  .mobile-menu-toggle span { display:block; width:30px; height:22px; background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat; }
  #mobile-navigation { margin:0 0 0 auto; inset:var(--flea-toolbar-height,0px) 0 0; width:min(22rem,100%); height:calc(100dvh - var(--flea-toolbar-height,0px)); overflow:auto; padding:var(--space-md); border:0; background:var(--white); color:var(--black); opacity:0; transform:translateX(24px); }
  #mobile-navigation:popover-open { opacity:1; transform:translateX(0); }
  #mobile-navigation::backdrop { inset:var(--flea-toolbar-height,0px) 0 0; background:#0005; opacity:0; }
  #mobile-navigation:popover-open::backdrop { opacity:1; }
  @media (prefers-reduced-motion:no-preference) {
    #mobile-navigation { transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    #mobile-navigation::backdrop { transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    @starting-style {
      #mobile-navigation:popover-open { opacity:0; transform:translateX(24px); }
      #mobile-navigation:popover-open::backdrop { opacity:0; }
    }
  }
  #mobile-navigation nav { display:flex; flex-direction:column; gap:var(--space-md); }
  #mobile-navigation button[popovertargetaction="hide"] { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; color:inherit; font-size:0; }
  #mobile-navigation button[popovertargetaction="hide"]::before,
  #mobile-navigation button[popovertargetaction="hide"]::after { content:""; position:absolute; top:50%; left:50%; width:24px; height:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
  #mobile-navigation button[popovertargetaction="hide"]::after { transform:translate(-50%,-50%) rotate(-45deg); }
  @media (max-width: 640px) {
    .desktop-navigation,header > nav > a[href="/admin"] { display:none; }
    .mobile-menu-toggle { display:inline-flex; margin-left:auto; }
  }
  .contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--space-xl); }
  @media (max-width: 760px) { .contact-layout { grid-template-columns:minmax(0,1fr); } }
  .team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
  .team-grid article > :last-child > p:last-child { margin-bottom:0; }
  @media (max-width: 900px) { .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width: 560px) { .team-grid { grid-template-columns:minmax(0,1fr); } }
  /* Global styles go here */
  nav > a,.desktop-navigation > a {
    text-decoration: none;
    color: var(--darker);
  }

  /* Full-height shell with independently scrolling navigation and editing. */
  .admin-shell {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .admin-main { min-height: 0; overflow: auto; }
  .admin-workspace {
    height: 100%;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .admin-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .admin-page-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
  .admin-page-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
  .admin-page-list a[aria-current="page"] {
    background: var(--white);
    color: var(--black);
    font-weight: var(--font-semibold);
  }
  .admin-content { min-width: 0; overflow-y: auto; }
  .admin-panel { max-width: 56rem; }
  @media (max-width: 640px) {
    .admin-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 30dvh) minmax(0, 1fr); }
  }

  /* Shared ink-and-marigold defaults. Layout and spacing use Prewind utilities;
     custom rules below carry the paper folds, route geometry and content grids. */
  html { scroll-behavior:smooth; scroll-padding-top:7rem; scrollbar-color:var(--black) var(--lighter); }
  ::selection { background:var(--brand-2); color:var(--black); }
  h1,h2,h3 { font-weight:700; }
  body > header { z-index:20; border-bottom:1px solid rgb(20 26 24 / .12); }
  header > nav { min-height:5.25rem; }
  .desktop-navigation { margin-left:auto; align-items:center; }
  .desktop-navigation > .ui-brand-1,#mobile-navigation .ui-brand-1 { color:var(--white); }
  .skip-link { position:fixed; top:.75rem; left:.75rem; z-index:100; padding:.7rem 1rem; background:var(--black); color:var(--white); transform:translateY(-160%); }
  .skip-link:focus { transform:translateY(0); }
  .opening { padding-block:clamp(2rem,4vw,4rem) var(--space-xl); }
  .opening h1 { font-size:clamp(2.35rem,7.2vw,6rem); line-height:1.02; letter-spacing:-.04em; margin:0 0 var(--space-lg); text-wrap:initial; }
  .opening h1 > span { display:block; }
  .opening h1 > span:last-child { white-space:nowrap; }
  .offer-copy { font-size:clamp(1.3rem,2.35vw,2rem); line-height:1.35; margin:0 0 var(--space-sm); max-width:32ch; }
  .offer .ui-button { min-width:12rem; }
  .offer-price { border-left:1px solid rgb(20 26 24 / .3); padding-left:var(--space-lg); }
  .price { font-family:var(--font-heading); font-size:clamp(2.7rem,4vw,3.5rem); line-height:1.1; font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums; margin:0 0 var(--space-xs); }
  .price span { font-size:.5em; letter-spacing:-.02em; }
  .offer-includes { margin:var(--space-sm) 0 var(--space-md); max-width:75ch; }
  .assurance { border:1px solid rgb(20 26 24 / .32); border-radius:var(--rounded); padding:var(--space-sm) var(--space-md); max-width:44rem; }
  .assurance h2 { font-size:clamp(1.4rem,2vw,1.9rem); margin:0 0 var(--space-2xs); }
  .assurance p { margin:0; font-size:1rem; line-height:1.5; }
  .guide-wrap { background:linear-gradient(var(--brand-2) 0 40%,var(--lighter) 40% 100%); padding-block:var(--space-sm) var(--space-lg); overflow:hidden; }
  .service-guide { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); filter:drop-shadow(0 16px 12px rgb(39 35 19 / .15)); margin:var(--space-sm) 0 var(--space-lg); isolation:isolate; }
  .guide-fold { --fold-angle:-2.5deg; position:relative; min-width:0; padding:2rem 1.8rem 2.5rem; background-color:var(--white); background-image:linear-gradient(90deg,rgb(67 57 25 / .025),transparent 35%,rgb(67 57 25 / .055)),url("/images/ivory-paper.jpg"); background-size:auto,38rem; transform:skewY(var(--fold-angle)); }
  .guide-fold:nth-child(even) { --fold-angle:2.5deg; background-image:linear-gradient(90deg,rgb(67 57 25 / .065),transparent 65%,rgb(67 57 25 / .025)),url("/images/ivory-paper.jpg"); }
  .guide-fold h2 { font-size:clamp(1.3rem,2.05vw,1.8rem); letter-spacing:-.035em; margin:0 0 var(--space-xs); text-wrap:initial; }
  .guide-fold p { min-height:3.1em; font-size:clamp(.95rem,1.3vw,1.1rem); line-height:1.45; margin:0; }
  .guide-art { margin-top:var(--space-md); height:5.7rem; }
  .guide-art svg { width:5.25rem; height:5.25rem; }
  .guide-stop { position:relative; z-index:3; display:block; width:1rem; height:1rem; margin:var(--space-xs) auto 0; background:var(--brand-2); border-radius:50%; outline:5px solid var(--white); }
  .care-route { z-index:2; overflow:visible; pointer-events:none; }
  .care-route path { fill:none; stroke:var(--black); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linecap:round; }
  .care-route [data-trace] { stroke:var(--brand-2); stroke-width:3; }
  .guide-caption { font-size:.8rem; color:var(--dark); }
  .replay { padding:.4rem .6rem; min-height:2.75rem; border:0; background:transparent; color:var(--black); font-size:.8rem; }
  .section-lead { margin-bottom:var(--space-lg); }
  .section-lead h2 { margin-top:0; max-width:25ch; }
  .section-lead p { max-width:60ch; }
  .plan { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-block:1px solid var(--light); margin:0; }
  .plan li { margin:0; padding:var(--space-lg) 0; }
  .plan li + li { margin-left:var(--space-lg); border-left:1px solid var(--light); padding-left:var(--space-lg); }
  .plan h3 { font-size:clamp(1.4rem,2.2vw,1.9rem); margin:0 0 var(--space-xs); }
  .plan p { margin:0; max-width:42ch; }
  .step-number { flex:none; width:3.3rem; height:3.3rem; border-radius:50%; background:var(--brand-2); font:700 1.8rem/1 var(--font-heading); }
  .founder-section { background:var(--brand-1-light); }
  .founder { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:var(--space-xl); }
  .founder figure img { aspect-ratio:4 / 4.2; object-fit:cover; object-position:48% 35%; }
  .founder figcaption { margin-top:var(--space-xs); font-size:.8rem; color:var(--dark); }
  .founder h2 { margin-top:0; }
  .relationship-quote { margin:var(--space-lg) 0 0; padding:var(--space-md) 0 0; border:0; border-top:1px solid var(--light); }
  .relationship-quote p { font-family:var(--font-heading); font-size:1.45rem; line-height:1.35; }
  .relationship-quote cite,.relationship-quote small { display:block; font-style:normal; font-size:.8rem; color:var(--dark); }
  .relationship-quote small { margin-top:var(--space-2xs); }
  .conversation-layout,.scope-grid,.closing-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xl); }
  .conversation-layout h2 { margin-top:0; }
  .conversation-copy > p:first-child { margin-top:0; }
  .handoff-note { border-top:1px solid var(--light); padding-top:var(--space-md); font-weight:600; }
  .scope-section { background:var(--brand-1-light); }
  .scope-grid > div { border-top:1px solid var(--black); padding-top:var(--space-md); }
  .scope-grid h3 { margin-top:0; font-size:1.9rem; }
  .scope-grid > div > p { color:var(--dark); }
  .care-list li { border-top:1px solid var(--light); padding-block:var(--space-sm); margin:0; }
  .care-list strong { display:block; }
  .scope-note { border-top:1px solid var(--light); padding-top:var(--space-md); max-width:90ch; margin-bottom:0; }
  .questions { max-width:56rem; margin-inline:auto; }
  .questions h2 { margin-top:0; margin-bottom:var(--space-lg); }
  details { border-bottom:1px solid var(--light); padding-block:var(--space-md); }
  summary { cursor:pointer; font-weight:600; font-size:1.05rem; padding-right:var(--space-md); }
  details[open] summary { margin-bottom:var(--space-sm); }
  details > p { margin:0; max-width:68ch; }
  .closing h2 { font-size:clamp(2.2rem,3.7vw,3.4rem); margin-top:0; }
  .closing-offer { border-left:1px solid rgb(20 26 24 / .3); padding-left:var(--space-xl); }
  .closing-offer > .text-sm { max-width:44ch; }
  body > footer { background:var(--lighter); }
  @media(max-width:900px) {
    .guide-wrap { background:linear-gradient(var(--brand-2) 0 12%,var(--lighter) 12% 100%); }
    .service-guide { grid-template-columns:minmax(0,1fr); max-width:38rem; margin-inline:auto; }
    .guide-fold,.guide-fold:nth-child(even) { transform:none; padding:1.6rem 2rem 1.6rem 10.5rem; min-height:9.4rem; background-image:linear-gradient(180deg,rgb(67 57 25 / .035),transparent 40%,rgb(67 57 25 / .055)),url("/images/ivory-paper.jpg"); border-bottom:1px solid rgb(67 57 25 / .065); }
    .guide-fold h2 { font-size:1.65rem; }
    .guide-fold p { min-height:0; font-size:1rem; }
    .guide-art { position:absolute; left:3.5rem; top:1.5rem; height:4.3rem; margin:0; }
    .guide-art svg { width:4.3rem; height:4.3rem; }
    .guide-stop { position:absolute; left:1.3rem; top:50%; margin:0; transform:translateY(-50%); }
    .founder { gap:var(--space-lg); }
  }
  @media(max-width:640px) {
    header > nav { min-height:4.5rem; }
    header > nav > a img { width:174px; height:auto; }
    .opening h1 { font-size:clamp(2.15rem,9.2vw,3.5rem); letter-spacing:-.04em; }
    .offer { gap:var(--space-md); }
    .offer-copy { font-size:1.28rem; }
    .offer .ui-button { width:100%; }
    .offer > div:first-child { width:100%; }
    .offer-price { border:0; padding-left:0; }
    .offer-price .price { display:inline; font-size:2rem; margin:0; }
    .offer-price > p:last-child { display:inline; margin-left:.5rem; font-size:.9rem; }
    .offer-includes { font-size:.95rem; line-height:1.5; }
    .assurance { padding:var(--space-sm); }
    .assurance p { font-size:.9rem; }
    .guide-wrap { padding-top:0; }
    .guide-fold,.guide-fold:nth-child(even) { padding:1.4rem 1rem 1.4rem 7.4rem; min-height:8.5rem; }
    .guide-fold h2 { font-size:1.45rem; }
    .guide-fold p { font-size:.95rem; }
    .guide-art { left:2.8rem; top:2.2rem; }
    .guide-art svg { width:3.4rem; height:3.4rem; }
    .guide-stop { left:.9rem; width:.8rem; height:.8rem; }
    .guide-caption { font-size:.75rem; }
    .section-lead .text-lg { font-size:1.1rem; }
    .plan,.founder,.conversation-layout,.scope-grid,.closing-layout { grid-template-columns:minmax(0,1fr); }
    .plan li + li { margin-left:0; padding-left:0; border-left:0; border-top:1px solid var(--light); }
    .step-number { width:2.7rem; height:2.7rem; font-size:1.5rem; }
    .founder figure { max-width:26rem; }
    .founder figure img { aspect-ratio:4 / 3.7; }
    .conversation-layout,.scope-grid,.closing-layout { gap:var(--space-lg); }
    .closing-offer { border-left:0; border-top:1px solid rgb(20 26 24 / .3); padding-left:0; padding-top:var(--space-lg); }
  }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

}