/* =========================================================================
   GelFuzion — HERO v2  (loaded only by index2.php)
   -------------------------------------------------------------------------
   Design intent: replace the "every-trend-at-once" hero with a quiet,
   typographic, editorial one. No aurora, no mesh, no blurred blobs, no neon
   glow text, no glassmorphism, no floating fake browser chrome, no infinite
   animations, no scroll-mouse. The client work IS the visual.

   Scoped to .gf-home2 so nothing here can leak onto other pages.
   ========================================================================= */

.gf-home2{
  --ghk-ink:      #0E1418;   /* headline / primary type          */
  --ghk-ink-2:    #39434E;   /* strong secondary                 */
  --ghk-muted:    #6B7683;   /* body / labels                    */
  --ghk-faint:    #99A2AD;   /* micro labels                     */
  --ghk-line:     #E3E5E4;   /* hairlines                        */
  --ghk-line-2:   #D3D7D6;   /* stronger hairlines               */
  --ghk-paper:    #F7F7F5;   /* hero field (warm off-white)      */
  --ghk-accent:   #17A2E4;   /* brand blue — matches .gfx-h2 span sitewide */
  --ghk-accent-d: #0A5E97;   /* darkened — small text + white-on-blue only  */
  --ghk-ease:     cubic-bezier(.16,1,.3,1);
}

/* =========================================================================
   1. SHELL
   ========================================================================= */
/* This theme is on Bootstrap 2, which is content-box. Every width/padding
   figure below assumes border-box, so opt this subtree in explicitly. */
.ghk,.ghk *,.ghk *::before,.ghk *::after{box-sizing:border-box;}

.ghk{
  position:relative;
  background:var(--ghk-paper);
  overflow:hidden;              /* contains the right-edge bleed */
}
.ghk-wrap{
  max-width:1288px;             /* 1240 content + 2×24 gutter */
  margin:0 auto;
  padding:0 24px;
  position:relative;
}
.ghk-grid{
  display:grid;
  /* visual column runs slightly wider than the copy — with the frame now
     contained rather than bleeding, it needs the extra width to hold weight */
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:0 64px;
  align-items:center;
  /* content sets the height — no artificial min-height creating dead air */
  padding:clamp(44px,6.2vh,78px) 0 clamp(50px,7vh,86px);
}

/* =========================================================================
   2. COPY COLUMN
   ========================================================================= */
.ghk-copy{max-width:560px;}

/* the one graphic mark in the whole hero: a short accent rule */
.ghk-rule{
  display:block;width:38px;height:2px;
  background:var(--ghk-accent);
  margin:0 0 20px;
}

.ghk-eyebrow{
  display:block;
  font-size:11px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--ghk-muted);
  margin:0 0 22px;
}

.ghk-title{
  font-family:'Plus Jakarta Sans',Arial,sans-serif;
  font-weight:700;                       /* 800 isn't in the loaded webfont — 700 renders true */
  font-size:clamp(38px,4.6vw,66px);
  line-height:1.03;
  letter-spacing:-.035em;
  color:var(--ghk-ink);
  margin:0 0 24px;
  text-wrap:balance;
}
/* single typographic gesture — the payoff line, set in a serif italic.
   display:block so the payoff always owns its own line at every width,
   instead of reflowing next to "businesses" on mid-size screens. */
.ghk-title em{
  display:block;
  font-family:'Instrument Serif','Noto Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:1.1em;
  letter-spacing:-.02em;
  color:var(--ghk-accent);
}

.ghk-sub{
  font-size:17.5px;
  line-height:1.62;
  color:var(--ghk-muted);
  max-width:45ch;
  margin:0 0 34px;
}

/* ---- actions ---- */
.ghk-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}

.ghk-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;
  background:var(--ghk-ink);
  color:#fff!important;
  font-size:15px;font-weight:600;letter-spacing:-.005em;line-height:1;
  border-radius:4px;
  text-decoration:none!important;
  transition:background .22s var(--ghk-ease),transform .22s var(--ghk-ease);
}
/* hover uses the darkened blue, not brand — this is white text on the fill */
.ghk-btn:hover,.ghk-btn:focus-visible{background:var(--ghk-accent-d);transform:translateY(-1px);}

