/* ==========================================================================
   Globoff — layout system
   Page content is inline-styled for desktop; this sheet owns the responsive
   behaviour. Breakpoints: 1180 / 1000 / 860 (mobile switch) / 640 / 380.
   ========================================================================== */

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F4EFE6;font-family:'Manrope',system-ui,sans-serif;overflow-x:clip}
img{max-width:100%}
section{scroll-margin-top:80px}
/* The hero portrait is a circle (border-radius:50%) with a hard-coded 460px
   height. Once its column narrows the box goes 374x460 and the circle turns
   into an ellipse. Deriving height from width keeps it round at every size;
   on wide screens width resolves to 460px, so desktop is unchanged. */
.gf-hero-img{height:auto !important;aspect-ratio:1/1}
a,button,summary{-webkit-tap-highlight-color:rgba(201,164,90,.25)}

/* ---------- interaction ---------- */
.gf-svc{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}

/* Industries: flowing capability tags, each sized to its own label. A rigid
   7-column grid forced "Health" and "Professional Services" to identical
   widths, which is what made the block read as generated. */
.gf-chip-grid{gap:10px !important}
.gf-mark{padding:11px 18px !important;border-radius:999px !important;font-size:14px !important;
  line-height:1.25;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;cursor:default}
/* hover effects only where a real pointer exists — otherwise they stick on tap */
@media (hover:hover) and (pointer:fine){
  .gf-svc:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(12,34,51,.12)}
  .gf-mark:hover{background:#C9A45A !important;color:#1A1305 !important;border-color:#C9A45A !important;
    transform:translateY(-2px)}
  .gf-soc:hover{background:#C9A45A;border-color:#C9A45A;color:#0B1E30}
  .gf-play:hover{transform:scale(1.06)}
}
input:focus,textarea:focus,select:focus{border-color:#C9A45A !important}
details>summary::-webkit-details-marker{display:none}
details[open] summary .gf-plus{transform:rotate(45deg)}
.gf-plus{transition:transform .2s ease;display:inline-block}
button{transition:background .2s ease, transform .15s ease}
/* 44px minimum tap targets — applied wherever the input is touch, at any width,
   so iPad landscape (>860px, still touch) gets them too. Mouse desktop keeps
   its original compact spacing. */
@media (pointer:coarse),(max-width:860px){
  .gf-svc a,.gf-util a,.gf-util-r a,.gf-nav a,.gf-mnav a,
  a[href^="tel:"],a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px}
  .gf-util{padding-top:2px !important;padding-bottom:2px !important}
}

