/* ========================================================================== Lab0 — Redesign stylesheet Type kept from current site (Cormorant Garamond + Outfit). Palette refreshed to the brand logo (blue + green) with airy warm neutrals. Direction switching via data-attributes on (driven by Tweaks). ========================================================================== */ /* ----- Tokens ----- */ :root { /* neutrals (kept warm + airy) */ --white:#ffffff; --cream:#fafaf8; --bone:#f4f3f0; --mist:#edece9; --line:#e4e2dd; --line-strong:#d6d3cd; --warm-gray:#8d8a85; --slate:#5b5854; --charcoal:#332f2b; --ink:#181512; /* brand (sampled from logo) — DEFAULT: "brand" */ --brand:#15679b; /* logo blue, primary */ --brand-deep:#0e4d76; --brand-bright:#2a8fc7; --brand-tint:#e9f1f7; --brand-tint-2:#d7e7f1; --accent:#2e9d70; /* logo green */ --accent-deep:#1f7e58; --accent-tint:#e6f4ed; /* hero / dark surfaces */ --hero-from:#0e4d76; --hero-to:#0a3a5c; --hero-glow:rgba(46,157,112,0.20); --on-dark:#eef4f8; --on-dark-soft:rgba(238,244,248,0.72); /* type */ --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --heading-family:var(--font-display); --heading-weight:500; --heading-tracking:-0.01em; /* geometry — crisp */ --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px; --border:1px solid var(--line); /* spacing rhythm — density controlled */ --section-y:5.5rem; --gap:1.5rem; --max:1240px; --pad-x:clamp(1.25rem, 4vw, 2.75rem); --nav-h:70px; /* motion */ --ease:cubic-bezier(.16,1,.3,1); --fast:.2s; --base:.45s; --shadow-sm:0 1px 2px rgba(24,21,18,.05); --shadow:0 6px 24px -12px rgba(24,21,18,.18); --shadow-lg:0 22px 60px -28px rgba(14,77,118,.40); } /* ----- Palette directions ----- */ :root[data-palette="slate"]{ --brand:#3d5a80; --brand-deep:#2c4460; --brand-bright:#5c7a99; --brand-tint:#eef1f6; --brand-tint-2:#dde4ee; --accent:#5c7a99; --accent-deep:#3d5a80; --accent-tint:#eaeef4; --hero-from:#3d5a80; --hero-to:#293241; --hero-glow:rgba(152,193,217,0.22); } :root[data-palette="ink"]{ --cream:#f6f7f8; --bone:#eef0f2; --mist:#e7e9ec; --line:#dde0e4; --line-strong:#cdd2d8; --warm-gray:#7d8590; --slate:#4a5560; --charcoal:#222a32; --ink:#0e141b; --brand:#0f74b8; --brand-deep:#0a3f63; --brand-bright:#2a93cc; --brand-tint:#e7f1f8; --brand-tint-2:#d2e6f2; --accent:#15a06d; --accent-deep:#0e7a52; --accent-tint:#e2f3ea; --hero-from:#0c3a5c; --hero-to:#071f33; --hero-glow:rgba(21,160,109,0.22); } /* ----- Heading font direction ----- */ :root[data-heading="sans"]{ --heading-family:var(--font-body); --heading-weight:600; --heading-tracking:-0.02em; } /* ----- Density direction ----- */ :root[data-density="tight"]{ --section-y:4rem; } :root[data-density="airy"]{ --section-y:6.5rem; } /* ----- Reset ----- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ font-family:var(--font-body); font-weight:400; color:var(--charcoal); background:var(--cream); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ cursor:pointer; background:none; border:none; } ul,ol{ list-style:none; } ::selection{ background:var(--brand-tint-2); color:var(--brand-deep); } :focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:3px; } /* ----- Layout helpers ----- */ .wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x); } .section{ padding-block:var(--section-y); } .section--tint{ background:var(--bone); } .section--mist{ background:var(--mist); } /* heading utilities */ .display{ font-family:var(--heading-family); font-weight:var(--heading-weight); letter-spacing:var(--heading-tracking); line-height:1.04; color:var(--ink); } .heading{ font-family:var(--heading-family); font-weight:var(--heading-weight); letter-spacing:var(--heading-tracking); line-height:1.12; color:var(--ink); } :root[data-heading="serif"] .display,:root[data-heading="serif"] .heading{ font-weight:500; } /* eyebrow / section index */ .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); display:inline-block; } .eyebrow--ondark{ color:var(--on-dark); } .eyebrow--ondark::before{ background:var(--accent); } .lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--slate); line-height:1.7; max-width:62ch; } /* skip link */ .skip-link{ position:absolute; left:16px; top:-120%; z-index:1200; background:var(--brand-deep); color:#fff; padding:12px 22px; border-radius:0 0 10px 10px; font-weight:600; font-size:.9rem; transition:top var(--fast) var(--ease); } .skip-link:focus{ top:0; } /* ========================================================================== Header — solid, always distinct ========================================================================== */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; background:var(--white); border-bottom:1px solid var(--line); transition:box-shadow var(--base) var(--ease), background var(--base) var(--ease), border-color var(--base) var(--ease); } .site-header.is-scrolled{ box-shadow:0 8px 30px -18px rgba(24,21,18,.28); } /* dark header variant */ :root[data-header="dark"] .site-header{ background:var(--hero-from); border-bottom-color:rgba(255,255,255,.12); } :root[data-header="dark"] .site-header.is-scrolled{ box-shadow:0 10px 34px -18px rgba(8,40,64,.6); } .nav{ display:flex; align-items:center; gap:2rem; width:100%; } .brand{ display:flex; align-items:center; gap:.62rem; flex-shrink:0; } .brand__text{ display:flex; flex-direction:column; gap:.18rem; } .brand__slogan{ font-family:var(--font-body); font-weight:500; font-size:.585rem; letter-spacing:.075em; text-transform:uppercase; color:var(--warm-gray); line-height:1.45; } :root[data-header="dark"] .brand__slogan{ color:rgba(255,255,255,.6); } .brand__mark{ width:34px; height:34px; object-fit:contain; transform-origin:50% 72%; transition:transform .4s var(--ease); will-change:transform; } .brand__word{ font-family:var(--font-body); font-weight:700; font-size:1.32rem; letter-spacing:-.02em; color:var(--ink); line-height:1; transition:transform .4s var(--ease); } .brand:hover .brand__mark{ transform:scale(1.08); } .brand__word .tld{ color:var(--accent); display:inline-block; transition:transform .4s var(--ease); } .brand:hover .brand__word .tld{ transform:translateX(2px); } @media (prefers-reduced-motion:no-preference){ .brand:hover .brand__mark{ animation:markPop .62s var(--ease) both; } } @keyframes markPop{ 0%{ transform:rotate(0) scale(1); } 28%{ transform:rotate(-9deg) scale(1.16); } 52%{ transform:rotate(6deg) scale(1.1); } 74%{ transform:rotate(-3deg) scale(1.09); } 100%{ transform:rotate(0) scale(1.08); } } .brand__word b{ color:var(--brand); font-weight:700; } .brand__word .tld{ color:var(--accent); } :root[data-header="dark"] .brand__word{ color:#fff; } :root[data-header="dark"] .brand__word b{ color:#fff; } :root[data-header="dark"] .brand__word .tld{ color:#7fd4a8; } .nav__links{ display:flex; align-items:center; gap:.35rem; margin-left:auto; } .nav__link{ position:relative; padding:.55rem .72rem; border-radius:var(--r-sm); font-size:.93rem; font-weight:500; color:var(--slate); transition:color var(--fast) var(--ease), background var(--fast) var(--ease); } .nav__link:hover{ color:var(--brand); background:var(--brand-tint); } .nav__link.is-active{ color:var(--brand); } :root[data-header="dark"] .nav__link{ color:var(--on-dark-soft); } :root[data-header="dark"] .nav__link:hover{ color:#fff; background:rgba(255,255,255,.1); } :root[data-header="dark"] .nav__link.is-active{ color:#fff; } .nav__cta{ margin-left:.6rem; padding:.62rem 1.15rem; border-radius:var(--r-sm); background:var(--brand); color:#fff; font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:.4rem; box-shadow:var(--shadow-sm); transition:background var(--fast) var(--ease), transform var(--fast) var(--ease); } .nav__cta:hover{ background:var(--brand-deep); transform:translateY(-1px); } :root[data-header="dark"] .nav__cta{ background:var(--accent); } :root[data-header="dark"] .nav__cta:hover{ background:var(--accent-deep); } .nav__toggle{ display:none; margin-left:auto; width:44px; height:44px; border-radius:var(--r-sm); align-items:center; justify-content:center; color:var(--ink); } :root[data-header="dark"] .nav__toggle{ color:#fff; } .nav__toggle svg{ width:24px; height:24px; } /* mobile menu */ .mobile-menu{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:990; background:var(--white); display:flex; flex-direction:column; padding:1.25rem var(--pad-x) 2rem; transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden; transition:opacity var(--base) var(--ease), transform var(--base) var(--ease), visibility var(--base); overflow-y:auto; } .mobile-menu.is-open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; } .mobile-menu a{ padding:.95rem .25rem; font-size:1.08rem; font-weight:500; color:var(--charcoal); border-bottom:1px solid var(--line); } .mobile-menu a:last-of-type{ border-bottom:none; } .mobile-menu .nav__cta{ margin:1.25rem 0 0; justify-content:center; padding:.95rem; font-size:1rem; } /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; isolation:isolate; padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,6rem)); padding-bottom:clamp(3.5rem,8vw,6rem); background:var(--hero-to) url("assets/hero-photo.jpg") center right / cover no-repeat; color:var(--on-dark); overflow:hidden; } .hero__scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(90deg, rgba(250,250,248,.40) 0%, rgba(250,250,248,.56) 14%, rgba(250,250,248,.90) 30%, rgba(250,250,248,.88) 54%, rgba(250,250,248,.60) 68%, rgba(250,250,248,.20) 84%, rgba(250,250,248,0) 98%); } :root[data-palette="ink"] .hero__scrim{ background:linear-gradient(90deg,rgba(246,247,248,.40) 0%,rgba(246,247,248,.56) 14%,rgba(246,247,248,.9) 30%,rgba(246,247,248,.88) 54%,rgba(246,247,248,.6) 68%,rgba(246,247,248,.2) 84%,rgba(246,247,248,0) 98%); } .hero__inner{ position:relative; z-index:1; max-width:600px; } .hero h1{ font-family:var(--heading-family); font-weight:var(--heading-weight); font-size:clamp(2.5rem,5.2vw,4.2rem); line-height:1.04; letter-spacing:-.015em; color:var(--ink); margin:1.1rem 0 1.3rem; text-shadow:0 1px 10px rgba(250,250,248,.85); } .hero h1 em{ font-style:italic; color:var(--ink); } :root[data-heading="sans"] .hero h1 em{ font-style:normal; } .hero__sub{ font-size:clamp(1.02rem,1.5vw,1.18rem); color:var(--charcoal); line-height:1.7; max-width:54ch; text-shadow:0 1px 8px rgba(250,250,248,.9); } .hero .eyebrow{ text-shadow:0 1px 8px rgba(250,250,248,.95); } .hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; } .hero__note{ margin-top:.9rem; font-size:.86rem; font-weight:500; color:var(--charcoal); text-shadow:0 1px 8px rgba(250,250,248,.9); } .discretion{ display:flex; gap:.85rem; align-items:flex-start; margin-top:1.75rem; padding:1.15rem 1.3rem; background:var(--white); border:1px dashed var(--line-strong); border-radius:var(--r); max-width:74ch; } .discretion svg{ width:22px; height:22px; flex-shrink:0; color:var(--brand); margin-top:.1rem; } .discretion p{ font-size:.95rem; color:var(--slate); line-height:1.65; } .discretion b{ color:var(--ink); font-weight:600; } .hero__stats{ display:flex; gap:2.5rem; margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid var(--line-strong); } .hero__stat .n{ font-family:var(--heading-family); font-weight:600; font-size:clamp(2rem,3.4vw,2.7rem); color:var(--brand); line-height:1; } .hero__stat .l{ font-size:.86rem; color:var(--slate); margin-top:.4rem; } :root[data-heading="serif"] .hero h1{ font-weight:500; } :root[data-heading="serif"] .hero__stat .n{ font-weight:500; } /* buttons */ .btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:var(--r-sm); font-weight:600; font-size:.96rem; line-height:1; transition:transform var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); white-space:nowrap; } .btn svg{ width:18px; height:18px; } .btn--primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -12px rgba(46,157,112,.7); } .btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); } .btn--light{ background:#fff; color:var(--brand-deep); border:1px solid var(--line); box-shadow:0 6px 18px -10px rgba(24,21,18,.35); } .btn--light:hover{ background:var(--brand-tint); border-color:var(--brand-tint-2); color:var(--brand-deep); transform:translateY(-2px); } .btn--ghost-light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); } .btn--ghost-light:hover{ background:rgba(255,255,255,.1); border-color:#fff; } .btn--ghost{ background:transparent; color:var(--brand); border:1px solid var(--line-strong); } .btn--ghost:hover{ background:var(--brand-tint); border-color:var(--brand); } /* ========================================================================== Section header block ========================================================================== */ .sec-head{ max-width:64ch; margin-bottom:2.75rem; } .sec-head .num{ font-family:var(--font-body); font-weight:600; font-size:.8rem; color:var(--warm-gray); letter-spacing:.12em; } .sec-head h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); margin:.7rem 0 1rem; } .sec-head.center{ margin-inline:auto; text-align:center; } .sec-head.center .eyebrow{ justify-content:center; } .sec-head.center .lead{ margin-inline:auto; } /* ========================================================================== Services overview grid ========================================================================== */ .svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem; } .svc-card{ position:relative; background:var(--white); border:var(--border); border-radius:var(--r-lg); padding:1.7rem 1.6rem 1.5rem; display:flex; flex-direction:column; transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease); } .svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong); } .svc-card__ico{ width:48px; height:48px; border-radius:11px; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; } .svc-card__ico svg{ width:25px; height:25px; } .svc-card h3{ font-family:var(--heading-family); font-weight:var(--heading-weight); font-size:1.32rem; color:var(--ink); line-height:1.2; letter-spacing:-.01em; margin-bottom:.55rem; } :root[data-heading="serif"] .svc-card h3{ font-weight:600; font-size:1.5rem; } .svc-card p{ font-size:.95rem; color:var(--slate); line-height:1.6; flex:1; } .svc-card__link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-weight:600; font-size:.9rem; color:var(--brand); } .svc-card__link svg{ width:16px; height:16px; transition:transform var(--fast) var(--ease); } .svc-card:hover .svc-card__link svg{ transform:translateX(4px); } .svc-card__rule{ position:absolute; left:0; top:1.7rem; bottom:1.7rem; width:3px; border-radius:3px; background:linear-gradient(var(--brand),var(--accent)); opacity:0; transition:opacity var(--base) var(--ease); } .svc-card:hover .svc-card__rule{ opacity:1; } /* ========================================================================== Service detail blocks ========================================================================== */ .svc{ border-top:1px solid var(--line); } .svc__head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; } .svc__tag{ font-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); } .svc__num{ font-family:var(--heading-family); font-weight:500; font-size:1.6rem; color:var(--line-strong); } .svc__layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; } .svc__intro h2{ font-size:clamp(1.7rem,3vw,2.5rem); margin-bottom:1rem; } .svc__points{ display:flex; flex-direction:column; gap:1.35rem; } .svc__point{ display:grid; grid-template-columns:auto 1fr; gap:1rem; } .svc__point-ico{ width:40px; height:40px; flex-shrink:0; border-radius:10px; background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; } .svc__point-ico svg{ width:21px; height:21px; } .svc__point h4{ font-family:var(--font-body); font-weight:600; font-size:1.04rem; color:var(--ink); margin-bottom:.25rem; } .svc__point p{ font-size:.93rem; color:var(--slate); line-height:1.6; } .svc__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.25rem; } .svc__stat{ background:var(--white); padding:1.15rem 1.1rem; } .svc__stat .n{ font-family:var(--heading-family); font-weight:600; font-size:clamp(1.25rem, .9vw + .9rem, 1.75rem); color:var(--brand); line-height:1; white-space:nowrap; } :root[data-heading="serif"] .svc__stat .n{ font-weight:600; } .svc__stat .l{ font-size:.8rem; color:var(--slate); margin-top:.35rem; } .chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.75rem; } .proof-link{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem; font-weight:600; font-size:.95rem; color:var(--brand); border-bottom:2px solid var(--brand-tint-2); padding-bottom:.2rem; transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .proof-link svg{ width:17px; height:17px; transition:transform var(--fast) var(--ease); } .proof-link:hover{ color:var(--brand-deep); border-color:var(--brand); } .proof-link:hover svg{ transform:translateX(4px); } /* numbered step grid (How we engage / case study) */ .case-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } @media (max-width:1020px){ .case-steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .case-steps{ grid-template-columns:1fr; } } .case-step{ background:var(--white); padding:1.5rem 1.4rem; } .case-step .k{ font-family:var(--heading-family); font-weight:600; font-size:1.4rem; color:var(--brand); } .case-step h3{ font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--ink); margin:.5rem 0 .4rem; } .case-step p{ font-size:.9rem; color:var(--slate); line-height:1.6; } /* honeypot — visually removed, present for bots */ .hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* closing CTA band */ .cta-band{ background:var(--brand-deep); color:#fff; border-radius:var(--r-lg); padding:clamp(2rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; } .cta-band h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); color:#fff; max-width:24ch; } .cta-band p{ color:rgba(255,255,255,.75); font-size:.95rem; margin-top:.5rem; } .chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-size:.85rem; color:var(--charcoal); background:var(--white); } .chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); } /* ========================================================================== About / Why ========================================================================== */ .about__top{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-bottom:3rem; } .about__media{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:4/3; background:linear-gradient(150deg,var(--brand-tint),var(--accent-tint)); } .about__media image-slot,.about__media img{ width:100%; height:100%; object-fit:cover; display:block; } .about__media--wide{ aspect-ratio:3/2; } .about__heads{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; margin-bottom:1rem; } .about__heads .sec-head{ margin-bottom:0; } .about__heads .about__intro{ padding-top:.35rem; } .about__intro{ margin-bottom:1rem; } .about__band{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-top:3rem; } .about__band-copy .eyebrow{ margin-bottom:.7rem; } .about__band-copy h3{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:1rem; max-width:18ch; } .about__band-copy p{ color:var(--slate); line-height:1.75; margin-bottom:1rem; } .reassure{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.5rem; } .reassure li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:.97rem; color:var(--charcoal); font-weight:500; } .reassure svg{ width:20px; height:20px; color:var(--accent); margin-top:.1rem; } .values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .value{ background:var(--white); padding:1.5rem 1.4rem; } .value__k{ display:flex; align-items:center; gap:.55rem; font-weight:600; color:var(--ink); margin-bottom:.5rem; } .value__k .d{ width:8px; height:8px; border-radius:2px; background:var(--accent); } .value p{ font-size:.92rem; color:var(--slate); line-height:1.6; } .industries{ margin-top:3rem; } .industries h3{ font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:1.1rem; } .industries ul{ display:flex; flex-wrap:wrap; gap:.6rem; } .industries li{ padding:.55rem 1rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); font-size:.9rem; color:var(--charcoal); } .quote{ margin-top:3rem; background:var(--brand-deep); color:#fff; border-radius:var(--r-lg); padding:clamp(2rem,4vw,3.25rem); position:relative; overflow:hidden; } .quote::before{ content:"“"; position:absolute; top:-1.5rem; right:1.5rem; font-family:var(--font-display); font-size:11rem; color:rgba(255,255,255,.08); line-height:1; } .quote blockquote{ font-family:var(--heading-family); font-weight:500; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.3; max-width:30ch; position:relative; } :root[data-heading="serif"] .quote blockquote{ font-style:italic; } .quote cite{ display:block; margin-top:1.25rem; font-family:var(--font-body); font-style:normal; font-weight:500; font-size:.95rem; color:#9fe6c2; } /* ========================================================================== FAQ ========================================================================== */ .faq{ display:grid; gap:.7rem; max-width:880px; margin-inline:auto; } .faq__item{ border:1px solid var(--line); border-radius:var(--r); background:var(--white); overflow:hidden; transition:border-color var(--fast) var(--ease); } .faq__item.is-open{ border-color:var(--brand); } .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.4rem; text-align:left; font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:var(--ink); } .faq__q .pm{ width:24px; height:24px; flex-shrink:0; position:relative; } .faq__q .pm::before,.faq__q .pm::after{ content:""; position:absolute; left:50%; top:50%; background:var(--brand); transition:transform var(--base) var(--ease); } .faq__q .pm::before{ width:14px; height:2px; transform:translate(-50%,-50%); } .faq__q .pm::after{ width:2px; height:14px; transform:translate(-50%,-50%); } .faq__item.is-open .pm::after{ transform:translate(-50%,-50%) scaleY(0); } .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--base) var(--ease); } .faq__item.is-open .faq__a{ grid-template-rows:1fr; } .faq__a-inner{ overflow:hidden; } .faq__a p{ padding:0 1.4rem 1.35rem; font-size:.96rem; color:var(--slate); line-height:1.7; max-width:70ch; } /* ========================================================================== Contact ========================================================================== */ .contact{ background:linear-gradient(165deg,var(--hero-from),var(--hero-to)); color:var(--on-dark); } .contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; } .contact h2{ color:#fff; font-size:clamp(2rem,3.6vw,3rem); margin:1rem 0 1rem; } .contact__sub{ color:var(--on-dark-soft); font-size:1.05rem; line-height:1.7; max-width:46ch; } .contact__meta{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; } .contact__meta-row{ display:flex; gap:.85rem; align-items:flex-start; } .contact__meta-text b{ display:block; color:#fff; font-weight:600; font-size:.95rem; } .contact__meta-text span{ font-size:.88rem; color:var(--on-dark-soft); } .contact__meta-ico{ width:40px; height:40px; flex-shrink:0; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#9fe6c2; } .contact__meta-ico svg{ width:20px; height:20px; } .contact__meta b{ display:block; color:#fff; font-weight:600; font-size:.95rem; } .contact__meta span{ font-size:.88rem; color:var(--on-dark-soft); } .form{ background:var(--white); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.25rem); box-shadow:var(--shadow-lg); } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .field{ margin-bottom:1.1rem; } .field label{ display:block; font-size:.85rem; font-weight:600; color:var(--charcoal); margin-bottom:.4rem; } .field label .req{ color:var(--accent-deep); } .field input,.field select,.field textarea{ width:100%; padding:.78rem .9rem; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--cream); color:var(--ink); font-size:.95rem; transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease); } .field textarea{ resize:vertical; min-height:120px; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px var(--brand-tint); } .field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.12); } .field__err{ display:none; font-size:.8rem; color:#c2403c; margin-top:.35rem; } .field.invalid .field__err{ display:block; } .form .btn--primary{ width:100%; justify-content:center; margin-top:.4rem; padding:.95rem; } .form__note{ font-size:.8rem; color:var(--warm-gray); text-align:center; margin-top:.9rem; } .form__success{ display:none; text-align:center; padding:1rem 0; } .form__success.show{ display:block; } .form__success .ok{ width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; } .form__success .ok svg{ width:28px; height:28px; } .form__success h3{ font-family:var(--heading-family); font-weight:600; font-size:1.5rem; color:var(--ink); margin-bottom:.5rem; } .form__success p{ color:var(--slate); font-size:.95rem; } .form.sent .form__inner{ display:none; } /* ========================================================================== Footer ========================================================================== */ .site-footer{ background:var(--ink); color:rgba(255,255,255,.62); padding-block:3.25rem 2rem; } .footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); } .footer__brand .brand__word{ color:#fff; } .footer__brand p{ margin-top:1rem; font-size:.9rem; line-height:1.6; max-width:34ch; color:rgba(255,255,255,.55); } .footer__col h4{ font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:1rem; } .footer__col ul{ display:flex; flex-direction:column; gap:.65rem; } .footer__col a{ font-size:.9rem; color:rgba(255,255,255,.6); transition:color var(--fast) var(--ease); } .footer__col a:hover{ color:#fff; } .footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.75rem; font-size:.84rem; } .footer__bottom a{ color:#9fe6c2; } /* ========================================================================== Reveal-on-scroll ========================================================================== */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1020px){ .svc__layout{ grid-template-columns:1fr; gap:2rem; } .about__top{ grid-template-columns:1fr; } .about__heads{ grid-template-columns:1fr; gap:2rem; } .about__band{ grid-template-columns:1fr; } .about__band-copy{ order:2; } .about__media--wide{ order:1; } .contact__grid{ grid-template-columns:1fr; } .footer__top{ grid-template-columns:1fr 1fr; } } @media (max-width:1120px){ .nav__links{ display:none; } .nav__toggle{ display:flex; } } @media (max-width:760px){ .hero{ background-position:74% center; } .hero__scrim{ background:linear-gradient(105deg, rgba(250,250,248,.74) 0%, rgba(250,250,248,.58) 50%, rgba(250,250,248,.4) 78%, rgba(250,250,248,.28) 100%); } .svc__stats{ grid-template-columns:repeat(2,1fr); } .hero__stats{ gap:1.5rem; flex-wrap:wrap; } .form__row{ grid-template-columns:1fr; } .footer__top{ grid-template-columns:1fr 1fr; gap:1.75rem; } .footer__brand{ grid-column:1/-1; } } @media (max-width:460px){ .footer__top{ grid-template-columns:1fr; } .hero__stats{ gap:1.25rem 2rem; } } .form__error{ display:none; margin-top:.85rem; padding:.7rem .9rem; border-radius:8px; background:#fee2e2; border:1px solid #fca5a5; color:#b91c1c; font-size:.92rem; line-height:1.45; } .form__error.show{ display:block; }