/* Gilhornes — merged Home + Our Process DESIGN.md's structural system (tracking, radii, spacing, border-not-shadow, alternating surface bands) carrying the Gilhornes palette rather than its cream and green. Single light theme, per DESIGN.md and the use scene: a brand owner researching at a desk in daylight. */ :root{ /* Brand — from brand/colour-system.html */ --gh-blue:#0466E7; /* the mark; fills and active states only */ --gh-blue-text:#0B4FB0; /* blue TEXT on white: 7.61:1 */ --gh-blue-deep:#093F8C; --gh-blue-lift:#7FB3FF; /* the accent on navy: 8.15:1 */ --gh-navy:#0A1A2F; --gh-amber:#C87A28; /* Neutrals — blue-biased, never pure grey */ --gh-surface:#FFFFFF; --gh-paper:#F6F8FB; --gh-line:rgba(18,26,36,.10); /* DESIGN.md: hairline ink, 8-12% */ --gh-line-strong:rgba(18,26,36,.22); --gh-muted:#5C6B7F; --gh-ink-2:#2A3442; --gh-ink:#121A24; --gh-display:'Archivo',ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif; --gh-body:'Barlow',ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif; --gh-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --gh-max:1200px; --gh-gap:80px; --r-card:9px; /* DESIGN.md */ --r-ui:6px; } /* ---------- base ---------- */ .gh *,.gh *::before,.gh *::after{box-sizing:border-box} .gh{ background:var(--gh-surface); color:var(--gh-ink); font-family:var(--gh-body); font-size:17px; /* lifted from DESIGN.md's 15px: this audience reads dense compliance copy */ line-height:1.55; letter-spacing:-.01em; /* DESIGN.md body tracking */ -webkit-font-smoothing:antialiased; overflow-x:hidden; } .gh img{max-width:100%;display:block} .gh h1,.gh h2,.gh h3{font-family:var(--gh-display);margin:0;text-wrap:balance} .gh p{margin:0} .gh a{color:var(--gh-blue-text);text-decoration-thickness:1px;text-underline-offset:3px} /* Browser surfaces — these ship with defaults belonging to no design system */ .gh ::selection{background:rgba(4,102,231,.18);color:var(--gh-ink)} .gh{caret-color:var(--gh-blue);scrollbar-color:var(--gh-line-strong) transparent} .gh :focus-visible{outline:2px solid var(--gh-blue);outline-offset:3px;border-radius:3px} .gh .num{font-variant-numeric:tabular-nums} .gh-wrap{max-width:var(--gh-max);margin:0 auto;padding:0 28px} .gh-band{padding:var(--gh-gap) 0} .gh-band--paper{background:var(--gh-paper)} .gh-band--navy{background:var(--gh-navy);color:#E8EEF6} /* ---------- type scale (DESIGN.md, clamped for small screens) ---------- */ .gh-display{ font-size:clamp(2.6rem,6.2vw,5rem); /* 80px ceiling */ line-height:.95; letter-spacing:-.028em; /* DESIGN.md -0.02em, within -0.04 floor */ font-weight:700; } .gh-h2{ font-size:clamp(1.9rem,3.6vw,3rem); /* 48px */ line-height:1.02; letter-spacing:-.022em; font-weight:700; } .gh-h3{font-size:1.35rem;line-height:1.15;letter-spacing:-.014em;font-weight:600} .gh-lede{font-size:1.15rem;line-height:1.5;color:var(--gh-ink-2);max-width:64ch} .gh-body{max-width:68ch} .gh-meta{ font-family:var(--gh-mono);font-size:.8125rem;line-height:1.46; letter-spacing:.015em;font-weight:500;color:var(--gh-muted); } /* ---------- navigation ---------- The logo artwork is WHITE with a transparent background, so it is invisible on any light surface. The header therefore sits over the hero image while the hero is on screen, and takes a NAVY background once scrolled past it — never a white one, which is what made the logo disappear. */ .gh-nav-sentinel{position:absolute;top:0;left:0;width:1px;height:1px} .gh-nav{ position:fixed;top:0;left:0;right:0;z-index:60; background:transparent;border-bottom:1px solid transparent; transition:background-color .28s cubic-bezier(.16,1,.3,1),border-color .28s; } .gh-nav.is-solid{ background:rgba(10,26,47,.94); backdrop-filter:saturate(180%) blur(12px); border-bottom-color:rgba(232,238,246,.14); } .gh-nav__in{ max-width:var(--gh-max);margin:0 auto;padding:0 28px;height:64px; display:flex;align-items:center;gap:24px; } .gh-nav__logo{margin-right:auto;display:flex;align-items:center} .gh-nav__logo img{height:26px;width:auto} .gh-nav__links{display:flex;gap:4px;list-style:none;margin:0;padding:0} .gh-nav__links a{ display:block;padding:8px 10px;font-size:.9375rem;color:#DCE6F2; text-decoration:none;border-radius:var(--r-ui); } .gh-nav__links a:hover{color:#fff;background:rgba(255,255,255,.10)} .gh-nav :focus-visible{outline-color:#fff} /* ---------- buttons ---------- */ .gh-btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--gh-display);font-weight:600;font-size:.9375rem; padding:11px 20px;border-radius:var(--r-ui);border:1px solid transparent; text-decoration:none;cursor:pointer; transition:background-color .18s cubic-bezier(.16,1,.3,1),border-color .18s,color .18s; } /* White on blue — 5.17:1. NOT ink on blue (3.39:1), which is what DESIGN.md's light-green button would have implied. */ .gh-btn--primary{background:var(--gh-blue);color:#fff} .gh-btn--primary:hover{background:var(--gh-blue-deep)} .gh-btn--ghost{background:transparent;color:var(--gh-blue-text);border-color:var(--gh-line-strong)} .gh-btn--ghost:hover{border-color:var(--gh-blue);background:rgba(4,102,231,.05)} .gh-btn--on-navy{background:var(--gh-blue);color:#fff} .gh-btn--on-navy:hover{background:#2E7BEE} .gh-btn--ghost-navy{background:transparent;color:var(--gh-blue-lift);border-color:rgba(232,238,246,.28)} .gh-btn--ghost-navy:hover{border-color:var(--gh-blue-lift);background:rgba(127,179,255,.08)} .gh-btns{display:flex;flex-wrap:wrap;gap:10px} /* ---------- hero: type layered over the map ---------- The map is not a backdrop you can simply write on: white over its brightest nodes measures 1.9:1. The scrim below is load-bearing, weighted so the text column sits on near-solid navy while Europe stays legible to its right. */ .gh-hero{ position:relative;isolation:isolate;overflow:hidden; padding:0;background:var(--gh-navy); min-height:clamp(600px,80vh,820px); display:flex;align-items:center; } .gh-hero__media{position:absolute;inset:0;z-index:0} .gh-hero__media img{ width:100%;height:100%;object-fit:cover;object-position:center 44%; } .gh-hero__media::after{ content:"";position:absolute;inset:0; background: linear-gradient(97deg, rgba(10,26,47,.97) 0%, rgba(10,26,47,.94) 28%, rgba(10,26,47,.74) 50%, rgba(10,26,47,.44) 74%, rgba(10,26,47,.36) 100%), linear-gradient(to bottom, rgba(10,26,47,.50) 0%, rgba(10,26,47,0) 26%, rgba(10,26,47,0) 68%, rgba(10,26,47,.62) 100%); } /* 64px of header sits on top of this section, so the content clears it. */ .gh-hero__content{position:relative;z-index:1;width:100%;padding:152px 0 104px} .gh-hero__text{display:flex;flex-direction:column;gap:24px;max-width:52ch} .gh-hero .gh-display{color:#fff} .gh-hero .gh-lede{color:#C3D3E6} /* 11.47:1 on the scrimmed ground */ /* One authored moment: the hero settles on load. Resting state is fully visible, so nothing depends on JS or an observer. */ @media (prefers-reduced-motion:no-preference){ .gh-rise{animation:gh-rise .85s cubic-bezier(.16,1,.3,1) backwards} .gh-rise:nth-child(1){animation-delay:.02s} .gh-rise:nth-child(2){animation-delay:.10s} .gh-rise:nth-child(3){animation-delay:.18s} .gh-hero__media img{animation:gh-zoom 1.4s cubic-bezier(.16,1,.3,1) backwards} } @keyframes gh-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes gh-zoom{from{transform:scale(1.06)}to{transform:none}} /* ---------- process ---------- */ .gh-steps{display:flex;flex-direction:column;gap:72px;margin-top:56px} .gh-step{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; } /* Sides alternate across the PICTURE rows only (set in PHP), not by position in the list — otherwise two image rows can land on the same side once a step loses its picture. */ .gh-step--flip .gh-step__fig{order:-1} /* Steps awaiting artwork. Held at the same 4:3 ratio as the real photographs so the reviewed layout is the shipped layout, and marked clearly enough that it can never be mistaken for finished design. */ .gh-step__fig--empty{ background: repeating-linear-gradient(-45deg, rgba(4,102,231,.045) 0 10px, rgba(4,102,231,.015) 10px 20px); border:1px dashed var(--gh-line-strong); aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:24px; } .gh-ph{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center} .gh-ph__label{ font-family:var(--gh-display);font-weight:600;font-size:1rem; letter-spacing:-.01em;color:var(--gh-blue-text); } .gh-ph__hint{font-size:.9375rem;color:var(--gh-ink-2)} .gh-ph__spec{ font-family:var(--gh-mono);font-size:.75rem;letter-spacing:.015em;color:var(--gh-muted); } .gh-step__fig{border-radius:var(--r-ui);overflow:hidden;border:1px solid var(--gh-line)} .gh-step__fig img{width:100%;aspect-ratio:4/3;object-fit:cover} .gh-step__body{display:flex;flex-direction:column;gap:14px} /* Numbers earn their place: this is a sequence a client moves through in order. */ .gh-step__n{ font-family:var(--gh-mono);font-size:.8125rem;letter-spacing:.015em; font-weight:500;color:var(--gh-blue-text); } .gh-step__note{ border-left:1px solid var(--gh-line-strong);padding-left:16px; color:var(--gh-muted);font-size:.9375rem; } /* ---------- navy feature band ---------- */ .gh-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .gh-feature .gh-h2{color:#fff} .gh-feature__text{display:flex;flex-direction:column;gap:20px} .gh-feature__lede{font-size:1.15rem;line-height:1.5;color:#B7C8DD;max-width:56ch} /* One grid for the whole list, so the label column is sized once by the widest label and every value starts on the same vertical line. */ .gh-feature__list{ display:grid;grid-template-columns:max-content minmax(0,1fr); column-gap:24px;margin:6px 0 0; } .gh-feature__list dt, .gh-feature__list dd{ margin:0;padding:15px 0;border-top:1px solid rgba(232,238,246,.13); } .gh-feature__list dt:last-of-type, .gh-feature__list dd:last-of-type{border-bottom:1px solid rgba(232,238,246,.13)} .gh-feature__k{ font-family:var(--gh-mono);font-size:.8125rem;letter-spacing:.06em; text-transform:uppercase;color:var(--gh-blue-lift);white-space:nowrap; } .gh-feature__v{color:#DCE6F2} /* ---------- who ---------- */ .gh-who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start} /* ---------- enquiry ---------- */ .gh-enquiry{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start} .gh-formcard{ background:var(--gh-surface);border:1px solid var(--gh-line); border-radius:var(--r-card);padding:28px; } /* Forminator ships its own look; pull it onto the type and palette. */ .gh-formcard .forminator-ui, .gh-formcard .forminator-ui input, .gh-formcard .forminator-ui textarea, .gh-formcard .forminator-ui button{font-family:var(--gh-body)!important} .gh-formcard .forminator-ui .forminator-label{ font-family:var(--gh-display)!important;font-weight:600!important; font-size:.875rem!important;color:var(--gh-ink-2)!important;letter-spacing:-.005em!important; } .gh-formcard .forminator-ui input[type=text], .gh-formcard .forminator-ui input[type=email], .gh-formcard .forminator-ui input[type=tel], .gh-formcard .forminator-ui textarea{ background:var(--gh-paper)!important;border:1px solid var(--gh-line-strong)!important; border-radius:var(--r-ui)!important;color:var(--gh-ink)!important; font-size:1rem!important;padding:11px 13px!important;box-shadow:none!important; } .gh-formcard .forminator-ui input:focus, .gh-formcard .forminator-ui textarea:focus{ border-color:var(--gh-blue)!important;outline:2px solid rgba(4,102,231,.22)!important;outline-offset:1px!important; } /* Forminator renders