/* ---------- icons ---------- */
.gf-soc{width:36px;height:36px;border-radius:8px;border:1px solid #20364C;display:inline-flex;
  align-items:center;justify-content:center;color:#BCC7D4;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.gf-play{transition:transform .2s ease}

/* ---------- scroll reveal ---------- */
/* Opt-in: elements only start hidden once JS confirms IntersectionObserver
   support, so with JS off or unsupported the page renders fully visible. */
.gf-reveal-on [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.gf-reveal-on [data-reveal].gf-in{opacity:1;transform:none}

/* ---------- sticky header elevation ---------- */
.gf-header{transition:box-shadow .25s ease,padding .25s ease}
.gf-header.gf-scrolled{box-shadow:0 6px 24px rgba(12,34,51,.09)}
/* current-section indicator in the desktop nav */
.gf-nav a{position:relative;padding-bottom:3px}
.gf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:#C9A45A;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.gf-nav a.gf-active::after,.gf-nav a:hover::after{transform:scaleX(1)}
.gf-mnav a.gf-active{color:#A07C2E}

/* ---------- FAQ accordion ---------- */
details.gf-faq{overflow:hidden}
.gf-faq-body{overflow:hidden;transition:height .28s ease}

/* ---------- back to top ---------- */
.gf-top{position:fixed;right:18px;bottom:18px;z-index:40;width:46px;height:46px;border-radius:50%;
  border:0;background:#0C2233;color:#C9A45A;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 10px 26px rgba(12,34,51,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.gf-top.gf-show{opacity:1;visibility:visible;transform:none}

/* iOS Safari zooms the whole viewport when a focused field is under 16px.
   Keyed off pointer:coarse so tablets are covered too, not just narrow widths. */
@media (pointer:coarse),(max-width:860px){
  input,select,textarea{font-size:16px !important}
  /* must sit after the .gf-soc base rule above — equal specificity, so order decides */
  .gf-soc{width:44px;height:44px}
}

/* ---------- mobile navigation (desktop: hidden) ---------- */
.gf-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:46px;height:46px;flex:0 0 auto;padding:0;background:transparent;
  border:1px solid #DCD2BF;border-radius:8px;cursor:pointer}
.gf-burger span{display:block;width:20px;height:2px;background:#0C2233;border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.gf-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gf-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gf-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gf-mnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
  background:#F4EFE6;border-bottom:1px solid #E6DDCC;box-shadow:0 20px 40px rgba(12,34,51,.16);
  padding:6px 22px 18px;max-height:calc(100dvh - 72px);overflow-y:auto}
.gf-mnav.gf-open{display:flex}
.gf-mnav a{display:flex;align-items:center;min-height:52px;padding:4px 2px;text-decoration:none;
  color:#0C2233;font:600 16px/1.3 'Manrope',sans-serif;border-bottom:1px solid #E6DDCC}
.gf-mnav a.gf-mnav-cta{justify-content:center;margin-top:16px;background:#C9A45A;color:#1A1305;
  border-bottom:0;border-radius:8px;font-weight:700}

/* ==========================================================================
   1180px — pull the desktop gutters in
   ========================================================================== */
@media (max-width:1180px){
  section:not(#get-started),.gf-util,.gf-header,.gf-strip,.gf-band,.gf-footer{
    padding-left:36px !important;padding-right:36px !important}
  /* keeps the hero headline from stepping 44px -> 62px across the 860px boundary */
  h1{font-size:clamp(44px,5.2vw,62px) !important}
  /* stop the about photo turning into a narrow 560px-tall strip as its column shrinks */
  .gf-about-img{height:min(56vw,560px) !important}
  .gf-about-grid{gap:40px !important}
  .gf-faq-grid{gap:36px !important}
  .gf-contact-grid{gap:36px !important}
  .gf-tst-grid{gap:32px !important}
}

/* ==========================================================================
   1000px — break up the widest card rows before they get cramped
   ========================================================================== */
@media (max-width:1000px){
  .gf-svc2-grid{grid-template-columns:repeat(3,1fr) !important}
  .gf-foot-grid{grid-template-columns:1fr 1fr !important;gap:34px !important}
  .gf-tst-grid{grid-template-columns:1fr !important}
  .gf-tst-cards{grid-template-columns:repeat(2,1fr) !important}
  .gf-util-l{gap:16px !important}
}

/* ==========================================================================
   860px — the mobile switch: single column, real navigation
   ========================================================================== */
@media (max-width:860px){
  /* -- navigation -- */
  .gf-nav{display:none !important}
  .gf-hdr-cta{display:none !important}
  .gf-burger{display:flex}
  .gf-header{padding-top:14px !important;padding-bottom:14px !important;gap:14px}

  /* -- utility bar: keep the email, drop the desk-only detail -- */
  .gf-util{flex-wrap:wrap;justify-content:center !important;gap:6px 18px;
    padding-top:9px !important;padding-bottom:9px !important;text-align:center}
  .gf-util-l{flex-wrap:wrap;justify-content:center;gap:6px 18px !important}
  .gf-util-r{display:none !important}
  .gf-util-addr{display:none !important}

  /* -- headings scale down; desktop sizes above this width are untouched -- */
  h1{font-size:clamp(30px,7.4vw,44px) !important}
  h2{font-size:clamp(24px,5vw,32px) !important}

  /* -- every page-level grid collapses -- */
  .gf-hero-grid,.gf-about-grid,.gf-faq-grid,.gf-contact-grid,.gf-tst-grid{
    grid-template-columns:1fr !important;gap:34px !important}

  /* -- hero -- */
  .gf-hero{padding-top:44px !important;padding-bottom:8px !important}
  .gf-hero-copy{padding-bottom:0 !important}
  .gf-hero-btns{flex-wrap:wrap;gap:10px !important;margin-bottom:26px !important}
  .gf-hero-btns>a{flex:1 1 210px;text-align:center;justify-content:center}
  .gf-hero-art{align-self:center !important;width:100%;max-width:420px;margin:0 auto}
  /* The gold disc is an absolutely-positioned decoration. Once the badge below
     moved into normal flow, the disc (a positioned box) painted on top of it and
     buried the text. Drawing the disc as an offset shadow on the photo itself
     gives the same look as desktop, aligns perfectly at any size, and can never
     overlap the badge. */
  .gf-hero-blob{display:none}
  .gf-hero-dash{left:2px !important;top:6px !important;width:64px !important;height:64px !important}
  .gf-hero-img{width:min(72vw,300px) !important;height:min(72vw,300px) !important;
    box-shadow:15px 15px 0 #C9A45A}
  /* relative (not static) keeps the badge in the positioned layer, above the
     dashed ring; left/bottom must be reset or the inline offsets would shift it */
  .gf-hero-badge{position:relative !important;z-index:3;left:auto !important;bottom:auto !important;
    margin:24px auto 0 !important;max-width:320px;justify-content:center;
    box-shadow:0 10px 26px rgba(12,34,51,.14) !important}

  /* -- software strip -- */
  .gf-strip{padding-top:22px !important;padding-bottom:22px !important}
  .gf-strip-in{justify-content:center !important;gap:10px 18px !important;text-align:center}
  .gf-strip-in>span:first-child{flex:1 1 100%;white-space:normal !important}
  .gf-strip-in>div{justify-content:center;gap:10px 18px !important}
  .gf-strip-in>div>span{font-size:15px !important}

  /* -- about -- */
  .gf-about-art{max-width:460px;margin:0 auto;width:100%}
  /* same treatment as the hero — the accent square becomes an offset shadow on
     the photo so it lines up exactly, instead of reading as a stray gold fragment */
  .gf-about-sq{display:none}
  .gf-about-img{height:min(76vw,340px) !important;box-shadow:-14px -14px 0 #C9A45A}
  /* tuck the stat badge inside the photo rather than hanging it off the edge */
  .gf-about-badge{right:10px !important;bottom:10px !important;padding:14px 16px !important}
  .gf-about-badge>div:first-child{font-size:26px !important}
  .gf-about-badge>div:last-child{font-size:11.5px !important;max-width:100px !important}
  .gf-about-cta{flex-wrap:wrap;gap:18px !important}

  /* -- stat counters: dividers become cards, which survives wrapping -- */
  .gf-stats{grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
  .gf-stats>div{border-left:0 !important;border:1px solid #20374D;border-radius:10px;padding:20px 12px}
  .gf-stats>div>div:first-child{font-size:34px !important}

  /* -- services / industries -- */
  .gf-svc-grid{grid-template-columns:repeat(2,1fr) !important;gap:18px !important}
  .gf-svc2-grid{grid-template-columns:repeat(2,1fr) !important}
  .gf-ind-head{flex-direction:column;align-items:flex-start !important;gap:16px !important;
    margin-bottom:30px !important}

  /* -- testimonials -- */
  .gf-tst-cards{grid-template-columns:repeat(2,1fr) !important}
  .gf-tst-score>div:first-child{font-size:48px !important}

  /* -- CTA band -- */
  .gf-band{padding-top:46px !important;padding-bottom:46px !important}
  .gf-band-in{flex-direction:column;align-items:flex-start !important;gap:24px !important}
  .gf-band-btn{width:100%;text-align:center;white-space:normal !important}
  .gf-band-blob{right:-50px !important;width:190px !important;height:190px !important}

  /* -- contact / form -- */
  .gf-form-card{padding:24px !important}

  /* -- footer -- */
  .gf-foot-grid{gap:30px !important}
}

/* ==========================================================================
   640px — phones
   ========================================================================== */
@media (max-width:640px){
  section:not(#get-started),.gf-util,.gf-header,.gf-strip,.gf-band,.gf-footer{
    padding-left:20px !important;padding-right:20px !important}
  section:not(#get-started){padding-top:56px !important;padding-bottom:56px !important}
  .gf-hero{padding-top:36px !important;padding-bottom:8px !important}

  /* 16px minimum stops iOS Safari zooming the page on field focus */
  input,select,textarea{font-size:16px !important}

  .gf-check-grid{grid-template-columns:1fr !important;gap:12px !important}
  .gf-svc-grid{grid-template-columns:1fr !important}
  .gf-svc2-grid{grid-template-columns:1fr 1fr !important}
  .gf-tst-cards{grid-template-columns:1fr !important}
  .gf-form-row{grid-template-columns:1fr !important}
  .gf-foot-grid{grid-template-columns:1fr !important;gap:28px !important}
  .gf-footer{padding-top:44px !important}

  .gf-about-cta>a{width:100%;text-align:center}
  .gf-hero-btns>a{flex:1 1 100%}
  .gf-band-blob{display:none}
  .gf-form-card{padding:20px !important}
  details>summary{font-size:16px !important;padding:16px 0 !important}
}

/* ==========================================================================
   380px — small phones
   ========================================================================== */
@media (max-width:380px){
  section:not(#get-started),.gf-util,.gf-header,.gf-strip,.gf-band,.gf-footer{
    padding-left:16px !important;padding-right:16px !important}
  .gf-svc2-grid{grid-template-columns:1fr !important}
  .gf-mark{padding:10px 15px !important;font-size:13.5px !important}
  .gf-stats>div>div:first-child{font-size:30px !important}
  .gf-about-badge{padding:13px 15px !important}
}

/* ---------- respect reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}