.ghk-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;
  color:var(--ghk-ink)!important;
  text-decoration:none!important;
  padding:4px 0;
  border-bottom:1px solid var(--ghk-line-2);
  transition:border-color .22s var(--ghk-ease),color .22s var(--ghk-ease);
}
.ghk-link svg{transition:transform .26s var(--ghk-ease);}
.ghk-link:hover{color:var(--ghk-accent-d)!important;border-bottom-color:var(--ghk-accent-d);}
.ghk-link:hover svg{transform:translateX(4px);}

/* =========================================================================
   3. WORK PANEL  — real client sites, bleeding off the right edge
   ========================================================================= */
.ghk-work{position:relative;}

.ghk-frame{
  position:relative;
  margin:0;                     /* <figure> carries a UA default of 1em 40px */
  background:#fff;
  border:1px solid var(--ghk-line-2);
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(14,20,24,.30);
}

/* 9/5 (1.80) is keyed to the WIDEST screenshot in the set (cwatts, 1.793).
   With object-fit:cover, any frame narrower than a source trims both side
   edges — which is where logos and nav buttons live. Sized this way nothing
   crops horizontally; narrower shots give up some bottom edge instead
   (object-position:top), which costs page footer, not branding.
   Adding a shot wider than 1.80 means widening this. */
.ghk-shots{
  position:relative;
  aspect-ratio:9/5;
  background:#EDEEEC;
}
.ghk-shots img{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;object-position:top center;
  opacity:0;
  transition:opacity .7s var(--ghk-ease);
}
.ghk-shots img.is-on{opacity:1;}

/* caption bar — replaces the fake browser chrome with actual information */
.ghk-placard{
  display:flex;align-items:center;gap:16px;
  padding:15px 20px;
  border-top:1px solid var(--ghk-line);
  background:#fff;
}
.ghk-placard-no{
  font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--ghk-faint);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.ghk-placard-id{min-width:0;flex:1 1 auto;}
