/* GoodTechies design system. Generated from the approved homepage design. */ /* ============================================================ GOODTECHIES DESIGN SYSTEM v1.0 Single-theme brand site. Every colour painted explicitly. ============================================================ */ :root{ /* --- Brand core: SAMPLED from GoodTechies-siteicon-1.svg --- */ --gt-ink: #0A0D12; /* EXACT logo ground. Cool near-black. Buttons, dark sections */ --gt-ink-elev: #14181F; /* elevated surface on dark */ --gt-ink-line: #262B34; /* hairline on dark */ --gt-accent: #F04E27; /* EXACT logo dot. The period device, keylines, accent button */ --gt-accent-deep:#C43110; /* AA-safe accent for text on light grounds, button hover */ --gt-accent-tint:#FCEFE9; /* 8% orange wash */ /* --- Neutrals: cool-biased to match the #0A0D12 logo ground, never pure grey --- */ --gt-paper: #FBFBFC; /* page ground, cool near-white */ --gt-paper-2: #F2F3F5; /* alternating band */ --gt-white: #FFFFFF; --gt-rule: #E3E5E9; /* hairline on light */ --gt-muted: #545B69; /* body copy on light. 6.6:1 on paper */ --gt-muted-soft: #5C6371; /* meta / captions. 5.6:1 on paper, AA on every tint */ --gt-on-dark: #EDEFF2; /* body copy on ink */ --gt-on-dark-mut:#9AA2AF; /* --- Card tints: one warm from the accent, two cool neutrals --- */ --gt-sand: #FCEFE9; /* Tint A, warm, derived from the accent */ --gt-clay: #EFF1F4; /* Tint B, cool light */ --gt-stone: #E7EAEE; /* Tint C, cool deep */ /* --- Type --- */ --gt-display: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif; --gt-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Fluid type scale. clamp(min, fluid, max) => mobile / tablet / desktop in one */ --t-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.5rem); /* H1 40 -> 72 */ --t-h2: clamp(1.95rem, 1.3rem + 2.6vw, 3.125rem); /* H2 31 -> 50 */ --t-h3: clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem); /* H3 21 -> 28 */ --t-h4: clamp(1.075rem, 1rem + 0.35vw, 1.25rem); /* H4 17 -> 20 */ --t-body: 1.0625rem; /* 17px */ --t-small: 0.9375rem; /* 15px */ --t-meta: 0.8125rem; /* 13px */ --t-eyebrow: 0.6875rem; /* 11px, uppercase, +0.14em */ --t-stat: clamp(3rem, 1.6rem + 5.6vw, 5.75rem); /* --- Type roles: one token per element, each one a Customizer target --- */ --gt-body-family: var(--gt-body); --gt-body-size: var(--t-body); --gt-body-weight: 400; --gt-body-lh: 1.65; --gt-body-ls: normal; --gt-h1-family: var(--gt-display); --gt-h1-size: var(--t-display); --gt-h1-weight: 600; --gt-h1-lh: 1.0; --gt-h1-ls: -.026em; --gt-h2-family: var(--gt-display); --gt-h2-size: var(--t-h2); --gt-h2-weight: 600; --gt-h2-lh: 1.04; --gt-h2-ls: -.022em; --gt-h3-family: var(--gt-display); --gt-h3-size: var(--t-h3); --gt-h3-weight: 600; --gt-h3-lh: 1.04; --gt-h3-ls: -.016em; --gt-h4-family: var(--gt-display); --gt-h4-size: var(--t-h4); --gt-h4-weight: 600; --gt-h4-lh: 1.04; --gt-h4-ls: -.01em; --gt-h5-family: var(--gt-display); --gt-h5-size: .83em; --gt-h5-weight: 600; --gt-h5-lh: 1.04; --gt-h5-ls: -.018em; --gt-h6-family: var(--gt-display); --gt-h6-size: .67em; --gt-h6-weight: 600; --gt-h6-lh: 1.04; --gt-h6-ls: -.018em; /* --- Type roles for the places that carry a size of their own --- */ --t-hero: clamp(2.5rem,1.1rem + 6vw,5.5rem); /* hero H1 40 -> 88 */ --t-hero-sub: clamp(1.0625rem,1rem + .35vw,1.25rem); /* hero lede 17 -> 20 */ --gt-hero-h1-size: var(--t-hero); --gt-hero-h1-weight: 600; --gt-hero-sub-size: var(--t-hero-sub); --gt-sechead-size: var(--t-h2); --gt-nav-size: var(--t-small); --gt-nav-weight: 600; --gt-btn-size: var(--t-small); --gt-btn-weight: 600; /* --- Colour roles that share a swatch with a core token --- */ --gt-heading: var(--gt-ink); --gt-btn-bg: var(--gt-ink); --gt-btn-text: var(--gt-white); --gt-link: var(--gt-ink); --gt-link-hover: var(--gt-accent-deep); /* --- Space scale (8pt base) --- */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:2.5rem; --s-8:3rem; --s-9:4rem; --s-10:5rem; --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* --- Shape --- */ --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; --shadow-card: 0 1px 2px rgba(10,13,18,.04), 0 12px 32px -12px rgba(10,13,18,.10); --shadow-menu: 0 2px 4px rgba(10,13,18,.05), 0 32px 64px -24px rgba(10,13,18,.22); /* --- Hairlines on the tinted cards, and the rules under the numeral cards --- */ --gt-rule-hover: #CDD2DA; /* card hairline on hover */ --gt-rule-sand: #F6D9CC; /* hairline on Tint A */ --gt-rule-clay: #DFE3E9; /* hairline on Tint B */ --gt-rule-stone: #D6DBE2; /* hairline on Tint C */ --gt-rule-accent:#9E2708; /* rule under the accent numeral card */ --gt-rule-ink: #3A404B; /* rule under the ink numeral card */ --gt-rule-sand-d:#EDBBA6; /* rule under the sand numeral card */ /* --- Further brand and on-dark steps --- */ --gt-accent-lift:#FF6541; /* accent button hover, one step lighter */ --gt-accent-ink: #6B1D09; /* deepest accent, small label text on a sand ground */ --gt-on-dark-dim:#8A919D; /* quiet text on ink, e.g. the trust strip */ --gt-on-dark-warm:#F4EFE8; /* warm label text over a dark scrim */ /* --- Placeholder slot gradients: two stops each, three for the light one --- */ --gt-slot-light-1:#EDEFF3; --gt-slot-light-2:#DDE1E7; --gt-slot-light-3:#CBD1DA; --gt-slot-dark-1: #1B2028; --gt-slot-dark-2: #0F131A; --gt-slot-ink-1: #232933; --gt-slot-ink-2: #0D1117; --gt-slot-clay-1: #F7E4DB; --gt-slot-clay-2: #EDC6B6; --gt-slot-stone-1:#E8EBEF; --gt-slot-stone-2:#CFD5DD; /* --- Status dots in the browser-mock chrome --- */ --gt-dot-idle: #D7DBE1; --gt-signal-red: #E8705C; --gt-signal-amber:#E3B341; --gt-signal-green:#7FB08A; /* --- Mask stop. Opaque by definition, never a rendered colour --- */ --gt-mask-solid: #000; /* --- Rails --- */ --rail: 1280px; /* text + standard grids */ --rail-wide: 1440px;/* card grids, header, mega menu */ --gutter: clamp(1rem, .4rem + 2.4vw, 2.5rem); --header-h: 76px; } *,*::before,*::after{box-sizing:border-box} body{ margin:0; background:var(--gt-paper); color:var(--gt-heading); font-family:var(--gt-body-family); font-size:var(--gt-body-size); font-weight:var(--gt-body-weight); line-height:var(--gt-body-lh); letter-spacing:var(--gt-body-ls); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{margin:0; text-wrap:balance; font-optical-sizing:auto} h1{font-family:var(--gt-h1-family); font-size:var(--gt-h1-size); font-weight:var(--gt-h1-weight); line-height:var(--gt-h1-lh); letter-spacing:var(--gt-h1-ls)} h2{font-family:var(--gt-h2-family); font-size:var(--gt-h2-size); font-weight:var(--gt-h2-weight); line-height:var(--gt-h2-lh); letter-spacing:var(--gt-h2-ls)} h3{font-family:var(--gt-h3-family); font-size:var(--gt-h3-size); font-weight:var(--gt-h3-weight); line-height:var(--gt-h3-lh); letter-spacing:var(--gt-h3-ls)} h4{font-family:var(--gt-h4-family); font-size:var(--gt-h4-size); font-weight:var(--gt-h4-weight); line-height:var(--gt-h4-lh); letter-spacing:var(--gt-h4-ls)} h5{font-family:var(--gt-h5-family); font-size:var(--gt-h5-size); font-weight:var(--gt-h5-weight); line-height:var(--gt-h5-lh); letter-spacing:var(--gt-h5-ls)} h6{font-family:var(--gt-h6-family); font-size:var(--gt-h6-size); font-weight:var(--gt-h6-weight); line-height:var(--gt-h6-lh); letter-spacing:var(--gt-h6-ls)} p{margin:0} a{color:inherit; text-decoration:none} img,svg{max-width:100%; display:block} ul{margin:0; padding:0; list-style:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} :focus-visible{outline:2px solid var(--gt-accent); outline-offset:3px; border-radius:4px} ::selection{background:var(--gt-accent); color:var(--gt-white)} .gt-wrap{width:100%; max-width:var(--rail); margin-inline:auto; padding-inline:var(--gutter)} .gt-wrap-wide{width:100%; max-width:var(--rail-wide); margin-inline:auto; padding-inline:var(--gutter)} .gt-section{padding-block:var(--section-y)} .gt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Eyebrow: the signature keyline device ---------- */ .gt-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--gt-body); font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gt-accent-deep); } .gt-eyebrow::before{content:""; width:18px; height:2px; background:var(--gt-accent); border-radius:2px; flex:none} .gt-eyebrow--center{justify-content:center} .gt-eyebrow--ondark{color:var(--gt-accent)} .eyebrow--plain::before{display:none} .gt-lede{color:var(--gt-muted); font-size:clamp(1rem,.95rem + .3vw,1.1875rem); line-height:1.62; max-width:60ch} .lede--center{margin-inline:auto; text-align:center} /* ---------- Buttons ---------- */ .gt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--gt-body); font-weight:var(--gt-btn-weight); font-size:var(--gt-btn-size); letter-spacing:-.005em; padding:.875rem 1.5rem; border-radius:var(--r-pill); border:1.5px solid transparent; transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; min-height:48px; text-align:center; } .gt-btn:active{transform:translateY(1px)} .gt-btn--primary{background:var(--gt-btn-bg); color:var(--gt-btn-text); border-color:var(--gt-btn-bg)} .gt-btn--primary:hover{background:var(--gt-accent-deep); border-color:var(--gt-accent-deep)} .gt-btn--accent{background:var(--gt-accent); color:var(--gt-ink); border-color:var(--gt-accent); font-weight:700} .gt-btn--accent:hover{background:var(--gt-accent-lift)} .gt-btn--ghost{background:transparent; color:var(--gt-ink); border-color:var(--gt-rule)} .gt-btn--ghost:hover{border-color:var(--gt-ink); background:var(--gt-white)} .gt-btn--ondark{background:transparent; color:var(--gt-on-dark); border-color:rgba(237,239,242,.28)} .gt-btn--ondark:hover{background:var(--gt-white); color:var(--gt-ink); border-color:var(--gt-white)} .gt-btn--lg{padding:1.0625rem 2rem; font-size:1.0625rem; min-height:58px} .gt-btn--sm{padding:.625rem 1.125rem; min-height:42px; font-size:var(--t-meta)} /* Text link with arrow */ .gt-tlink{display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:var(--t-small); color:var(--gt-link)} .gt-tlink .gt-arw{transition:transform .2s ease; display:inline-block} .gt-tlink:hover .gt-arw{transform:translateX(4px)} .gt-tlink:hover{color:var(--gt-link-hover)} .gt-tlink--ondark{color:var(--gt-on-dark)} .gt-tlink--ondark:hover{color:var(--gt-accent)} /* ---------- Placeholder image slots (no licensed photography in prototype) ---------- */ .gt-slot{position:relative; overflow:hidden; background:linear-gradient(145deg,var(--gt-slot-light-1) 0%,var(--gt-slot-light-2) 52%,var(--gt-slot-light-3) 100%); display:grid; place-items:center; max-width:100%} .slot--dark{background:linear-gradient(145deg,var(--gt-slot-dark-1) 0%,var(--gt-slot-dark-2) 100%)} .gt-slot--ink{background:linear-gradient(150deg,var(--gt-slot-ink-1) 0%,var(--gt-slot-ink-2) 100%)} .gt-slot--clay{background:linear-gradient(145deg,var(--gt-slot-clay-1) 0%,var(--gt-slot-clay-2) 100%)} .gt-slot--stone{background:linear-gradient(145deg,var(--gt-slot-stone-1) 0%,var(--gt-slot-stone-2) 100%)} .gt-slot__glyph{opacity:.5} .gt-slot__scene{position:absolute; inset:0; display:grid; place-items:center; padding:11%} .gt-slot__scene svg{width:min(64%,270px); height:auto; opacity:.36} .gt-slot::after{content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right, rgba(10,13,18,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,13,18,.05) 1px, transparent 1px); background-size:34px 34px} .gt-slot--ink::after,.slot--dark::after{background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px)} .slot__tag{ position:absolute; left:12px; bottom:12px; right:12px; font-size:11px; line-height:1.35; font-weight:600; letter-spacing:.02em; background:rgba(10,13,18,.78); color:var(--gt-on-dark-warm); padding:.4rem .6rem; border-radius:var(--r-xs); backdrop-filter:blur(4px); } .slot__tag b{color:var(--gt-accent); font-weight:700} .slot__tag code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; background:rgba(255,255,255,.14); padding:1px 4px; border-radius:3px} /* ---------- Placeholder / verification chips ---------- */ .chip{display:inline-flex; align-items:center; gap:.4rem; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.32rem .6rem; border-radius:var(--r-pill); white-space:nowrap; line-height:1.2} .chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none} .chip--ph{background:rgba(196,49,16,.09); color:var(--gt-accent-deep); border:1px solid rgba(196,49,16,.22)} .chip--ph::before{background:var(--gt-accent-deep)} .chip--ok{background:rgba(10,13,18,.055); color:var(--gt-ink); border:1px solid rgba(10,13,18,.13)} .chip--ok::before{background:var(--gt-accent)} .chip--ok-dark{background:rgba(255,255,255,.08); color:var(--gt-white); border:1px solid rgba(255,255,255,.2)} .chip--ok-dark::before{background:var(--gt-accent)} /* ============================================================ HEADER + MEGA MENU ============================================================ */ .gt-site-header{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:120; background:var(--gt-paper); border-bottom:1px solid var(--gt-rule); } .gt-site-header.is-open{background:var(--gt-white)} .gt-header-inner{ max-width:var(--rail-wide); margin-inline:auto; padding-inline:var(--gutter); min-height:var(--header-h); display:flex; align-items:center; gap:var(--s-5); } .gt-brand{display:flex; align-items:center; flex:none; padding-block:.5rem; color:var(--gt-ink)} /* 741:126 wordmark. Width is pinned to the height so the box never reflows. */ .gt-brand__logo{height:24px; width:160px; display:block; flex:none} .gt-site-footer .gt-brand{color:var(--gt-white)} .gt-site-footer .gt-brand__logo{height:auto; width:176px} .gt-nav{display:flex; align-items:center; gap:.125rem; margin-inline:auto} .gt-nav__btn{ display:inline-flex; align-items:center; gap:.3rem; padding:.6rem .8rem; border-radius:var(--r-sm); font-size:var(--gt-nav-size); font-weight:var(--gt-nav-weight); letter-spacing:-.005em; color:var(--gt-ink); transition:background-color .15s ease, color .15s ease; } .gt-nav__btn:hover{background:var(--gt-paper-2)} .gt-nav__btn[aria-expanded="true"]{background:var(--gt-paper-2)} .gt-nav__btn .gt-car{transition:transform .2s ease} .gt-nav__btn[aria-expanded="true"] .gt-car{transform:rotate(180deg)} .gt-nav__btn .gt-car svg{display:block} .gt-header-cta{display:flex; align-items:center; gap:.625rem; flex:none} /* Mega panel */ .gt-mega{ position:absolute; left:0; right:0; top:100%; background:var(--gt-white); border-top:1px solid var(--gt-rule); box-shadow:var(--shadow-menu); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; } .gt-mega.is-open{opacity:1; visibility:visible; transform:translateY(0)} .gt-mega__inner{max-width:var(--rail-wide); margin-inline:auto; padding:var(--s-7) var(--gutter) var(--s-6)} .gt-mega__grid{display:grid; gap:var(--s-7)} .gt-mega__foot{ border-top:1px solid var(--gt-rule); background:var(--gt-paper); padding:.9rem var(--gutter); } .gt-mega__foot-inner{max-width:var(--rail-wide); margin-inline:auto; display:flex; flex-wrap:wrap; gap:var(--s-6)} .gt-mega__foot a{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-small); font-weight:600; border-bottom:1.5px dotted var(--gt-muted-soft); padding-bottom:1px} .gt-mega__foot a:hover{color:var(--gt-accent-deep); border-bottom-color:var(--gt-accent)} .gt-mcol__label{font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gt-muted-soft); margin-bottom:var(--s-4)} /* featured card in mega */ .gt-mfeat{display:block; border-radius:var(--r-md); padding:var(--s-5); transition:transform .2s ease, box-shadow .2s ease} .gt-mfeat:hover{transform:translateY(-2px); box-shadow:var(--shadow-card)} .gt-mfeat__ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--gt-white); margin-bottom:.75rem} /* The panel titles are navigation labels, not document headings, so they are divs. These are the h4 declarations they used to inherit from the tag. */ .gt-mfeat__t{margin:0 0 .25rem; text-wrap:balance; font-optical-sizing:auto; font-family:var(--gt-h4-family); font-size:var(--gt-h4-size); font-weight:var(--gt-h4-weight); line-height:var(--gt-h4-lh); letter-spacing:var(--gt-h4-ls)} .gt-mfeat p{font-size:var(--t-small); color:var(--gt-muted); line-height:1.5} .gt-mfeat--sand{background:var(--gt-sand)} .gt-mfeat--clay{background:var(--gt-clay)} .gt-mfeat--stone{background:var(--gt-stone)} .gt-mfeat--ink{background:var(--gt-ink); color:var(--gt-on-dark)} .gt-mfeat--ink p{color:var(--gt-on-dark-mut)} .gt-mfeat--ink .gt-mfeat__ico{background:rgba(255,255,255,.1)} /* link lists inside mega */ .gt-mlist{display:grid; gap:1px} .gt-mlist > li + li{border-top:1px solid var(--gt-rule)} .gt-mlist a{display:flex; gap:.75rem; padding:.6rem 0; border-radius:6px} .gt-mlist a:hover .gt-mlist__t{color:var(--gt-accent-deep)} .gt-mlist__ico{width:26px; height:26px; border-radius:7px; background:var(--gt-sand); display:grid; place-items:center; flex:none; margin-top:2px} .gt-mlist__t{font-weight:600; font-size:var(--t-small); display:block; line-height:1.4} .gt-mlist__d{font-size:var(--t-meta); color:var(--gt-muted); line-height:1.45; display:block} /* compact multi-column link stacks (sectors / services) */ .gt-mstack{display:grid; gap:.05rem} .gt-mstack a{display:block; padding:.3rem 0; font-size:var(--t-small); color:var(--gt-muted); line-height:1.5; font-weight:500} .gt-mstack a:hover{color:var(--gt-accent-deep)} .gt-mstack--sub{padding-left:.85rem; border-left:1.5px solid var(--gt-rule); margin:.15rem 0 .35rem} .gt-msub-label{font-size:var(--t-meta); font-weight:700; color:var(--gt-ink); letter-spacing:-.01em; margin:.85rem 0 .2rem} .gt-msub-label:first-child{margin-top:0} .gt-mcol + .gt-mcol{} /* case-study rail inside Our Work mega */ .gt-mcase{display:flex; gap:.9rem; padding:.7rem 0} .gt-mcase + .gt-mcase{border-top:1px solid var(--gt-rule)} .gt-mcase__thumb{width:76px; height:56px; border-radius:var(--r-xs); flex:none} .gt-mcase__t{font-family:var(--gt-body); font-weight:600; font-size:var(--t-small); line-height:1.35; display:block; letter-spacing:-.01em} .gt-tagrow{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem} .gt-tag{font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; background:var(--gt-paper-2); color:var(--gt-muted); padding:.2rem .4rem; border-radius:5px} /* ---------- Mobile nav ---------- */ .gt-burger{display:none; width:46px; height:46px; border-radius:var(--r-sm); border:1.5px solid var(--gt-rule); place-items:center; flex:none} .gt-burger:hover{border-color:var(--gt-ink)} .gt-mnav{ position:fixed; inset:0; top:0; z-index:200; background:var(--gt-paper); display:flex; flex-direction:column; overflow-y:auto; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); } .gt-mnav[hidden]{display:none !important} .gt-mnav__bar{display:flex; align-items:center; justify-content:space-between; padding:.85rem var(--gutter); border-bottom:1px solid var(--gt-rule); position:sticky; top:0; background:var(--gt-paper); z-index:2} .gt-mnav__body{padding:var(--s-4) var(--gutter) var(--s-8)} .gt-acc{border-bottom:1px solid var(--gt-rule)} .gt-acc__btn{display:flex; width:100%; align-items:center; justify-content:space-between; padding:1rem 0; font-family:var(--gt-display); font-size:1.375rem; font-weight:600; letter-spacing:-.01em; text-align:left} .gt-acc__btn .gt-car{transition:transform .2s ease; color:var(--gt-accent)} .gt-acc__btn[aria-expanded="true"] .gt-car{transform:rotate(45deg)} .gt-acc__panel{padding:0 0 1rem} .gt-acc__panel[hidden]{display:none !important} .gt-acc__group{margin-bottom:1rem} .gt-acc__label{margin:0 0 .35rem; font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gt-muted-soft); font-family:var(--gt-body); line-height:var(--gt-h5-lh)} .gt-acc__group a{display:block; padding:.45rem 0; font-size:1rem; font-weight:500; color:var(--gt-muted)} .gt-acc__group a:active{color:var(--gt-accent-deep)} .gt-mnav__cta{display:grid; gap:.625rem; margin-top:var(--s-6)} /* ============================================================ HERO ============================================================ */ .gt-hero{padding-block:clamp(3.25rem,1.8rem + 5vw,6.5rem) 0; text-align:center; position:relative; overflow:hidden; background:var(--gt-white)} .gt-hero__grid{position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, rgba(10,13,18,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,13,18,.05) 1px, transparent 1px); background-size:88px 88px; background-position:center top; -webkit-mask-image:radial-gradient(120% 75% at 50% 18%, var(--gt-mask-solid) 0%, rgba(0,0,0,.55) 55%, transparent 88%); mask-image:radial-gradient(120% 75% at 50% 18%, var(--gt-mask-solid) 0%, rgba(0,0,0,.55) 55%, transparent 88%); } .gt-hero__glow{position:absolute; inset:0; pointer-events:none; background:radial-gradient(52% 40% at 50% -6%, rgba(240,78,39,.10) 0%, rgba(240,78,39,0) 70%); } .gt-hero__inner{position:relative} .gt-hero h1{font-size:var(--gt-hero-h1-size); line-height:1.0; letter-spacing:-.028em; max-width:20ch; margin-inline:auto; font-weight:var(--gt-hero-h1-weight)} .gt-dot{color:var(--gt-accent)} .gt-hero__sub{margin:clamp(1.1rem,.8rem + 1vw,1.75rem) auto 0; max-width:52ch; color:var(--gt-muted); font-size:var(--gt-hero-sub-size); line-height:1.5; text-align:center} /* audit capsule */ .gt-auditbar{display:flex; align-items:center; gap:.5rem; width:min(580px,100%); margin:clamp(1.75rem,1.2rem + 2vw,2.75rem) auto 0; background:var(--gt-white); border:1px solid var(--gt-rule); border-radius:var(--r-pill); padding:.375rem .375rem .375rem 1.125rem; box-shadow:0 1px 2px rgba(10,13,18,.05), 0 18px 40px -24px rgba(10,13,18,.35); transition:border-color .18s ease, box-shadow .18s ease; text-align:left; } .gt-auditbar:focus-within{border-color:var(--gt-ink); box-shadow:0 1px 2px rgba(10,13,18,.05), 0 18px 44px -22px rgba(10,13,18,.45)} .gt-auditbar__ico{color:var(--gt-muted-soft); display:grid; place-items:center; flex:none} .gt-auditbar input{flex:1; min-width:0; border:0; background:none; font-family:var(--gt-body); font-size:1.0625rem; color:var(--gt-ink); padding:.8rem .25rem; outline:none} .gt-auditbar input::placeholder{color:var(--gt-muted-soft)} .gt-auditbar .gt-btn{flex:none} .gt-hero__note{margin:.9rem auto 0; font-size:var(--t-meta); color:var(--gt-muted-soft); max-width:46ch} .gt-hero__note b{color:var(--gt-ink); font-weight:600} .gt-hero__ok{margin:.9rem auto 0; font-size:var(--t-small); font-weight:600; color:var(--gt-accent-deep); max-width:46ch} .gt-hero__ok[hidden]{display:none !important} /* showcase gallery: a five-step sequence in realistic browser windows */ .gt-showcase{position:relative; margin-top:clamp(2rem,1rem + 3vw,3.25rem); height:clamp(306px,16rem + 13vw,424px); overflow:hidden} .gt-showcase__row{display:flex; gap:clamp(14px,1.3vw,26px); align-items:flex-start; width:max-content; margin-inline:auto; padding-inline:16px; will-change:transform} /* realistic window chrome */ .gt-mock{flex:none; border-radius:14px; overflow:hidden; text-align:left; background:var(--gt-white); border:1px solid var(--gt-rule); will-change:transform; box-shadow:0 1px 1px rgba(10,13,18,.04), 0 4px 10px -2px rgba(10,13,18,.06), 0 30px 56px -28px rgba(10,13,18,.30)} .gt-mock__bar{display:flex; align-items:center; gap:6px; padding:9px 11px; background:var(--gt-paper-2); border-bottom:1px solid var(--gt-rule)} .gt-mock__dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--gt-dot-idle)} .gt-mock__dot--r{background:var(--gt-signal-red)}.gt-mock__dot--y{background:var(--gt-signal-amber)}.gt-mock__dot--g{background:var(--gt-signal-green)} .gt-mock__url{flex:1; min-width:0; display:flex; align-items:center; gap:5px; margin-inline:6px; background:var(--gt-white); border:1px solid var(--gt-rule); border-radius:999px; padding:3px 9px; font-size:9px; color:var(--gt-muted-soft); overflow:hidden; white-space:nowrap} .gt-mock__url svg{flex:none; opacity:.7} .gt-mock__step{flex:none; display:flex; align-items:center; gap:.3rem; font-family:var(--gt-body); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gt-muted-soft)} .gt-mock__step b{color:var(--gt-accent-deep); font-weight:700} .gt-mock__body{padding:14px} .gt-mock__shot{position:relative; width:100%; overflow:hidden} .gt-mock--tintA .gt-mock__body,.gt-mock--tintA .gt-mock__shot{background:var(--gt-sand)} .gt-mock--tintB .gt-mock__body,.gt-mock--tintB .gt-mock__shot{background:var(--gt-clay)} .gt-mock__h{font-family:var(--gt-display); font-weight:600; line-height:1.06; letter-spacing:-.02em; font-size:15px} .gt-mock__sub{font-size:10px; line-height:1.45; color:var(--gt-muted-soft); margin-top:3px} .gt-mock__pill{display:inline-block; background:var(--gt-accent); color:var(--gt-ink); font-size:8px; font-weight:700; padding:4px 9px; border-radius:999px; letter-spacing:.02em} .gt-gl{display:block; height:5px; border-radius:3px; background:var(--gt-rule)} .gt-gl--a{background:rgba(240,78,39,.5)} .gt-mock__row{display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:8px; background:var(--gt-white); border:1px solid var(--gt-rule); font-size:9px; font-weight:600; color:var(--gt-muted)} .gt-mock__row span.gt-tick{width:12px; height:12px; border-radius:50%; flex:none; display:grid; place-items:center; color:var(--gt-white); font-size:7px; line-height:1} .gt-mock__spark{border-radius:9px; background:var(--gt-white); border:1px solid var(--gt-rule); position:relative; overflow:hidden} .gt-mock__spark svg{position:absolute; inset:0; width:100%; height:100%} .gt-mock__tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:7px} .gt-mock__tile{border:1px solid var(--gt-rule); background:var(--gt-white); border-radius:8px; padding:8px} .gt-mock__tile b{display:block; font-family:var(--gt-display); font-size:14px; font-weight:600; letter-spacing:-.02em} .gt-mock__tile span{display:block; font-size:8px; color:var(--gt-muted-soft); margin-top:2px} .showcase__cap{position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:3; font-size:11px; font-weight:600; background:rgba(10,13,18,.82); color:var(--gt-on-dark); padding:.35rem .7rem; border-radius:var(--r-pill); white-space:nowrap} .showcase__cap b{color:var(--gt-accent)} .gt-showcase__fade{position:absolute; left:0; right:0; bottom:0; height:130px; z-index:2; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 46%, var(--gt-white) 100%)} @media (max-width:760px){ .showcase__cap{display:none} } /* proof band: solid ink, badge and title over a single row of figures */ .proofband{background:var(--gt-ink); color:var(--gt-on-dark); padding-block:clamp(2.75rem,1.8rem + 3vw,4.5rem)} .proofband__inner{display:flex; flex-direction:column; align-items:center; text-align:center} .proofband__badge{margin-bottom:var(--s-4)} .proofband h2{color:var(--gt-white); max-width:22ch; margin-bottom:clamp(1.75rem,1.2rem + 2vw,2.75rem)} .proofband__row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-4) clamp(1.5rem,.8rem + 2.4vw,3rem)} .pb-item{display:flex; align-items:center; gap:.6rem; line-height:1.35; font-size:clamp(.9375rem,.88rem + .3vw,1.0625rem); color:var(--gt-on-dark-mut)} .pb-item b{font-family:var(--gt-body); font-weight:700; color:var(--gt-white); letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-size:clamp(1.125rem,.95rem + .7vw,1.4375rem)} .pb-sep{width:1px; align-self:stretch; min-height:26px; background:var(--gt-ink-line); flex:none} .gt-stars{display:flex; gap:2px; color:var(--gt-accent); flex:none} @media (max-width:760px){ .showcase__cap{display:none} .pb-sep{display:none} } } @media (max-width:760px){ .showcase__cap{display:none} } /* proof strip */ .proof{border-block:1px solid var(--gt-rule); background:var(--gt-paper)} .proof__inner{max-width:var(--rail); margin-inline:auto; padding:var(--s-4) var(--gutter); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-3) var(--s-6)} .proof__item{display:flex; align-items:center; gap:.55rem; text-align:left} .proof__num{font-family:var(--gt-body); font-weight:700; font-size:1rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums} .proof__lab{font-size:var(--t-meta); color:var(--gt-muted); line-height:1.3} .proof__sep{width:1px; height:28px; background:var(--gt-rule)} .gt-stars{display:flex; gap:2px; color:var(--gt-accent)} @media (max-width:760px){ .showcase__cap{display:none} } @media (max-width:560px){ .gt-auditbar{flex-direction:column; align-items:stretch; border-radius:20px; padding:.75rem; gap:.625rem} .gt-auditbar__ico{display:none} .gt-auditbar input{padding:.5rem .75rem; border:1px solid var(--gt-rule); border-radius:12px; background:var(--gt-paper)} .gt-auditbar .gt-btn{width:100%} } /* ============================================================ WHO WE SERVE ============================================================ */ .gt-sec-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s-5); margin-bottom:var(--s-8)} .gt-sec-head__main{max-width:46ch} .gt-sec-head h2{margin:var(--s-3) 0 var(--s-4); font-size:var(--gt-sechead-size)} .sec-head--center{flex-direction:column; align-items:center; text-align:center} .sec-head--center .gt-sec-head__main{max-width:52ch} .gt-serve{display:grid; gap:var(--s-5); grid-template-columns:repeat(2,1fr)} .gt-scard{ display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:var(--gt-white); border:1px solid var(--gt-rule); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .gt-scard:hover{transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--gt-rule-hover)} .gt-scard__media{aspect-ratio:16/9; width:100%} .gt-scard__body{padding:var(--s-5); display:flex; flex-direction:column; gap:.6rem; flex:1} .gt-scard__body h3{letter-spacing:-.025em} .gt-scard__body p{font-size:var(--t-small); color:var(--gt-muted); line-height:1.55} .gt-scard__cta{margin-top:auto; padding-top:var(--s-4)} .gt-scard--ink{background:var(--gt-ink); border-color:var(--gt-ink); color:var(--gt-on-dark)} .gt-scard--ink p{color:var(--gt-on-dark-mut)} .gt-scard--wide{grid-column:1 / -1; flex-direction:row; align-items:stretch; background:var(--gt-sand); border-color:var(--gt-rule-sand)} .gt-scard--wide .gt-scard__media{aspect-ratio:auto; width:34%; min-height:210px; flex:none} .gt-scard--wide .gt-scard__body{padding:var(--s-6); justify-content:center; max-width:58ch} /* ============================================================ CASE STUDY ============================================================ */ .gt-band-2{background:var(--gt-paper-2)} .cs{display:grid; grid-template-columns:1.05fr .95fr; gap:0; border-radius:var(--r-lg); overflow:hidden; background:var(--gt-white); border:1px solid var(--gt-rule); box-shadow:var(--shadow-card)} .cs__media{position:relative; min-height:440px} .cs__body{padding:clamp(1.5rem,1rem + 2.2vw,3rem); display:flex; flex-direction:column; gap:var(--s-4)} .cs__meta{display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center} .cs__t{margin-top:.25rem} .cs__blocks{display:grid; gap:var(--s-4); margin-top:var(--s-2)} .cs__block h4{font-family:var(--gt-body); font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gt-muted-soft); margin-bottom:.3rem} .cs__block p{font-size:var(--t-small); color:var(--gt-muted); line-height:1.6} .cs__results{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3); padding:var(--s-4); background:var(--gt-paper); border-radius:var(--r-md); border:1px solid var(--gt-rule)} .cs__res-n{font-family:var(--gt-display); font-weight:600; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); letter-spacing:-.01em; color:var(--gt-ink); font-variant-numeric:tabular-nums} .cs__res-l{font-size:var(--t-meta); color:var(--gt-muted); line-height:1.35; margin-top:.15rem} .cs__nav{display:flex; gap:var(--s-4); align-items:center; margin-top:auto; padding-top:var(--s-4)} /* ============================================================ SERVICES GRID (modular, mixed treatments) ============================================================ */ .gt-svc{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5)} .gt-vcard{ position:relative; border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--gt-rule); background:var(--gt-white); min-height:270px; transition:transform .22s ease, box-shadow .22s ease; } .gt-vcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-card)} .gt-vcard__pad{padding:var(--s-5); display:flex; flex-direction:column; gap:.55rem; flex:1} .gt-vcard h3{letter-spacing:-.025em} .gt-vcard p{font-size:var(--t-small); color:var(--gt-muted); line-height:1.55; max-width:42ch} .gt-vcard__cta{margin-top:auto; padding-top:var(--s-4)} .gt-vcard__flag{position:absolute; top:var(--s-4); right:var(--s-4); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--gt-accent); color:var(--gt-ink); padding:.25rem .5rem; border-radius:5px} .gt-vcard--ink{background:var(--gt-ink); border-color:var(--gt-ink); color:var(--gt-on-dark)} .gt-vcard--ink p{color:var(--gt-on-dark-mut)} .gt-vcard--sand{background:var(--gt-sand); border-color:var(--gt-rule-sand)} .vcard--clay{background:var(--gt-clay); border-color:var(--gt-rule-clay)} .vcard--stone{background:var(--gt-stone); border-color:var(--gt-rule-stone)} .gt-vcard{min-height:300px} .gt-vcard__art{margin-top:var(--s-4); border-radius:var(--r-sm); overflow:hidden} .gt-vcard__shot{position:relative; width:100%} /* mini UI art used inside service cards (CSS only, no images) */ .gt-bars{display:flex; align-items:flex-end; gap:6px; height:88px; padding:var(--s-3); background:rgba(255,255,255,.06); border-radius:var(--r-sm)} .gt-bars span{flex:1; background:var(--gt-accent); border-radius:3px 3px 0 0; opacity:.9} .gt-rows{display:grid; gap:6px} .gt-rows div{display:flex; align-items:center; gap:.5rem; background:var(--gt-white); border:1px solid var(--gt-rule); border-radius:8px; padding:.45rem .6rem; font-size:var(--t-meta); font-weight:600} .gt-dot{width:8px;height:8px;border-radius:50%;flex:none} .gt-meter{height:6px; border-radius:3px; background:var(--gt-rule); overflow:hidden; flex:1} .gt-meter i{display:block; height:100%; background:var(--gt-accent); border-radius:3px} /* ============================================================ ABOUT ============================================================ */ .about{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center} .about__media{border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; position:relative} .about__badge{ position:absolute; left:var(--s-4); bottom:var(--s-4); right:var(--s-4); background:var(--gt-white); border-radius:var(--r-md); padding:var(--s-4); box-shadow:var(--shadow-card); } .about__badge .n{font-family:var(--gt-display); font-weight:600; font-size:1.875rem; letter-spacing:-.01em; line-height:1} .about__badge .l{font-size:var(--t-meta); color:var(--gt-muted); margin-top:.2rem} .pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); margin-top:var(--s-6)} .pillar{padding-top:var(--s-4); border-top:2px solid var(--gt-ink)} .pillar h4{margin-bottom:.25rem} .pillar p{font-size:var(--t-small); color:var(--gt-muted); line-height:1.55} .pillar:nth-child(odd){border-top-color:var(--gt-accent)} /* ============================================================ STATS (stepped, deliberately unequal) ============================================================ */ .stats{display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:var(--s-4); align-items:end} .stat{border-radius:var(--r-lg); padding:var(--s-6); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-5); min-height:210px; position:relative; overflow:hidden} .stat .chip{align-self:flex-start} .stat--hero{background:var(--gt-ink); color:var(--gt-white); min-height:330px} .stat--sand{background:var(--gt-sand); min-height:270px; border:1px solid var(--gt-rule-sand)} .stat--clay{background:var(--gt-clay); min-height:210px; border:1px solid var(--gt-rule-clay)} .stat__n{font-family:var(--gt-display); font-weight:600; font-size:var(--t-stat); line-height:.94; letter-spacing:-.032em; font-variant-numeric:tabular-nums} .stat--hero .stat__n{color:var(--gt-accent)} .stat__l{font-size:var(--t-small); font-weight:600; margin-top:var(--s-4); max-width:24ch; line-height:1.4} .stat--hero .stat__l{color:var(--gt-on-dark)} .stat__src{font-size:var(--t-meta); color:var(--gt-muted); margin-top:.4rem} .stat--hero .stat__src{color:var(--gt-on-dark-mut)} .stat__rule{height:3px; width:56px; background:var(--gt-accent); border-radius:2px; margin-bottom:var(--s-5)} /* ============================================================ TESTIMONIALS ============================================================ */ .gt-tst{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4)} .gt-tcard{border-radius:var(--r-lg); padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-4); border:1px solid transparent; transition:transform .22s ease, box-shadow .22s ease} .gt-tcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-card)} .gt-tcard__ph{aspect-ratio:1/1; width:100%; border-radius:var(--r-sm)} .gt-tcard__body{display:flex; flex-direction:column; gap:.75rem; flex:1} .gt-tcard__q{font-family:var(--gt-display); font-weight:600; font-size:1.0625rem; line-height:1.28; letter-spacing:-.018em} .gt-tcard__meta{margin-top:auto} .gt-tcard__n{font-size:var(--t-meta); font-weight:700; display:block} .gt-tcard__c{font-size:var(--t-meta); color:var(--gt-muted-soft); display:block} .gt-tcard--a{background:var(--gt-sand); border-color:var(--gt-rule-sand)} .gt-tcard--b{background:var(--gt-clay); border-color:var(--gt-rule-clay)} .gt-tcard--c{background:var(--gt-stone); border-color:var(--gt-rule-stone)} .gt-tcard--ink{background:var(--gt-ink); border-color:var(--gt-ink); color:var(--gt-on-dark)} .gt-tcard--ink .gt-tcard__q{color:var(--gt-accent)} .gt-tcard--ink .gt-tcard__c{color:var(--gt-on-dark-mut)} /* ============================================================ CTA (trust row, headline, three-step path, action card) ============================================================ */ .gt-ctaband{background:var(--gt-white); border:1px solid var(--gt-rule); border-radius:var(--r-xl); padding:clamp(1.75rem,1rem + 3vw,3.5rem) clamp(1rem,.5rem + 2vw,3rem)} .gt-ctaband__head{max-width:56ch; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s-4)} .gt-ctaband__top{display:flex; justify-content:center; margin-bottom:var(--s-4)} .gt-ctaband__head h2{margin-top:.25rem} .gt-ctaband__head p{color:var(--gt-muted); font-size:clamp(1rem,.95rem + .3vw,1.125rem); line-height:1.6} .gt-trustpill{display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem .75rem; background:var(--gt-paper-2); border:1px solid var(--gt-rule); border-radius:var(--r-pill); padding:.4rem .9rem; font-size:var(--t-meta); color:var(--gt-muted)} .gt-trustpill b{color:var(--gt-ink); font-weight:700} .gt-trustpill i{width:1px; height:14px; background:var(--gt-rule); display:inline-block} .gt-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); margin-top:clamp(1.75rem,1rem + 2.5vw,3rem); list-style:none; padding:0} .gt-step{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:var(--s-5); background:var(--gt-sand); border:1px solid var(--gt-rule-sand); display:flex; flex-direction:column; gap:.5rem; min-height:0} /* The step numeral is a large bold watermark, so WCAG's 3:1 large-text bar applies. At the old .13 alpha it sat at 1.21:1 - invisible in bright light and flagged by every audit. .7 gives 3.11:1 and still reads as a watermark rather than competing with the card heading. */ .gt-step__n{position:absolute; top:.5rem; right:1rem; font-family:var(--gt-display); font-weight:700; font-size:3.5rem; line-height:1; color:rgba(196,49,16,.7); letter-spacing:-.04em; user-select:none} .gt-step__ico{color:var(--gt-accent-deep)} /* The step titles are h3 for the outline; they keep the h4 type scale. */ .gt-step h3{position:relative; font-family:var(--gt-h4-family); font-size:var(--gt-h4-size); font-weight:var(--gt-h4-weight); line-height:var(--gt-h4-lh); letter-spacing:var(--gt-h4-ls)} .gt-step p{font-size:var(--t-small); color:var(--gt-muted); line-height:1.5} .gt-step--cta{background:var(--gt-ink); border-color:var(--gt-ink); color:var(--gt-on-dark); justify-content:center; gap:.625rem} .gt-step--cta p{color:var(--gt-on-dark-mut)} .gt-step--cta .gt-btn{width:100%; min-height:44px; padding-block:.7rem} .gt-ctaband__note{text-align:center; font-size:var(--t-meta); color:var(--gt-muted-soft); margin-top:var(--s-5)} /* ============================================================ FOOTER ============================================================ */ .gt-site-footer{background:var(--gt-ink); color:var(--gt-on-dark); border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden} .gt-foot-top{padding-block:clamp(2.5rem,1.5rem + 3vw,4rem) var(--s-8)} .gt-foot-intro{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap} .gt-foot-brand{max-width:46ch} .gt-foot-brand p{font-size:var(--t-small); color:var(--gt-on-dark-mut); margin-top:var(--s-4); line-height:1.6} .gt-foot-rule{height:1px; background:var(--gt-ink-line); margin-block:clamp(1.75rem,1rem + 2vw,2.75rem)} .gt-foot-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-5) var(--s-4)} .gt-fcol a{padding:.26rem 0} .gt-socials{display:flex; gap:.5rem; flex:none} .gt-socials a{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--gt-accent); color:var(--gt-ink); border:1px solid var(--gt-accent); transition:background-color .18s ease, color .18s ease, border-color .18s ease} .gt-socials a:hover{background:var(--gt-white); color:var(--gt-ink); border-color:var(--gt-white)} /* Column labels name a