/* ============================================================
   LA GRECA RESEARCH — SITE STYLES
   Base reset, buttons, shared component hooks, and the
   responsive rules carried over from the design prototypes.
   Element-level visual styling lives inline on the markup
   (faithful to the Claude Design export); this file holds the
   cross-cutting rules, hover states, and media queries.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
::selection{background:var(--highlight)}

/* ---- Buttons -------------------------------------------------
   Base look is inline on each .lg-btn. FLAT (default) adds
   nothing. RAISED layers a 3D "push" shadow, toggled by
   html[data-btn-style="raised"]. Ported from button-tweak.css. */
.lg-btn{cursor:pointer}
html[data-btn-style="raised"] .lg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease,
             background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
html[data-btn-style="raised"] .lg-btn--primary{
  border-color:transparent !important;
  box-shadow:0 5px 0 0 var(--accent-ink) !important;
}
html[data-btn-style="raised"] .lg-btn--primary:hover{
  transform:translateY(3px) !important;box-shadow:0 2px 0 0 var(--accent-ink) !important;background:var(--accent) !important;
}
html[data-btn-style="raised"] .lg-btn--primary:active{
  transform:translateY(5px) !important;box-shadow:0 0 0 0 var(--accent-ink) !important;
}
html[data-btn-style="raised"] .lg-btn--secondary{box-shadow:0 5px 0 0 var(--n-soft) !important;}
html[data-btn-style="raised"] .lg-btn--secondary:hover{
  transform:translateY(3px) !important;box-shadow:0 2px 0 0 var(--n-soft) !important;border-color:var(--hairline) !important;
}
html[data-btn-style="raised"] .lg-btn--secondary:active{transform:translateY(5px) !important;box-shadow:0 0 0 0 var(--n-soft) !important;}
html[data-btn-style="raised"] .lg-btn--outline{box-shadow:0 5px 0 0 var(--n-soft) !important;}
html[data-btn-style="raised"] .lg-btn--outline:hover{
  transform:translateY(3px) !important;box-shadow:0 2px 0 0 var(--n-soft) !important;background:transparent !important;color:var(--ink) !important;border-color:var(--ink) !important;
}
html[data-btn-style="raised"] .lg-btn--outline:active{transform:translateY(5px) !important;box-shadow:0 0 0 0 var(--n-soft) !important;}
html[data-btn-style="raised"] .lg-btn--highlight{box-shadow:0 5px 0 0 var(--accent) !important;}
html[data-btn-style="raised"] .lg-btn--highlight:hover{
  transform:translateY(3px) !important;box-shadow:0 2px 0 0 var(--accent) !important;background:var(--highlight) !important;
}
html[data-btn-style="raised"] .lg-btn--highlight:active{transform:translateY(5px) !important;box-shadow:0 0 0 0 var(--accent) !important;}

/* ---- Forms (shared) ----------------------------------------- */
input,select,textarea{font-family:var(--font-body)}
input:focus,select:focus,textarea:focus{border-color:var(--accent) !important}
.mk-in{width:100%;padding:11px 15px;font-size:15px;font-family:var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:8px;outline:none}
.mk-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(111,127,62,.15)}

/* =============================================================
   HOME
   ============================================================= */
@keyframes scp-spin{from{transform:rotate(var(--r,0deg))}to{transform:rotate(calc(var(--r,0deg) + 360deg))}}
@media (max-width:767px){
  [data-grid="features"]{grid-template-columns:1fr 1.1fr 1fr !important;gap:14px 10px !important;align-items:center}
  [data-grid="features"] > div{gap:24px !important}
  [data-grid="features"] a{padding:6px 2px !important}
  [data-grid="features"] a > p{display:none !important}
  [data-grid="features"] a > span{width:60px !important;height:60px !important;margin-bottom:10px !important}
  [data-grid="features"] a > span img{width:52% !important;height:52% !important}
  [data-grid="features"] a > h3{font-size:14px !important;line-height:1.25 !important;margin-bottom:0 !important}
  [data-moka-col]{border-radius:16px !important}
}
@media (max-width:767px){
  section[data-screen-label="Home / Hero"]{min-height:100svh !important;padding:150px 6% 140px !important}
  section[data-screen-label="Home / Hero"] h1{font-size:clamp(33px,8.5vw,44px) !important;margin-bottom:16px !important}
  [data-hero-sub]{font-size:15px !important;line-height:1.5 !important;max-width:420px !important}
  [data-hero-cta]{margin-top:26px !important}
  [data-hero-contact],[data-hero-scroll]{display:none !important}
  .fly-photo{display:none !important}
  .fly-photo[data-m]{display:block !important;aspect-ratio:1/1 !important;height:auto !important;top:auto !important;bottom:auto !important}
  .fly-photo[data-m="tl"]{left:4% !important;top:16px !important;width:92px !important}
  .fly-photo[data-m="tr"]{right:4% !important;top:16px !important;width:92px !important}
  .fly-photo[data-m="bl"]{left:4% !important;bottom:16px !important;width:104px !important}
  .fly-photo[data-m="br"]{right:4% !important;bottom:16px !important;width:104px !important}
}
@media (max-width:767px){
  [data-doodle="bl"]{display:none !important}
  [data-br-desk]{display:none !important}
  [data-br-mob]{display:block !important}
  [data-doodle="br-pin"]{display:block !important}
}
@media (max-width:400px){
  .fly-photo[data-m="tl"],.fly-photo[data-m="tr"]{width:80px !important}
  .fly-photo[data-m="bl"],.fly-photo[data-m="br"]{width:92px !important}
}
/* Tablet band (768–1023px): the scattered hero photos use percentage
   positions that march inward as the viewport narrows and collide with the
   centered headline. Below 1024px, drop the scatter and frame the text with
   the four corner photos instead (same treatment as mobile, sized up). */