.ghk-placard-id strong{
  display:block;
  font-size:14.5px;font-weight:700;letter-spacing:-.012em;
  color:var(--ghk-ink);
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ghk-placard-id span{
  display:block;
  font-size:12px;color:var(--ghk-muted);
  line-height:1.35;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* tick index — one bar per project, active bar fills */
.ghk-ticks{display:flex;align-items:center;gap:5px;flex:0 0 auto;}
.ghk-ticks button{
  width:14px;height:20px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ghk-ticks button::after{
  content:'';display:block;width:100%;height:2px;
  background:var(--ghk-line-2);
  transition:background .25s var(--ghk-ease);
}
.ghk-ticks button:hover::after{background:var(--ghk-muted);}
.ghk-ticks button[aria-current="true"]::after{background:var(--ghk-accent);}

/* =========================================================================
   4. CREDENTIAL STRIP
   ========================================================================= */
.ghk-proof{
  position:relative;
  background:#fff;
  border-top:1px solid var(--ghk-line);
  border-bottom:1px solid var(--ghk-line);
}
.ghk-proof-inner{
  display:flex;align-items:stretch;
  max-width:1288px;margin:0 auto;padding:0 24px;
}
.ghk-proof-item{
  flex:1 1 0;
  display:flex;align-items:center;gap:11px;
  padding:20px 26px;
  border-left:1px solid var(--ghk-line);
}
.ghk-proof-item:first-child{border-left:0;padding-left:0;}
.ghk-proof-item:last-child{padding-right:0;}
.ghk-proof-item > div{min-width:0;}
.ghk-proof-item strong{
  display:block;
  font-size:15px;font-weight:700;letter-spacing:-.015em;
  color:var(--ghk-ink);line-height:1.25;
}
.ghk-proof-item small{
  display:block;
  font-size:12.5px;color:var(--ghk-muted);
  line-height:1.35;margin-top:2px;
}
.ghk-stars{color:#F0A500;font-size:13px;letter-spacing:1.5px;line-height:1;display:block;margin-bottom:3px;}
.ghk-proof-g{flex:0 0 auto;margin-top:1px;}

/* =========================================================================
   5. RESPONSIVE
   ========================================================================= */
@media(max-width:1024px){
  .ghk-grid{
    grid-template-columns:1fr;
    gap:46px 0;
    padding:58px 0 56px;
    align-items:start;
  }
  .ghk-copy{max-width:620px;}
  .ghk-frame{box-shadow:0 20px 46px -32px rgba(14,20,24,.32);}
  .ghk-shots{max-height:min(46vh,400px);}
}

@media(max-width:760px){
  .ghk-grid{padding:42px 0 34px;gap:34px 0;}

  .ghk-rule{width:32px;margin-bottom:16px;}
  .ghk-eyebrow{font-size:10.5px;letter-spacing:.16em;margin-bottom:16px;}

  /* the mobile fix: left-aligned, tight measure, no centered 7-line paragraph */
  .ghk-title{
    font-size:clamp(33px,8.7vw,46px);
    line-height:1.05;
    letter-spacing:-.032em;
    margin-bottom:18px;
  }
  .ghk-title em{font-size:1.08em;}
  .ghk-sub{font-size:16px;line-height:1.6;max-width:34ch;margin-bottom:28px;}

  .ghk-actions{gap:14px 22px;}
  .ghk-btn{padding:15px 26px;font-size:14.5px;}
  .ghk-link{font-size:14.5px;}

  .ghk-frame{box-shadow:0 18px 40px -30px rgba(14,20,24,.34);}
  .ghk-shots{max-height:none;}
  .ghk-placard{padding:13px 16px;gap:12px;}
  .ghk-placard-id strong{font-size:13.5px;}
  .ghk-placard-id span{font-size:11.5px;}
  .ghk-ticks button{width:11px;}

  /* proof strip: 2×2 with hairlines instead of a wrapping mess */
  .ghk-proof-inner{flex-wrap:wrap;padding:0;}
  .ghk-proof-item{
    flex:0 0 50%;
    padding:14px 16px;
    gap:9px;
    border-left:0;
    border-top:1px solid var(--ghk-line);
  }
  .ghk-proof-item:nth-child(odd){border-right:1px solid var(--ghk-line);}
  .ghk-proof-item:nth-child(1),
  .ghk-proof-item:nth-child(2){border-top:0;}
  .ghk-proof-item:first-child{padding-left:20px;}
  .ghk-proof-item:last-child{padding-right:20px;}
  /* keep every cell to two tight lines — no wrapping, no 260px-tall block */
  .ghk-proof-item strong,
  .ghk-proof-item small{white-space:nowrap;}
  .ghk-proof-item strong{font-size:13px;}
  .ghk-proof-item small{font-size:11px;}
  .ghk-stars{font-size:12px;letter-spacing:1px;margin-bottom:2px;}
  .ghk-proof-g svg{width:19px;height:19px;}
}

@media(max-width:400px){
  .ghk-ticks{display:none;}          /* keeps the placard readable at 320–400px */
  .ghk-placard-no{font-size:10.5px;}
}

/* =========================================================================
   6. ENTRANCE  — one restrained fade-up, nothing loops
   ========================================================================= */
.ghk[data-anim] .ghk-rule,
.ghk[data-anim] .ghk-eyebrow,
.ghk[data-anim] .ghk-title,
.ghk[data-anim] .ghk-sub,
.ghk[data-anim] .ghk-actions,
.ghk[data-anim] .ghk-frame,
.ghk[data-anim] .ghk-proof-item{
  opacity:0;
  transform:translateY(14px);
}
.ghk.is-in .ghk-rule,
.ghk.is-in .ghk-eyebrow,
.ghk.is-in .ghk-title,
.ghk.is-in .ghk-sub,
.ghk.is-in .ghk-actions,
.ghk.is-in .ghk-frame,
.ghk.is-in .ghk-proof-item{
  opacity:1;transform:none;
  transition:opacity .62s var(--ghk-ease),transform .62s var(--ghk-ease);
}
.ghk.is-in .ghk-rule       {transition-delay:.02s;}
.ghk.is-in .ghk-eyebrow    {transition-delay:.07s;}
.ghk.is-in .ghk-title      {transition-delay:.13s;}
.ghk.is-in .ghk-sub        {transition-delay:.21s;}
.ghk.is-in .ghk-actions    {transition-delay:.28s;}
.ghk.is-in .ghk-frame      {transition-delay:.20s;}
.ghk.is-in .ghk-proof-item {transition-delay:.36s;}

@media(prefers-reduced-motion:reduce){
  .ghk[data-anim] .ghk-rule,
  .ghk[data-anim] .ghk-eyebrow,
  .ghk[data-anim] .ghk-title,
  .ghk[data-anim] .ghk-sub,
  .ghk[data-anim] .ghk-actions,
  .ghk[data-anim] .ghk-frame,
  .ghk[data-anim] .ghk-proof-item{opacity:1;transform:none;transition:none;}
  .ghk-shots img{transition:none;}
}