/* ==========================================================================
   BRIXEL — CYBER GOLD
   Loaded after styles.css, which still owns the header, the mobile menu, the
   footer and the message form. Those three are wired to main.js and to a
   working mail endpoint, so they are re-skinned here rather than rebuilt.
   ========================================================================== */

:root{
  --bg:        #050505;
  --bg-2:      #0a0a0a;
  --bg-3:      #0d0d0d;
  --gold:      #e2c275;
  --gold-dp:   #9e7d3b;
  --gold-lo:   #a88642;
  --text:      #f4f2ee;
  --muted:     #9a958c;
  --dim:       #6a655d;
  --hair:      rgba(226,194,117,.2);
  --hair-soft: rgba(255,255,255,.06);
  --glass:     rgba(255,255,255,.015);
  --spec:      inset 0 1px 0 0 rgba(226,194,117,.25), 0 20px 40px -15px rgba(0,0,0,.7);
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --sans:      -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif;
  --wrap:      1180px;
}

html{ background:var(--bg); }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}

/* Film grain. Fixed, so it never travels with the scroll and never repaints. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The skip link is positioned off-screen by styles.css until it takes focus,
   so it has to stay out of this — otherwise it lands in the top corner. */
/* The skip link stays out: styles.css parks it off-screen until focused. */
body > *:not(.skip-link){ position:relative; z-index:1; }

/* --- type ---------------------------------------------------------------- */
h1, h2, h3, .cg-num, .cg-big{ font-family:var(--sans); letter-spacing:-.03em; font-weight:600; }
h1{ font-size:clamp(2.5rem,6.2vw,4.6rem); line-height:1.02; margin:0; }
h2{ font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.06; margin:0; }
h3{ font-size:1.22rem; line-height:1.25; margin:0; font-weight:600; }
p{ letter-spacing:-.008em; }

.cg-grad{
  background:linear-gradient(135deg,#fff 0%, var(--gold) 60%, var(--gold-lo) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cg-ix{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1rem; font-weight:600;
}
.cg-ix i{ color:var(--dim); font-style:normal; margin-right:.5rem; }
.cg-wrap{ width:min(var(--wrap), calc(100% - 2.6rem)); margin-inline:auto; }
.cg-sec{ padding:clamp(4rem,10vh,7.5rem) 0; }
.cg-lead{ color:var(--muted); font-size:1.03rem; line-height:1.62; max-width:56ch; margin:0; }

/* --- scroll reveal ------------------------------------------------------- */
.js .cg-up{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .cg-up.visible{ opacity:1; transform:none; }
.js .cg-stag > *{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0) * 80ms); }
.js .cg-stag.visible > *{ opacity:1; transform:none; }

/* ==========================================================================
   BUTTONS — text roll
   The label is duplicated and the pair slides one line up on hover. The
   wrapper is fixed to 1em so nothing reflows while it moves.
   ========================================================================== */
.cg-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.7rem; border-radius:8px; border:1px solid transparent;
  font:600 .84rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; text-decoration:none; transition:border-color .4s var(--ease), background .4s var(--ease);
}
.cg-roll{ display:block; height:1em; overflow:hidden; }
.cg-roll b{ display:block; font-weight:inherit; transition:transform .55s var(--ease); }
.cg-btn:hover .cg-roll b{ transform:translateY(-100%); }

