/* ============================================================
   sections.css — brand assets + four customer-friendly sections
   Loaded AFTER alive.css so additive overrides win at equal specificity.
   CSP-clean: no inline styles in HTML; everything lives here.
   ============================================================ */

/* --- wordmark lockup (woven-W mark + Inter-700 text) --- */
.wm{gap:8px;color:var(--accent)}
.wm-mark{display:inline-flex;align-items:center}
.wm-mark img{display:block;height:18px;width:auto}
.wm.wm-sm .wm-mark img{height:15px}
.wm-text{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.03em;text-transform:lowercase;line-height:1}
.m-dark{display:none}
nav.dark .wm{color:#EDE6D8}
nav.dark .m-light{display:none}
nav.dark .m-dark{display:inline-block}

/* --- inline stroke icons (themeable via stroke) --- */
.ico{width:26px;height:26px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px;vertical-align:middle}

/* shared: lead-in heading colour for new light sections (brand: headings ink-blue) */
.about .big,.services .big,.shiplog .big{color:var(--accent)}
.oc{text-decoration:none}

/* --- ABOUT --- */
.about{background:var(--surface);padding:clamp(54px,8vw,100px) 0;border-top:1px solid var(--line)}
.accgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.acc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.acc .ico{margin-bottom:12px}
.acc h3{font-family:var(--d);font-weight:600;font-size:18px;margin-bottom:7px;color:var(--accent)}
.acc p{font-size:14px;line-height:1.55;opacity:.82}
.about .signoff{margin-top:28px;font-size:13px;color:var(--walnut);letter-spacing:.04em}

/* --- SERVICES + FAQ --- */
.services{background:var(--paper);padding:clamp(54px,8vw,100px) 0;border-top:1px solid var(--line)}
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;transition:transform .3s var(--e1),box-shadow .3s var(--e1)}
.svc:hover{transform:translateY(-4px);box-shadow:0 22px 42px -30px rgba(25,27,31,.5)}
.svc .ico{margin-bottom:12px}
.svc h3{font-family:var(--d);font-weight:600;font-size:19px;margin-bottom:7px;color:var(--accent)}
.svc p{font-size:14px;line-height:1.55;opacity:.82}
.faq{margin-top:50px;max-width:760px}
.faqh{font-family:var(--d);font-weight:600;font-size:22px;margin-bottom:14px;color:var(--accent)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;font-weight:500;padding:16px 30px 16px 0;cursor:pointer;position:relative;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:21px;line-height:1;color:var(--accent2)}
.faq details[open] summary::after{content:'\2013'}
.faq details>p{font-size:15px;line-height:1.6;opacity:.85;padding:0 0 18px;max-width:64ch}

/* --- SHIP-LOG --- */
.shiplog{background:var(--surface);padding:clamp(54px,8vw,100px) 0;border-top:1px solid var(--line)}
.shiplog .kicker{display:inline-flex;align-items:center;gap:8px}
.shiplog .kicker .ico{stroke:var(--accentText)}
.log{list-style:none;margin-top:34px;border-top:1px solid var(--line)}
.logrow{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px}
.logrow.empty{color:var(--walnut);opacity:.72}
.logturn{color:var(--accent2)}
.logclose{margin-top:22px;font-family:var(--d);font-weight:500;font-size:20px;color:var(--accent)}

/* --- METHOD (the company brain, kept backstage) --- */
.method{background:var(--paper);padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)}
.method-line{font-family:var(--d);font-weight:500;font-size:clamp(21px,3vw,33px);line-height:1.34;letter-spacing:-.01em;max-width:24ch;color:var(--ink);text-wrap:balance}
.method-line .ink{color:var(--accent)}

/* --- CONTACT (ink-blue surface, single gold CTA) --- */
.contact{background:var(--accent);color:var(--onAccent);padding:clamp(54px,8vw,100px) 0}
.contact .kicker{color:#9FC2D2}
.contact .big{color:var(--onAccent)}
.contact .lead{color:var(--onAccent);opacity:.9}
.contact .ico{stroke:var(--onAccent)}
.contact-form{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px}
.contact-form .field{display:flex;flex-direction:column;gap:7px}
.contact-form .field.full{grid-column:1/-1}
.contact-form label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#BFEFFF}
.contact-form input,.contact-form textarea{font-family:'Inter',system-ui,sans-serif;font-size:15px;background:color-mix(in oklab,#fff 8%,transparent);border:1.5px solid color-mix(in oklab,#fff 24%,transparent);border-radius:10px;padding:12px 14px;color:#fff;outline:none;cursor:auto;transition:border-color .2s,box-shadow .2s,background .2s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:color-mix(in oklab,#fff 55%,transparent)}
.contact-form input:focus,.contact-form textarea:focus{border-color:#8FD4FF;background:color-mix(in oklab,#fff 12%,transparent);box-shadow:0 0 0 3px color-mix(in oklab,#8FD4FF 22%,transparent)}
.contact-form textarea{resize:vertical;min-height:100px}
.cfrow{grid-column:1/-1;display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:4px}
.contact-form .btn{cursor:pointer;background:var(--gold);color:#231d12;border:none;box-shadow:0 5px 0 color-mix(in oklab,var(--gold) 55%,#000)}
.contact-form .btn:hover{background:#E6B25C}
.contact-form .btn:active{top:7px;box-shadow:0 0 0 color-mix(in oklab,var(--gold) 55%,#000)}
.cfalt{font-size:14px;color:#BFEFFF}
.cfalt a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.thanks{display:none;margin-top:24px;background:color-mix(in oklab,#fff 12%,transparent);border:1px solid color-mix(in oklab,#fff 28%,transparent);border-radius:12px;padding:18px 20px;font-size:15px;line-height:1.55;color:#fff;max-width:680px}
.thanks:target{display:block}

/* --- footer tagline lockup --- */
.footgrid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.tagline{font-family:var(--d);font-weight:700;font-size:20px;color:var(--accent);letter-spacing:-.02em;display:inline-flex;align-items:center}
.gold-dot{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--gold);margin:0 .2em 0 .02em}
footer .meta{line-height:1.7}
footer .meta a{color:var(--accentText);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--accentText) 30%,transparent)}

/* --- responsive --- */
@media(max-width:860px){
  .accgrid,.svcgrid,.contact-form{grid-template-columns:1fr}
  .logrow{grid-template-columns:84px 1fr auto;gap:10px;font-size:12.5px}
  .footgrid{flex-direction:column;align-items:flex-start;text-align:left}
}