@media (min-width:768px) and (max-width:1023px){
  .fly-photo{display:none !important}
  .fly-photo[data-m]{display:block !important;aspect-ratio:1/1 !important;height:auto !important;top:auto !important;bottom:auto !important}
  .fly-photo[data-m="tl"]{left:4% !important;top:20px !important;width:120px !important}
  .fly-photo[data-m="tr"]{right:4% !important;top:20px !important;width:120px !important}
  .fly-photo[data-m="bl"]{left:4% !important;bottom:24px !important;width:132px !important}
  .fly-photo[data-m="br"]{right:4% !important;bottom:24px !important;width:132px !important}
  [data-doodle="bl"]{display:none !important}
  [data-br-desk]{display:none !important}
  [data-br-mob]{display:block !important}
  [data-doodle="br-pin"]{display:block !important}
}

/* =============================================================
   SERVICES
   ============================================================= */
/* Original design hid the hero doodles below 1120px, which also hid them
   on common (scaled) laptop widths. Kept visible down to tablet; only the
   stacked mobile layout hides them. */
@media (max-width:767px){.svc-hero-mark{display:none}}
@media (max-width:767px){
  [data-work-toggle]{display:grid !important;grid-template-columns:1fr 1fr;width:100%;flex-wrap:nowrap !important}
  [data-work-toggle] button{padding:12px 8px !important;font-size:13px !important;white-space:normal !important;line-height:1.2;text-align:center}
  [data-grid="step"]{grid-template-columns:1fr !important;gap:20px !important;padding:24px 20px !important}
  [data-grid="step"] > div:first-child{order:2}
  [data-grid="step"] > div:last-child{order:1;aspect-ratio:16/10 !important}
  [data-grid="focus"]{grid-template-columns:1fr 1fr !important;gap:12px !important}
  [data-grid="focus"] > a{flex-direction:column;align-items:flex-start !important;gap:12px !important;padding:18px 16px !important}
  [data-grid="focus"] > a > span:first-child{width:52px !important;height:52px !important}
  [data-grid="focus"] > a p{display:none !important}
  [data-grid="focus"] > a h3{font-size:17px !important}
  [data-grid="focus"] > a > span:last-child{display:none !important}
}

/* =============================================================
   SERVICE DETAIL
   ============================================================= */
@media (max-width:991px){
  [data-grid="methods"]{grid-template-columns:1fr !important}
}
@media (max-width:767px){
  [data-grid="methods-quad"]{grid-template-columns:1fr 1fr !important;gap:28px 20px !important}
  [data-grid="methods-quad"] h3{font-size:18px !important}
  [data-grid="methods-quad"] svg{width:32px !important;height:32px !important;margin-bottom:10px !important}
}

/* =============================================================
   RESOURCES
   ============================================================= */
@media (max-width:900px){
  [data-feed-grid]{grid-template-columns:1fr !important}
  [data-feed-layout]{grid-template-columns:1fr !important;gap:24px !important}
  [data-featured]{grid-template-columns:1fr !important}
  [data-facet-col]{position:static !important}
  [data-feat-img]{min-height:150px !important}
  [data-feat-body]{padding:22px 22px !important;gap:10px !important}
  [data-feat-body] h3{font-size:23px !important}
}
[data-embed-mobile]{display:none}
@media (max-width:767px){
  [data-embed-wrap]{display:none !important}
  [data-embed-dots]{display:none !important}
  [data-embed-mobile]{display:block !important}
}

/* =============================================================
   ARTICLE
   ============================================================= */
.article-main a{color:var(--accent);text-decoration:none}
.article-main a:hover{color:var(--accent-ink)}
.h-anchor{opacity:0;transition:opacity .14s,color .14s}
h2:hover .h-anchor,.h-anchor:focus-visible{opacity:1}
@media (max-width:900px){
  [data-shell]{grid-template-columns:1fr !important}
  [data-rail]{position:static !important;flex-direction:row !important;flex-wrap:wrap !important}
  [data-rail] > div{flex:1 1 240px}
}
@media (max-width:560px){[data-related]{grid-template-columns:1fr !important}}

/* Rich-text article body (rendered from markdown by build.js) */
.lg-article-body > *{margin:0}
.lg-article-body > * + *{margin-top:22px}
.lg-article-body p{font-size:18px;line-height:1.62;color:var(--ink)}
.lg-article-body h2{position:relative;margin-top:38px;font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.4vw,31px);line-height:1.14;letter-spacing:-.01em;text-wrap:pretty}
.lg-article-body h3{margin-top:30px;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.6vw,23px);line-height:1.2;letter-spacing:-.01em}
.lg-article-body h2 .h-anchor{position:absolute;left:-38px;top:.55em;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:24px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink-soft)}
.lg-article-body blockquote{padding:6px 0 6px 24px;border-left:3px solid var(--accent);font-family:var(--font-display);font-weight:400;font-size:clamp(22px,3vw,27px);line-height:1.3;color:var(--accent-ink);letter-spacing:-.01em;text-wrap:pretty}
.lg-article-body ul,.lg-article-body ol{padding-left:24px;font-size:18px;line-height:1.62;color:var(--ink)}
.lg-article-body li + li{margin-top:8px}
.lg-article-body li::marker{color:var(--accent)}
.lg-article-body strong{font-weight:700}
.lg-article-body img{width:100%;height:auto;border-radius:12px;display:block;border:1px solid var(--hairline)}
.lg-article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--n-paper);padding:2px 6px;border-radius:5px}
.lg-article-body hr{border:0;border-top:1px solid var(--hairline)}
@media (max-width:900px){.lg-article-body h2 .h-anchor{display:none}}