.cg-btn-gold{ background:var(--gold); color:#17140c; box-shadow:var(--spec); }
.cg-btn-gold:hover{ background:#efd9a6; }
.cg-btn-glass{
  background:var(--glass); color:var(--text); border-color:var(--hair);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.cg-btn-glass:hover{ border-color:var(--gold); background:rgba(226,194,117,.06); }
.cg-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav.is-float{ background:transparent; }
.nav-inner{ align-items:center; }
.cg-brand{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.cg-brand span{ font-weight:600; font-size:.95rem; letter-spacing:-.02em; color:var(--text); }
.nav-links a{
  font-size:.8rem; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
  font-weight:500; transition:color .3s var(--ease);
}
.nav-links a:hover{ color:var(--gold); }

.cg-live{
  display:inline-flex; align-items:center; gap:.5rem; margin-right:1rem;
  padding:.42rem .8rem; border-radius:99px;
  border:1px solid var(--hair-soft); background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  font-size:.72rem; color:var(--muted); letter-spacing:.04em; white-space:nowrap;
}
.cg-dot{
  width:7px; height:7px; border-radius:50%; background:#3ddc84; flex:none;
  box-shadow:0 0 0 0 rgba(61,220,132,.5); animation:cg-pulse 2.4s ease-out infinite;
}
@keyframes cg-pulse{ to{ box-shadow:0 0 0 9px rgba(61,220,132,0); } }
@media(max-width:900px){ .cg-live{ display:none; } }
@media(max-width:640px){ .nav-right .cg-btn{ display:none; } }

/* --- the offer, dead centre of the fixed bar ----------------------------- */
/* Absolutely centred rather than laid out between the logo and the menu:
   those two change width with the language and the breakpoint, and the button
   has to sit in the middle of the screen, not in the middle of what is left
   over. */
.nav-inner{ position:relative; }
.cg-nav-cta{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:.72rem 1.4rem; white-space:nowrap; z-index:2;
}
@media(max-width:1199px){ .nav-links{ display:none; } }
@media(max-width:560px){
  /* the wordmark drops so the button keeps the middle of a narrow screen */
  .cg-brand span{ display:none; }
  .cg-nav-cta{ padding:.62rem 1rem; font-size:.72rem; letter-spacing:.08em; }
}
@media(max-width:360px){ .cg-nav-cta{ padding:.58rem .8rem; font-size:.68rem; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.cg-hero{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(7rem,16vh,11rem) 0 clamp(3rem,7vh,5rem); }
.cg-hero-bg{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:url("assets/img/globe.webp?v=dark1") right center / cover no-repeat;
  opacity:1;
}
/* On a phone the 16:9 crop throws most of the planet away, so the vertical
   frame takes over — it was drawn for exactly this shape. */
@media(max-width:820px){
  .cg-hero-bg{
    background-image:url("assets/img/globe-m.webp?v=dark1");
    background-position:center top;
    background-size:112% auto;
  }
}
/* the spotlight the brief asks for, over the photo rather than instead of it */
.cg-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 70% at 78% 42%, rgba(226,194,117,.16) 0%, transparent 75%),
    linear-gradient(to right, var(--bg) 2%, rgba(5,5,5,.78) 30%, rgba(5,5,5,.10) 60%, rgba(5,5,5,.28) 100%),
    linear-gradient(to bottom, rgba(5,5,5,.72) 0%, transparent 20%, transparent 76%, var(--bg) 100%);
}
.cg-pill{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.7rem;
  padding:.5rem 1.05rem; border-radius:99px;
  border:1px solid var(--hair); background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  font-size:.68rem; letter-spacing:.19em; text-transform:uppercase; color:var(--gold);
  font-weight:600;
}
.cg-hero h1{ max-width:16ch; }
.cg-hero .cg-lead{ margin:1.5rem 0 2.3rem; max-width:44ch; }
.cg-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
@media(max-width:560px){ .cg-cta{ flex-direction:column; align-items:stretch; } .cg-cta .cg-btn{ justify-content:center; } }
@media(max-width:820px){
  /* stacked, the words sit low, so the veil runs top-to-bottom instead */
  .cg-hero::after{
    background:
      radial-gradient(70% 40% at 50% 22%, rgba(226,194,117,.14) 0%, transparent 70%),
      linear-gradient(to bottom, rgba(5,5,5,.62) 0%, rgba(5,5,5,.18) 26%, rgba(5,5,5,.72) 58%, var(--bg) 82%);
  }
  .cg-hero{ padding-top:clamp(9rem,26vh,13rem); }
}

/* ==========================================================================
   BENTO — cards that light up under the cursor
   ========================================================================== */
.cg-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:clamp(2.4rem,5vh,3.6rem); }
@media(min-width:900px){
  .cg-grid{ grid-template-columns:repeat(3,1fr); }
  .cg-card-wide{ grid-column:span 2; }
}
.cg-card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(1.5rem,2.6vw,2.1rem);
  border-radius:14px; border:1px solid var(--hair-soft); background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--spec);
  transition:border-color .45s var(--ease);
}
.cg-card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(226,194,117,.12), transparent 65%);
}
@media(hover:hover){
  .cg-card:hover{ border-color:var(--hair); }
  .cg-card:hover::before{ opacity:1; }
}
.cg-card h3{ margin-bottom:.7rem; }
.cg-card p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin:0; }

.cg-big{ font-size:clamp(2.6rem,6vw,3.9rem); line-height:1; margin:0 0 .35rem; }
.cg-cap{ color:var(--dim); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; margin:0; }

/* bar chart, pure CSS */
.cg-bars{ display:grid; gap:.7rem; margin-top:1.6rem; }
.cg-bar{ display:grid; grid-template-columns:minmax(0,7.5rem) 1fr auto; align-items:center; gap:.9rem; font-size:.83rem; }
.cg-bar span:first-child{ color:var(--muted); }
.cg-bar i{ display:block; height:9px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; }
.cg-bar i b{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold-dp),var(--gold)); }
.cg-bar em{ font-style:normal; color:var(--gold); }
.cg-bar.is-them i b{ background:rgba(216,212,204,.34); }
.cg-bar.is-them span:first-child, .cg-bar.is-them em{ color:var(--dim); }
@media(max-width:560px){
  .cg-bar{ grid-template-columns:1fr auto; row-gap:.3rem; }
  .cg-bar i{ grid-column:1/-1; }
}

