/* Gridline Studio — shared page chrome.
   Loaded in every page's <helmet> after the design-system stylesheet and
   before that page's own <style>, so page-level rules always win.
   Page-specific components (work cards, service tables, form fields…)
   stay in the page that uses them. */

/* ── Base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{margin:0;background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;max-width:100%;}
a{color:var(--text-primary);text-decoration:none;}
a:hover{color:var(--text-secondary);}
::selection{background:var(--gl-ink-9);color:var(--gl-cream);}

/* ── Pill CTA, sliding arrows ──────────────────────────────────────── */
/* Markup: button.animated-button > svg.arr-2, span.text, span.circle, svg.arr-1 */
.animated-button{position:relative;display:flex;align-items:center;gap:4px;padding:16px 36px;border:4px solid transparent;font-size:16px;background-color:inherit;border-radius:100px;font-weight:600;color:var(--gl-ink-9);box-shadow:0 0 0 2px var(--gl-ink-9);cursor:pointer;overflow:hidden;transition:all 0.6s cubic-bezier(0.23,1,0.32,1);font-family:var(--font-display);}
.animated-button svg{position:absolute;width:24px;fill:var(--gl-ink-9);z-index:9;transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button .arr-1{right:16px;}
.animated-button .arr-2{left:-25%;}
.animated-button .circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--gl-ink-9);border-radius:50%;opacity:0;transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button .text{position:relative;z-index:1;transform:translateX(-12px);transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button:hover{box-shadow:0 0 0 12px transparent;color:var(--gl-cream);border-radius:12px;}
.animated-button:hover .arr-1{right:-25%;}
.animated-button:hover .arr-2{left:16px;}
.animated-button:hover .text{transform:translateX(12px);}
.animated-button:hover svg{fill:var(--gl-cream);}
.animated-button:hover .circle{width:220px;height:220px;opacity:1;}
.animated-button:active{scale:0.95;box-shadow:0 0 0 4px var(--gl-ink-9);}

/* Header variant — fixed 44px height to match the menu button */
.gl-hdr .animated-button{height:44px;padding:0 26px;font-size:14px;}
.gl-hdr .animated-button svg{width:20px;}
.gl-hdr .animated-button .arr-1{right:14px;}
.gl-hdr .animated-button .circle{width:18px;height:18px;}
.gl-hdr .animated-button .text{transform:translateX(-10px);}
.gl-hdr .animated-button:hover .arr-2{left:14px;}
.gl-hdr .animated-button:hover .text{transform:translateX(10px);}
.gl-hdr .animated-button:hover .circle{width:200px;height:200px;}

/* Inverse variant — cream on ink sections */
.animated-button-inv{position:relative;display:flex;align-items:center;gap:4px;padding:16px 36px;border:4px solid transparent;font-size:16px;background-color:inherit;border-radius:100px;font-weight:600;color:var(--gl-cream);box-shadow:0 0 0 2px var(--gl-cream);cursor:pointer;overflow:hidden;transition:all 0.6s cubic-bezier(0.23,1,0.32,1);font-family:var(--font-display);transform:scale(0.8);transform-origin:right center;}
.animated-button-inv svg{position:absolute;width:24px;fill:var(--gl-cream);z-index:9;transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button-inv .arr-1{right:16px;}
.animated-button-inv .arr-2{left:-25%;}
.animated-button-inv .circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--gl-cream);border-radius:50%;opacity:0;transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button-inv .text{position:relative;z-index:1;transform:translateX(-12px);transition:all 0.8s cubic-bezier(0.23,1,0.32,1);}
.animated-button-inv:hover{box-shadow:0 0 0 12px transparent;color:var(--gl-ink-9);border-radius:12px;}
.animated-button-inv:hover .arr-1{right:-25%;}
.animated-button-inv:hover .arr-2{left:16px;}
.animated-button-inv:hover .text{transform:translateX(12px);}
.animated-button-inv:hover svg{fill:var(--gl-ink-9);}
.animated-button-inv:hover .circle{width:220px;height:220px;opacity:1;}
.animated-button-inv:active{scale:0.95;box-shadow:0 0 0 4px var(--gl-cream);}

/* ── Small text link-button with trailing arrow ────────────────────── */
/* Markup: a.gl-next-btn > span.text, svg.arrow — add .inverse on ink */
.gl-next-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--font-display);font-weight:500;font-size:15px;padding:10px 20px;border-radius:var(--radius-full);background:var(--gl-ink-9);color:var(--gl-cream);border:1px solid var(--gl-ink-9);transition:background .2s cubic-bezier(0.22,0.61,0.36,1),transform .12s ease;}
.gl-next-btn:hover{background:var(--gl-ink-8);color:var(--gl-cream);}
.gl-next-btn:active{transform:scale(0.98) translateY(0.5px);}
.gl-next-btn .arrow{width:1em;transition:transform .3s cubic-bezier(0.22,0.61,0.36,1);}
.gl-next-btn:hover .arrow{transform:translateX(5px);}
.gl-next-btn.inverse{background:var(--gl-cream);color:var(--gl-ink-9);border-color:var(--gl-cream);}
.gl-next-btn.inverse:hover{background:var(--gl-paper-1);color:var(--gl-ink-9);}

/* ── Shared responsive rules ───────────────────────────────────────── */
/* These target inline styles by substring, so keep page section padding
   written as "… 40px" and grids as "grid-template-columns". */
@media (max-width:768px){
  main [style*="px 40px"], main [style*="0 40px"]{padding-left:24px!important;padding-right:24px!important;}
  main h1{font-size:clamp(32px,8vw,56px)!important;line-height:1.06!important;}
  main h2{font-size:clamp(26px,6vw,40px)!important;line-height:1.12!important;}
}
@media (max-width:640px){
  main [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
  main [style*="px 40px"], main [style*="0 40px"]{padding-left:18px!important;padding-right:18px!important;}
}