.cg-pair{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.cg-stars{ color:var(--gold); letter-spacing:.2em; font-size:.9rem; }
.cg-quote{ margin:.9rem 0 0; font-size:1.02rem; line-height:1.5; color:var(--text); }
.cg-who{ margin:1rem 0 0; font-size:.8rem; color:var(--dim); }

/* ==========================================================================
   SERVICES — gradient border by background-clip
   ========================================================================== */
/* Each card carries its own two gold stops, so the three read as a set that
   was lit rather than three copies of one card. All of them stay inside the
   brand's warm range — the reference used three different hues, which would
   put colours on this page that exist nowhere else on it. */
.cg-svc{
  --g1:#f4e3bb; --g2:#9e7d3b; --halo:226,194,117;
  position:relative;
  padding:clamp(1.7rem,3vw,2.4rem); border-radius:22px;
  background:#0a0a0a; border:none;
  display:grid; gap:.9rem; align-content:start;
  /* the diffuse halo: two shadows, one tight and one wide and faint */
  box-shadow:
    0 0 34px -8px rgba(var(--halo), .40),
    0 0 96px -26px rgba(var(--halo), .34);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cg-svc:nth-child(2){ --g1:#ffeccb; --g2:#c9a961; --halo:240,220,174; }
.cg-svc:nth-child(3){ --g1:#e2c275; --g2:#8f6f2e; --halo:201,169,97; }

/* The content gets its own layer so the border and the inner light can sit
   either side of it. */
.cg-svc > *{ position:relative; z-index:1; }

/* THE BORDER: a gradient painted across the whole card, then masked so only
   the outer 2px survives. This is the only way to get a gradient border with
   a rounded corner that actually follows the radius. */
.cg-svc::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  z-index:2; pointer-events:none;
  background:linear-gradient(155deg, var(--g1) 0%, var(--g2) 52%, var(--g1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
/* the cursor light, spilling inward behind the words */
.cg-svc::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mouse-x,50%) var(--mouse-y,50%),
             rgba(var(--halo), .16), transparent 62%);
}
@media(hover:hover){
  .cg-svc:hover{
    transform:translateY(-4px);
    box-shadow:
      0 0 44px -6px rgba(var(--halo), .55),
      0 0 120px -24px rgba(var(--halo), .45);
  }
  .cg-svc:hover::after{ opacity:1; }
}

/* the icon at the top, as in the reference */
.cg-svc-ico{
  display:grid; place-content:center; width:44px; height:44px;
  border-radius:12px; color:var(--g1);
  border:1px solid rgba(var(--halo), .28);
  background:linear-gradient(160deg, rgba(var(--halo),.12), rgba(var(--halo),.02));
  margin-bottom:.4rem;
}
.cg-svc-ico svg{ width:21px; height:21px; display:block; }

@media (prefers-reduced-motion: reduce){
  .cg-svc, .cg-svc::after{ transition:none; }
  .cg-svc:hover{ transform:none; }
}
.cg-svc-n{ font-size:.72rem; letter-spacing:.2em; color:var(--gold); font-weight:600; }
.cg-svc p{ color:var(--muted); font-size:.93rem; line-height:1.62; margin:0; }
.cg-svc-go{
  margin-top:.4rem; display:inline-flex; align-items:center; gap:.5rem;
  color:var(--gold); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; text-decoration:none;
}
.cg-svc-go svg{ transition:transform .4s var(--ease); }
.cg-svc:hover .cg-svc-go svg{ transform:translateX(4px); }

/* ==========================================================================
   CALCULATOR
   Written for the phone first: one column, 44px touch targets, thick sliders.
   It opens into two columns only once there is room at 940px.
   ========================================================================== */
.cg-calc-sec{ background:var(--bg-3); border-block:1px solid var(--hair-soft); }
.cg-calc-head{ text-align:center; margin:0 auto clamp(2rem,5vh,3rem); }
.cg-calc-head h2{ max-width:20ch; margin-inline:auto; }
.cg-calc-head .cg-ix{ justify-content:center; display:flex; }

.cg-calc{
  display:grid; grid-template-columns:1fr;
  border:1px solid var(--hair-soft); border-radius:18px; overflow:hidden;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
@media(min-width:940px){ .cg-calc{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); } }

.cg-calc-in{ padding:clamp(1.3rem,3vw,2.2rem); display:grid; gap:1.9rem; align-content:start; }
.cg-calc-out{
  padding:clamp(1.3rem,3vw,2.2rem); display:grid; gap:.85rem; align-content:start;
  background:rgba(0,0,0,.4); border-top:1px solid var(--hair-soft);
}
@media(min-width:940px){ .cg-calc-out{ border-top:0; border-left:1px solid var(--hair-soft); } }

/* --- one question ------------------------------------------------------- */
.cg-q{ border:0; margin:0; padding:0; display:grid; gap:.6rem; }
.cg-q legend, .cg-qlab{
  padding:0; font-size:.94rem; color:var(--text); font-weight:500;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; width:100%;
}
.cg-q legend{ margin-bottom:.2rem; }
.cg-qlab b{ font-size:1.5rem; font-weight:600; color:var(--gold); letter-spacing:-.03em; }

/* --- radio and checkbox rows -------------------------------------------- */
.cg-opt{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem;
  min-height:44px; padding:.55rem .2rem; cursor:pointer;
  color:var(--muted); font-size:.93rem;
  transition:color .3s var(--ease);
}
.cg-opt:hover{ color:var(--text); }
.cg-opt input{ width:18px; height:18px; accent-color:var(--gold); cursor:pointer; }
.cg-opt input:checked ~ span{ color:var(--text); }
.cg-opt em{ font-style:normal; font-size:.78rem; color:var(--gold); white-space:nowrap; }

/* --- sliders ------------------------------------------------------------ */
.cg-q input[type=range]{
  width:100%; height:34px; accent-color:var(--gold); cursor:pointer; margin:0;
}
.cg-ends{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--dim); }
.cg-ends i{ font-style:normal; }

/* --- the platform picker ------------------------------------------------ */
.cg-q select{
  width:100%; appearance:none; -webkit-appearance:none; min-height:46px;
  padding:.8rem 2.4rem .8rem 1rem; border-radius:10px;
  border:1px solid var(--hair-soft); background-color:rgba(255,255,255,.02);
  color:var(--text); font-family:var(--sans); font-size:.95rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e2c275' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.cg-q select:focus{ outline:none; border-color:var(--gold-dp); background-color:rgba(226,194,117,.05); }
.cg-q select option{ background:var(--bg-2); color:var(--text); }

/* --- the estimate ------------------------------------------------------- */
.cg-out-h{ margin:0; font-size:1.3rem; }
.cg-out-sub{ margin:0 0 .5rem; color:var(--muted); font-size:.87rem; line-height:1.55; }
.cg-out-big{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:.4rem 0 0; }
.cg-out-big b{
  font-size:clamp(2.8rem,10vw,3.8rem); line-height:.95; letter-spacing:-.04em; font-weight:600;
  background:linear-gradient(135deg,#fff 0%, var(--gold) 60%, var(--gold-lo) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cg-out-big span{ color:var(--muted); font-size:.95rem; }
.cg-out-line{ margin:0 0 .5rem; color:var(--muted); font-size:.86rem; }
.cg-out-line b{ color:var(--text); font-weight:600; }

.cg-est{
  padding:1rem 1.1rem; border-radius:12px;
  border:1px solid var(--hair-soft); background:rgba(255,255,255,.02);
}
.cg-est p{
  margin:.25rem 0 .3rem; font-size:1.85rem; font-weight:600;
  letter-spacing:-.04em; color:var(--muted);
}
.cg-est small{ color:var(--dim); font-size:.76rem; line-height:1.5; display:block; }

/* the one that matters, lit like the service cards */
.cg-est.is-us{
  border:none; color:#17140c;
  background:linear-gradient(135deg, #f4e3bb 0%, var(--gold) 45%, #c9993f 100%);
  box-shadow:0 0 34px -10px rgba(226,194,117,.5), 0 0 90px -28px rgba(226,194,117,.4);
}
.cg-est.is-us .cg-cap{ color:rgba(23,20,12,.7); }
.cg-est.is-us p{ color:#17140c; font-size:2.2rem; }
.cg-est.is-us small{ color:rgba(23,20,12,.78); }
.cg-save{ display:block; margin-top:.55rem; font-size:.85rem; font-weight:600; color:#17140c; }

.cg-monthly{ margin:.2rem 0 0; color:var(--muted); font-size:.87rem; }
.cg-monthly b{ color:var(--gold); font-weight:600; }
.cg-calc-out .cg-btn{ justify-self:stretch; justify-content:center; margin-top:.6rem; }
@media(min-width:940px){ .cg-calc-out .cg-btn{ justify-self:start; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.cg-con{ display:grid; gap:clamp(2rem,4vw,3.4rem); grid-template-columns:1fr; margin-top:clamp(2.2rem,5vh,3.2rem); }
@media(min-width:920px){ .cg-con{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.cg-con-list{ display:grid; gap:1rem; align-content:start; }
.cg-con-item{
  display:grid; gap:.25rem; padding:1.05rem 1.2rem; border-radius:11px;
  border:1px solid var(--hair-soft); background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  text-decoration:none; transition:border-color .35s var(--ease);
}
.cg-con-item:hover{ border-color:var(--hair); }
.cg-con-item span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.cg-con-item b{ font-size:1.02rem; font-weight:500; color:var(--text); }
.cg-con-item.is-gold b{ color:var(--gold); }

/* the form keeps its markup and its endpoint; only the skin changes */
.hm-form .msg-field span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.hm-form input, .hm-form textarea, .hm-form select{
  background:rgba(255,255,255,.02); border:1px solid var(--hair-soft); border-radius:10px;
  color:var(--text); font-family:var(--sans); font-size:.95rem; padding:.9rem 1rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hm-form input:focus, .hm-form textarea:focus, .hm-form select:focus{
  outline:none; border-color:var(--gold-dp); background:rgba(226,194,117,.04);
}
.hm-privacy{ color:var(--dim); font-size:.78rem; line-height:1.55; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .cg-dot{ animation:none; }
  .js .cg-up, .js .cg-up.visible,
  .js .cg-stag > *, .js .cg-stag.visible > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .cg-btn, .cg-roll b, .cg-card, .cg-card::before, .cg-svc, .cg-svc-go svg{ transition:none; }
  .cg-btn:hover .cg-roll b{ transform:none; }
}


/* --- the negotiable badge ------------------------------------------------ */
/* Sits beside the figure rather than under it, so it reads as a condition of
   the price and not as a footnote to it. Dark on the gold card, which is the
   only contrast that survives on that background. */
.cg-us-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem; flex-wrap:wrap;
}
.cg-nego{
  font-style:normal; text-align:right; line-height:1.3;
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:#17140c; opacity:.62;
  padding:.4rem .6rem; border-radius:7px;
  border:1px solid rgba(23,20,12,.28); background:rgba(23,20,12,.07);
}
@media(max-width:420px){
  .cg-us-row{ gap:.5rem; }
  .cg-nego{ font-size:.58rem; padding:.32rem .5rem; }
}

/* --- the little example under a question -------------------------------- */
.cg-hint{ color:var(--dim); font-size:.76rem; line-height:1.5; display:block; margin-top:.1rem; }

/* ==========================================================================
   MARQUEE — the seam between the hero photo and the page
   Two identical tracks side by side, the pair shifted 50% left. The moment
   the first copy leaves, the second is exactly where the first began, so the
   loop has no jump in it. Only transform moves, so it stays on the GPU.
   ========================================================================== */
.cg-marks{
  position:relative; overflow:hidden;
  padding:1.15rem 0;
  background:linear-gradient(180deg, rgba(226,194,117,.05), rgba(226,194,117,.02));
  border-top:1px solid rgba(226,194,117,.35);
  border-bottom:1px solid rgba(226,194,117,.35);
  box-shadow:0 0 34px -12px rgba(226,194,117,.35);
}
/* the ends fade out, so marks enter and leave instead of being chopped */
.cg-marks::before, .cg-marks::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(40px,9vw,110px);
  z-index:2; pointer-events:none;
}
.cg-marks::before{ left:0;  background:linear-gradient(to right, var(--bg), transparent); }
.cg-marks::after{  right:0; background:linear-gradient(to left,  var(--bg), transparent); }

.cg-marks-rail{ display:flex; width:max-content; animation:cg-run 58s linear infinite; }
.cg-marks-track{
  display:flex; align-items:center; gap:2.6rem;
  list-style:none; margin:0; padding:0 1.3rem;
}
@keyframes cg-run{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.cg-marks:hover .cg-marks-rail{ animation-play-state:paused; }

.cg-marks .hz-mark{
  display:inline-flex; align-items:center; gap:.5rem; flex:0 0 auto;
  color:var(--brand); opacity:.85;
}
.cg-marks .hz-mark svg{ width:19px; height:19px; display:block; flex:none; }
.cg-marks .hz-mark b{
  font-size:.83rem; font-weight:500; color:var(--muted); white-space:nowrap;
  letter-spacing:-.01em;
}

@media (prefers-reduced-motion: reduce){
  .cg-marks-rail{ animation:none; }
  .cg-marks{ overflow-x:auto; scrollbar-width:none; }
  .cg-marks::-webkit-scrollbar{ display:none; }
}

/* --- what we build on when there is no site yet --------------------------- */
.cg-static{
  margin:0; padding:.9rem 1rem; border-radius:10px;
  border:1px solid rgba(226,194,117,.22); background:rgba(226,194,117,.05);
  color:var(--muted); font-size:.83rem; line-height:1.55;
}

/* ==========================================================================
   REVIEWS — a rail you drag
   scroll-snap rather than a hand-written carousel: the browser does the
   momentum, the rubber-banding and the keyboard, and on a phone it feels like
   the rest of the operating system instead of like a widget.
   ========================================================================== */
.cg-card-revs{ display:grid; gap:.9rem; align-content:start; }
.cg-tp{ color:#00b67a; }
.cg-revs{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  margin-inline:calc(clamp(1.5rem,2.6vw,2.1rem) * -1);
  padding-inline:clamp(1.5rem,2.6vw,2.1rem); padding-bottom:.4rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cg-revs::-webkit-scrollbar{ display:none; }
.cg-revs:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:10px; }
.cg-rev{
  flex:0 0 min(100%, 20rem); scroll-snap-align:start; margin:0;
  display:grid; gap:.6rem; align-content:start;
}
.cg-rev blockquote{ margin:0; font-size:.97rem; line-height:1.5; color:var(--text); }
.cg-rev figcaption{ display:grid; gap:.1rem; }
.cg-rev figcaption b{ font-size:.85rem; font-weight:600; color:var(--text); }
.cg-rev figcaption span{ font-size:.76rem; color:var(--dim); }

/* Trustpilot green: the one colour on this page that is not gold, and it
   earns the exception — in gold those stars would read as ours, not theirs. */
.cg-stars{ color:#00b67a; letter-spacing:.18em; font-size:.95rem; margin:0; }
.cg-revs-hint{ margin:0; font-size:.74rem; color:var(--dim); letter-spacing:.08em; }
@media(min-width:1100px){ .cg-revs-hint{ opacity:.6; } }

/* `.cg-card p` sets muted on every paragraph inside a bento card, and both of
   these are paragraphs, so they need the extra class to win on specificity. */
.cg-card .cg-stars, .cg-rev .cg-stars{ color:#00b67a; }
.cg-card .cg-tp{ color:#00b67a; }

/* ==========================================================================
   NAVBAR — fixed, not absolute
   styles.css parks the floating header in position:absolute, which means it
   scrolls away with the hero and the logo and the menu are simply gone for
   the rest of the page. Fixed, with a surface that only appears once there is
   something behind it to separate from.
   ========================================================================== */
.nav.is-float{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:transparent; border-bottom:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* With no bar behind them these travel over the platform strip and over the
   gold estimate card — the two light areas on the page. The shadow is not
   visible; it just stops them dissolving when they cross one. */
.nav.is-float .brand-logo{ filter:drop-shadow(0 1px 10px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(0,0,0,.8)); }
.nav.is-float .cg-brand span,
.nav.is-float .nav-links a,
.nav.is-float .cg-live{ text-shadow:0 1px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8); }
.nav.is-float .cg-live{ background:rgba(5,5,5,.5); border-color:rgba(255,255,255,.08); }
.burger i{ background:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.9); }

/* ==========================================================================
   THE SURFACE — static, but not empty
   Two fixed layers behind everything: hairline gold columns, and one warm
   pool of light at the top. Nothing animates; the luxury is in the restraint
   and in the fact that the lines are almost too faint to notice.
   ========================================================================== */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(226,194,117,.055) 0 1px,
      transparent 1px 148px),
    radial-gradient(120% 62% at 50% -12%, rgba(226,194,117,.075), transparent 62%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
          mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
}
@media(max-width:700px){
  body::after{ background-size:74px 100%, auto; }
}

/* contact, now that the form is gone */
.cg-con.is-solo{ grid-template-columns:1fr; max-width:34rem; }
.cg-con.is-solo .cg-con-item{ padding:1.2rem 1.35rem; }

@media (prefers-reduced-motion: reduce){
}

/* ==========================================================================
   HIDDEN MEANS HIDDEN
   The `hidden` attribute only carries display:none from the browser's own
   sheet, which any class with a display of its own outranks. `.cg-q` sets
   display:grid, so the platform question stayed on screen while reporting
   itself as hidden. Stated explicitly, it cannot drift again.
   ========================================================================== */
.cg-q[hidden], .cg-static[hidden], .cg-est[hidden], [data-revs][hidden]{ display:none !important; }

/* ==========================================================================
   HERO — two columns once there is room for them
   The form only appears where it fits. On a phone it would push the headline
   off the screen, and that is what the docked bar at the bottom is for.
   ========================================================================== */
.cg-hero-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.4rem); align-items:center; }
.cg-hero-form{ display:none; }
@media(min-width:1000px){
  .cg-hero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); }
  .cg-hero-form{ display:block; }
  .cg-hero h1{ max-width:none; }
  .cg-hero .cg-lead{ max-width:40ch; }
}
.cg-form{
  display:grid; gap:.85rem;
  padding:clamp(1.4rem,2.2vw,1.9rem); border-radius:16px;
  border:1px solid rgba(226,194,117,.22);
  background:rgba(10,10,9,.72);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:var(--spec);
}
.cg-form-h{ margin:0; font-size:1.25rem; font-weight:600; letter-spacing:-.03em; }
.cg-form-sub{ margin:0 0 .3rem; color:var(--muted); font-size:.84rem; line-height:1.5; }
.cg-form-note{ margin:0; color:var(--dim); font-size:.73rem; }
.cg-form .msg-field span{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.cg-form button{ width:100%; justify-content:center; }

/* ==========================================================================
   REVIEWS — one card each, and the rail never ends
   Three identical sets sit side by side and the scroll starts on the middle
   one. When the reader crosses into an outer set, the scroll position jumps
   back by exactly one set — same pixels on screen, so the jump is invisible,
   and there is always another card in both directions.
   ========================================================================== */
.cg-revs-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:clamp(2.2rem,5vh,3.2rem) 0 1rem;
}
.cg-revs{
  display:flex; overflow-x:auto; gap:1rem;
  margin-inline:calc(var(--gutter, 1.3rem) * -1);
  padding-inline:var(--gutter, 1.3rem); padding-bottom:.5rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.cg-revs::-webkit-scrollbar{ display:none; }
.cg-revs:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:14px; }
.cg-revs-set{ display:flex; gap:1rem; flex:0 0 auto; }
.cg-rev{
  flex:0 0 min(84vw, 21rem); margin:0;
  display:grid; gap:.7rem; align-content:start;
  padding:1.3rem 1.4rem; border-radius:16px;
  border:1px solid var(--hair-soft); background:var(--glass);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--spec);
}
.cg-rev blockquote{ margin:0; font-size:.96rem; line-height:1.55; color:var(--text); }
.cg-rev figcaption{ display:grid; gap:.15rem; margin-top:auto; }
.cg-rev figcaption b{ font-size:.85rem; font-weight:600; color:var(--text); }
.cg-rev figcaption span{ font-size:.75rem; color:var(--dim); }
.cg-revs .cg-stars{ color:#00b67a; letter-spacing:.18em; font-size:.95rem; margin:0; }

/* The centred button floats over the bar, so the links have to be pushed out
   of the middle or they end up underneath it. Sent hard right, next to the
   clock, leaving the centre free. */
@media(min-width:1200px){
  /* three explicit tracks beat a flex reparto that was already settled */
  .nav-inner{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center; gap:1.6rem;
  }
  .nav-links{ justify-self:start; gap:1.4rem; margin:0; }
  .nav-links a{ font-size:.74rem; letter-spacing:.05em; }
  .nav-right{ justify-self:end; }
}

/* styles.css only shows the burger on small screens, but the text nav now
   steps aside at 1199px. Between the two there was a band with neither. */
@media(max-width:1199px){
  .burger{ display:inline-flex !important; }
}

/* --- the Search Console shot -------------------------------------------- */
/* A screenshot cannot be typed out the way two numbers in HTML can, which is
   the whole reason it is here. Gold frame so it reads as evidence on the page
   rather than as a stray picture. */
.cg-card-proof{ display:grid; gap:.9rem; align-content:start; }
.cg-shot{
  margin:0; border-radius:12px; overflow:hidden;
  border:2px solid var(--gold); background:#0d0d0c;
  box-shadow:0 0 28px -10px rgba(226,194,117,.45);
}
.cg-shot img{ width:100%; height:auto; display:block; }
.cg-shot figcaption{
  padding:.55rem .8rem; font-size:.72rem; color:var(--dim);
  background:rgba(226,194,117,.06); border-top:1px solid rgba(226,194,117,.22);
}
.cg-honest{ color:var(--gold-lo) !important; font-weight:600; font-size:.9rem !important; }

/* the line that ties the arithmetic to a site you can open */
.cg-real{
  margin:0 0 .4rem; padding:.75rem .9rem; border-radius:9px;
  border:1px solid rgba(226,194,117,.24); background:rgba(226,194,117,.05);
  color:var(--muted); font-size:.82rem; line-height:1.5;
}
.cg-real b{ color:var(--gold-lt); font-weight:600; }

/* the moment a visitor finds out their platform makes it cheap */
.cg-good{
  margin:.1rem 0 0; padding:.7rem .85rem; border-radius:9px;
  border:1px solid rgba(0,182,122,.35); background:rgba(0,182,122,.08);
  color:#7fe3bb; font-size:.82rem; line-height:1.5;
}

/* the honest warning: this platform will not hold what you are asking for */
.cg-warn{
  margin:.1rem 0 0; padding:.7rem .85rem; border-radius:9px;
  border:1px solid rgba(226,194,117,.4); background:rgba(226,194,117,.07);
  color:var(--gold-lt); font-size:.82rem; line-height:1.5;
}

/* ==========================================================================
   BURGER — three lines, and a clean cross
   styles.css draws two and animates them into an X. With a third the icon
   reads as the one everyone knows; on open the middle one fades out while
   the outer two cross over it.
   ========================================================================== */
.burger{
  display:flex !important; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0;
}
.burger i{
  display:block; width:22px; height:2px; flex:0 0 auto; border-radius:2px;
  background:var(--text); margin:0 !important;
  box-shadow:0 1px 4px rgba(0,0,0,.7);
  transition:transform .4s var(--ease), opacity .25s var(--ease);
}
.burger:hover i{ background:var(--gold); }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; transform:scaleX(.4); }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce){ .burger i{ transition:none; } }


/* ---- the film: one click, nothing loads before it ---- */
.cg-film-sec{ padding-top:0; }
.cg-film-wrap{ max-width:820px; display:grid; gap:1rem; }
.cg-film-line{ font-family:"Instrument Serif", Georgia, serif; font-weight:400; letter-spacing:-.015em; font-size:clamp(1.5rem,3.6vw,2.2rem); line-height:1.15; margin:0; }
.cg-film-line em{ font-style:italic; color:var(--gold); }
.cg-film-hook{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.6; }
.nw-film{ position:relative; }
.nw-film-btn{ display:block; position:relative; width:100%; padding:0; cursor:pointer; border:1px solid rgba(226,194,117,.35); border-radius:14px; overflow:hidden; background:#000; color:inherit; box-shadow:0 0 30px -12px rgba(226,194,117,.45); }
.nw-film-btn img{ width:100%; height:auto; display:block; opacity:.92; }
.nw-film-btn:hover img{ opacity:1; }
.nw-film-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.nw-film-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); width:64px; height:64px; border-radius:50%; display:grid; place-content:center; background:rgba(10,10,9,.72); border:1px solid var(--gold-dp); color:var(--gold); }
.nw-film-btn:hover .nw-film-play{ background:var(--gold); color:#17140c; }
.nw-film-play svg{ margin-left:3px; }
.nw-film-vid{ width:100%; height:auto; display:block; border-radius:14px; background:#000; }
.nw-film-vid[hidden]{ display:none !important; }
.nw-film-btn[hidden]{ display:none !important; }
.nw-film-vid.is-v{ aspect-ratio:9/16; max-height:80vh; margin-inline:auto; width:auto; max-width:100%; }
@media(max-width:520px){ .nw-film-play{ width:52px; height:52px; } }




/* ---- motion: slide-ins and growing bars, transform/opacity only ---- */
.js .cg-up.cg-from-l{ transform:translateX(-44px); }
.js .cg-up.cg-from-r{ transform:translateX(44px); }
.js .cg-up.cg-from-l.visible, .js .cg-up.cg-from-r.visible{ transform:none; }
.js .cg-stag > .cg-from-l{ transform:translateX(-44px); }
.js .cg-stag > .cg-from-r{ transform:translateX(44px); }
.js .cg-stag.visible > .cg-from-l, .js .cg-stag.visible > .cg-from-r{ transform:none; }
.js .cg-bar i b{ transform:scaleX(0); transform-origin:left center; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .cg-stag.visible .cg-bar i b, .js .cg-up.visible .cg-bar i b, .js .visible .cg-bar i b{ transform:scaleX(1); }
.cg-bar:nth-child(2) i b{ transition-delay:.12s } .cg-bar:nth-child(3) i b{ transition-delay:.24s }
.cg-bar:nth-child(4) i b{ transition-delay:.36s } .cg-bar:nth-child(5) i b{ transition-delay:.48s }
@media (prefers-reduced-motion: reduce){
  .js .cg-up.cg-from-l, .js .cg-up.cg-from-r, .js .cg-stag > .cg-from-l, .js .cg-stag > .cg-from-r{ transform:none; }
  .js .cg-bar i b{ transform:none; transition:none; }
}

/* ---- reviews with the client's site behind them, and the client's logo ---- */
.cg-rev{ position:relative; overflow:hidden; isolation:isolate; }
.cg-rev::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--rev-bg, none) center 20% / cover no-repeat; opacity:.28; filter:saturate(.85) contrast(1.05); transform:scale(1.04); transition:transform 1.2s ease, opacity .6s ease; }
.cg-rev:hover::before{ transform:scale(1.09); opacity:.36; }
.cg-rev::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.86) 55%, rgba(5,5,5,.96) 100%); }
.cg-rev blockquote, .cg-rev figcaption, .cg-rev .cg-stars{ position:relative; z-index:1; }
.cg-rev-logo{ position:absolute; top:.85rem; right:.85rem; z-index:1; width:108px; height:auto; border-radius:8px; box-shadow:0 6px 24px -10px rgba(0,0,0,.9); opacity:.96; }
.cg-rev .cg-stars, .cg-rev blockquote{ padding-right:122px; }
@media(max-width:520px){ .cg-rev-logo{ width:84px; } .cg-rev .cg-stars, .cg-rev blockquote{ padding-right:96px; } }



/* ---- the link map: the home's tie to the 3,000 pages ---- */
.cg-map{ border-top:1px solid var(--hair-soft); padding:clamp(2.6rem,6vh,4rem) 0 .5rem; }
.cg-map-lead{ margin:0 0 1.8rem; font-family:"Instrument Serif", Georgia, serif; font-size:clamp(1.2rem,2.6vw,1.6rem); color:var(--text); }
.cg-map-lead span{ color:var(--dim); }
.cg-map-grid{ display:grid; gap:2rem 1.6rem; grid-template-columns:1fr; }
@media(min-width:640px){ .cg-map-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1000px){ .cg-map-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.cg-map-col h2{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem; font-family:inherit; font-weight:600; }
.cg-map-col ul{ list-style:none; margin:0; padding:0; font-size:.78rem; line-height:1.7; }
.cg-map-col li{ break-inside:avoid; }
.cg-map-col a{ color:var(--dim); text-decoration:none; }
.cg-map-col a:hover{ color:var(--gold); }
.cg-map-co ul, .cg-map-st ul{ columns:2; column-gap:1rem; }
@media(min-width:1000px){ .cg-map-co ul, .cg-map-st ul{ columns:2; } }
.cg-map-do a{ color:var(--muted); }