/* ========================================================================= Orlixs Designs — architecture, interiors, 3D visualization Editorial serif system: Instrument Serif display + Archivo grotesque. All brand-tunable values live in :root below. ========================================================================= */ :root { /* ---- Palette (editorial / oxblood) ---- */ --paper: #faf9f7; /* page background */ --paper-2: #efece7; /* alt band */ --surface: #ffffff; /* cards */ --ink: #14110f; /* primary text */ --ink-2: #55504a; /* secondary text */ --ink-3: #6b645c; /* muted text — meets WCAG AA on every surface here */ --line: #e2ded7; --line-strong: #cdc7bd; --accent: #7a3033; /* oxblood — buttons, structural accents */ --accent-deep: #5c2225; /* hover */ --accent-soft: #c98d84; /* oxblood on dark grounds */ --accent-tint: #f0e6e4; /* Clay — the "kick" colour on hook words. Darkened from a true clay/beige so it still clears WCAG AA as text; --clay-warm is the lighter tone for dark grounds. */ --clay: #925a2e; /* 5.4:1 on paper, 4.8:1 on the alt band — AA everywhere */ --clay-warm: #d9a273; --clay-tint: #f2e9df; --orange-tint: #fbe7d2; /* light orange — part-time rate card */ /* Capability colours — one per service card. Kept earthy so they read as one architectural family rather than a rainbow. All clear AA as text on their tint. */ --svc-arch: #7a3033; --svc-arch-tint: #f7e9e8; --svc-int: #925a2e; --svc-int-tint: #f9ece0; --svc-3d: #4c5c3c; --svc-3d-tint: #ecf0e7; --svc-viz: #35565f; --svc-viz-tint: #e7f0f2; --ink-invert: #faf9f7; --dark: #14110f; --dark-2: #221d1a; /* ---- Type ---- */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Spacing ---- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 3.75rem; --sp-7: 5rem; --sp-8: 6.5rem; --maxw: 1280px; --radius: 2px; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Header + wordmark size. `.scrolled` is set on by main.js. */ --header-h: 128px; --brand-size: clamp(2.4rem, 5vw, 4.5rem); /* 3x the original 1.5rem wordmark */ } :root.scrolled { --header-h: 78px; --brand-size: clamp(1.7rem, 2.4vw, 2.1rem); } @media (max-width: 980px) { :root { --header-h: 92px; --brand-size: 2.15rem; } :root.scrolled { --header-h: 70px; --brand-size: 1.6rem; } } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--paper); color: var(--ink); line-height: 1.6; font-size: 16.5px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ---- Layout helpers ---- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); } .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-7); } .band-alt { background: var(--paper-2); } /* Display type — Instrument Serif is a single 400 weight; size and italics carry the hierarchy. */ .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.0; } .eyebrow { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--accent); } .eyebrow--muted { color: var(--ink-3); } .section-head { max-width: 48rem; margin-bottom: var(--sp-4); } .section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.0; letter-spacing: -0.018em; margin-top: var(--sp-2); } .section-head p { color: var(--ink-2); font-size: 1.02rem; margin-top: var(--sp-3); max-width: 38rem; } /* Hook / emphasis words site-wide take the clay kick, not the oxblood. */ em.accent { color: var(--clay); font-style: italic; } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.5rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; border: 1px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-deep); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--ink); } .btn--onDark { background: var(--paper); color: var(--ink); } .btn--onDark:hover { background: #fff; } .btn--ghostDark { background: transparent; color: var(--ink-invert); border-color: rgba(250,249,247,0.45); } .btn--ghostDark:hover { border-color: var(--ink-invert); } .btn .arw { transition: transform .2s var(--ease); } .btn:hover .arw { transform: translateX(3px); } .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================================================================= Header / Nav ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250,249,247,0.86); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); transition: height .3s var(--ease); } /* One font, upright — no italic. Large at the top of the page, shrinks once scrolled. */ .brand { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 400; font-style: normal; font-size: var(--brand-size); letter-spacing: -0.015em; line-height: 1; transition: font-size .3s var(--ease); } .brand b { font-weight: 400; font-style: normal; } .brand .brand-mark { color: var(--accent); font-style: normal; margin-left: 0.26em; } .nav-links { display: flex; align-items: center; gap: 2.1rem; } .nav-links a { font-size: 0.78rem; color: var(--ink-2); position: relative; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 500; transition: color .2s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0; background: var(--accent); transition: width .25s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 1rem; } .nav-toggle { display: none; background: none; border: 0; padding: 0.4rem; color: var(--ink); } .mobile-menu { display: none; } @media (max-width: 980px) { .nav-links, .nav-cta .btn { display: none; } .nav-toggle { display: inline-flex; } .mobile-menu { display: block; position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99; background: var(--paper); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .35s var(--ease); padding: var(--sp-2) 0 var(--sp-4); } .mobile-menu.open { transform: translateY(0); } .mobile-menu a { display: block; padding: 0.95rem clamp(1.25rem,5vw,3.5rem); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 500; border-top: 1px solid var(--line); } .mobile-menu .btn { margin: var(--sp-3) clamp(1.25rem,5vw,3.5rem) 0; } } /* ========================================================================= Hero — copy in the container, image bleeding to the right viewport edge ========================================================================= */ /* Two balanced columns centred in the page — not pushed to one edge. */ .hero { position: relative; } .hero-inner { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(1.75rem, 2.8vw, 3rem); align-items: stretch; padding-block: clamp(2.25rem, 3.6vw, 3.75rem); } /* Copy centres itself; the image stretches to match the row so the hero has no dead vertical space. */ .hero-copy { max-width: 48rem; align-self: center; } .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 4.7vw, 4.1rem); line-height: 1.0; letter-spacing: -0.014em; margin-top: var(--sp-3); text-wrap: balance; /* evens the line lengths instead of leaving a short orphan */ } .hero h1 .rate { color: var(--clay); font-style: italic; } .hero-sub { color: var(--ink); font-size: clamp(1.05rem, 1.4vw, 1.16rem); font-weight: 500; line-height: 1.5; margin-top: var(--sp-3); max-width: 40rem; letter-spacing: 0; text-wrap: pretty; /* keeps a single word off the last line */ } .hero-sub .kick { color: var(--clay); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--sp-4); } .hero-micro { display: flex; align-items: center; gap: 0.8rem; margin-top: var(--sp-4); color: var(--ink-3); font-size: 0.82rem; max-width: 28rem; } .hero-micro .avatars { display: flex; flex-shrink: 0; } .hero-micro .avatars span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); margin-left: -8px; background: var(--accent-tint); } .hero-micro .avatars span:first-child { margin-left: 0; } .hero-visual { position: relative; width: 100%; min-height: clamp(300px, 34vw, 460px); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .hero-badge { position: absolute; left: 0; bottom: 0; background: var(--paper); padding: 1rem 1.35rem; display: flex; flex-direction: column; gap: 2px; } .hero-badge .k { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1; } .hero-badge .l { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-4); } .hero-copy { max-width: 40rem; } .hero-visual { aspect-ratio: 16 / 10; min-height: 0; max-width: 40rem; } } /* ========================================================================= Trust bar ========================================================================= */ .trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: var(--sp-4) var(--sp-2); text-align: center; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } .stat .num { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.01em; } .stat .lbl { margin-top: 0.6rem; font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; } @media (max-width: 760px) { .stats-row { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); } } /* ========================================================================= How it works ========================================================================= */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 3rem); } .step { padding-top: var(--sp-3); border-top: 1px solid var(--ink); } .step .no { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); font-style: italic; } .step h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; margin-top: var(--sp-2); letter-spacing: -0.01em; } .step p { color: var(--ink-2); margin-top: 0.7rem; font-size: 0.96rem; } /* Tablet: 2 up, with the third step spanning so it never sits orphaned. */ @media (max-width: 980px) and (min-width: 641px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps .step:last-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .steps { grid-template-columns: 1fr; } } /* "How it works" runs 20% larger than the rest of the page — scoped to #how so no other section is affected. */ #how .eyebrow { font-size: 0.79rem; } #how .section-head { max-width: 56rem; } #how .section-head h2 { font-size: clamp(2.88rem, 6.24vw, 4.8rem); } #how .section-head p { font-size: 1.22rem; max-width: 44rem; } #how .step .no { font-size: 1.32rem; } #how .step h3 { font-size: 1.92rem; margin-top: calc(var(--sp-2) * 1.2); } #how .step p { font-size: 1.15rem; margin-top: 0.84rem; } #how .step { padding-top: calc(var(--sp-3) * 1.2); } #how .steps { gap: clamp(1.8rem, 3.6vw, 3.6rem) clamp(1.5rem, 3vw, 3.6rem); } @media (max-width: 420px) { #how .section-head h2 { font-size: clamp(2.5rem, 11vw, 3.2rem); } #how .section-head p, #how .step p { font-size: 1.06rem; } #how .step h3 { font-size: 1.7rem; } } /* ========================================================================= Services ========================================================================= */ /* Separate colour-blocked cards, each carrying its own accent via --c / --c-tint. */ .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); } .svc { background: var(--c-tint); padding: var(--sp-4); display: flex; flex-direction: column; gap: 0.75rem; border-top: 3px solid var(--c); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .svc--arch { --c: var(--svc-arch); --c-tint: var(--svc-arch-tint); } .svc--int { --c: var(--svc-int); --c-tint: var(--svc-int-tint); } .svc--3d { --c: var(--svc-3d); --c-tint: var(--svc-3d-tint); } .svc--viz { --c: var(--svc-viz); --c-tint: var(--svc-viz-tint); } .svc:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -18px rgba(20,17,15,0.5); } .svc .ico-tile { width: 52px; height: 52px; display: grid; place-items: center; background: var(--c); color: #fff; flex-shrink: 0; } .svc .ico { width: 26px; height: 26px; } .svc h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; letter-spacing: -0.01em; color: var(--c); } .svc p { color: var(--ink-2); font-size: 0.96rem; } .svc ul { list-style: none; padding: 0; margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.45rem; } .svc li { font-size: 0.68rem; color: var(--c); background: rgba(255,255,255,0.72); border: 1px solid var(--line-strong); /* fallback where color-mix is unsupported */ border-color: color-mix(in srgb, var(--c) 28%, transparent); padding: 0.28rem 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } @media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .svc:hover { transform: none; } } /* ========================================================================= Portfolio — full-bleed edge-to-edge grid ========================================================================= */ .folio-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .folio-bleed { margin-top: var(--sp-5); padding-inline: clamp(1rem, 2vw, 2rem); } /* Tiles run 20% smaller than full-bleed — the grid narrows to 80%, which also lines it up with the .wrap text column above it. Full width again on tablet/phone. */ @media (min-width: 901px) { /* 77.4%, not 80% — the column gaps stay a fixed size, so the container has to narrow slightly further for the tiles themselves to land 20% smaller. */ .folio-bleed { max-width: 77.4%; margin-inline: auto; padding-inline: 0; } } /* Uniform 3 x 3 grid — nine equal tiles. */ .folio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.75rem); } .folio-item { position: relative; overflow: hidden; border: 0; padding: 0; background: var(--paper-2); cursor: pointer; aspect-ratio: 4/3; display: block; width: 100%; } .folio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .folio-item:hover img { transform: scale(1.03); } .folio-item .meta { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.5rem; text-align: left; background: linear-gradient(to top, rgba(20,17,15,0.82), rgba(20,17,15,0)); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .folio-item:hover .meta, .folio-item:focus-visible .meta { opacity: 1; transform: translateY(0); } .folio-item .meta .t { font-family: var(--font-display); font-size: 1.2rem; } .folio-item .meta .c { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.82; font-weight: 500; } /* 3 up stays down to phones. Below 640 it drops to 2 up, with the ninth tile spanning both so the last row is never a lone orphan; one column on small phones. */ @media (max-width: 640px) { .folio { grid-template-columns: repeat(2, 1fr); } .folio-item:last-child { grid-column: 1 / -1; aspect-ratio: 16/9; } .folio-item .meta { padding: 0.9rem 1rem; } .folio-item .meta .t { font-size: 1.05rem; } } @media (max-width: 460px) { .folio { grid-template-columns: 1fr; } .folio-item:last-child { grid-column: auto; aspect-ratio: 4/3; } } /* Touch devices never fire :hover — captions would stay invisible, so pin them open. */ @media (hover: none) { .folio-item .meta { opacity: 1; transform: none; } .folio-item:hover img, .video-thumb:hover img { transform: none; } } /* ========================================================================= Client review video — single showcase ========================================================================= */ .video-solo { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .video-thumb { position: relative; aspect-ratio: 16/9; background: var(--paper); cursor: pointer; overflow: hidden; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .video-thumb:hover img { transform: scale(1.03); } .video-thumb .play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; background: rgba(250,249,247,0.94); border-radius: 50%; display: grid; place-items: center; color: var(--accent); transition: transform .2s var(--ease); } .video-thumb:hover .play { transform: scale(1.08); } .video-solo-copy blockquote { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.14; letter-spacing: -0.015em; margin: var(--sp-3) 0 var(--sp-4); } .video-solo-copy .who { font-weight: 500; font-size: 0.95rem; } .video-solo-copy .role { font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; } @media (max-width: 900px) { .video-solo { grid-template-columns: 1fr; } } /* ========================================================================= Pricing ========================================================================= */ .pricing-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; } .price-block h3 { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); } .hourly { display: grid; gap: 0.9rem; } .hourly .rate-card { padding: var(--sp-3) var(--sp-3); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .hourly .rate-card .role-name { font-family: var(--font-display); font-size: 1.7rem; } .hourly .rate-card .desc { font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; } .hourly .rate-card .amt { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; white-space: nowrap; } .hourly .rate-card .amt small { font-family: var(--font-sans); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.06em; } /* Full-time is the headline offer — solid oxblood. Part-time sits one step back. Selectors are scoped under .hourly to outrank the base .rate-card colours above. */ .hourly .rate-card--primary { background: var(--accent); color: #fff; } .hourly .rate-card--primary .desc, .hourly .rate-card--primary .amt small { color: rgba(255,255,255,0.82); } .hourly .rate-card--soft { background: var(--orange-tint); } .tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .tier { background: var(--paper); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; position: relative; } .tier.featured { background: var(--surface); } /* The tag is its own row so it can never collide with the tier name. Non-featured tiers get an empty row of the same height to keep both columns aligned. */ .tier .tag { display: block; color: var(--accent); margin-bottom: 0.5rem; font-size: 0.6rem; line-height: 1.1; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .tier:not(.featured)::before { content: ""; display: block; height: 0.66rem; margin-bottom: 0.5rem; } .tier .tname { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .tier .price { font-family: var(--font-display); font-size: 2.9rem; line-height: 1; margin: 0.8rem 0 0.25rem; } .tier .price small { font-family: var(--font-sans); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.06em; } .tier .per { font-size: 0.8rem; color: var(--ink-3); } .tier ul { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-4); display: grid; gap: 0.6rem; } .tier li { font-size: 0.88rem; color: var(--ink-2); display: flex; gap: 0.6rem; align-items: flex-start; } .tier li svg { color: var(--accent); flex-shrink: 0; margin-top: 4px; } .tier .btn { margin-top: auto; justify-content: center; } .pricing-note { margin-top: var(--sp-3); font-size: 0.82rem; color: var(--ink-3); } @media (max-width: 940px) { .pricing-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } } /* ========================================================================= Testimonials ========================================================================= */ .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .quote { background: var(--paper-2); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; } .quote .stars { color: var(--accent); font-size: 0.8rem; letter-spacing: 3px; } .quote blockquote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.24; margin: var(--sp-3) 0 var(--sp-4); letter-spacing: -0.01em; } .quote .by { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; } .quote .by .av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-tint); flex-shrink: 0; } .quote .by .who { font-weight: 500; font-size: 0.9rem; } .quote .by .role { font-size: 0.76rem; color: var(--ink-3); } @media (max-width: 1024px) and (min-width: 641px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } .quote-grid .quote:last-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .quote-grid { grid-template-columns: 1fr; } } /* ========================================================================= Why us — hook lines ========================================================================= */ .hooks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .hook { background: var(--paper); padding: var(--sp-4) var(--sp-4) var(--sp-5); } .hook h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); } .hook p { color: var(--ink-2); font-size: 0.98rem; margin-top: var(--sp-2); max-width: 32rem; } @media (max-width: 780px) { .hooks { grid-template-columns: 1fr; } } /* ========================================================================= Studio (legacy — section removed from the page, styles kept for reference) ========================================================================= */ .studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; } .studio-copy p { color: var(--ink-2); font-size: 1rem; margin-top: var(--sp-3); } .studio-copy .lead { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.06; color: var(--ink); letter-spacing: -0.018em; margin-top: var(--sp-2); } .team-row { display: flex; gap: 1rem; margin-top: var(--sp-4); flex-wrap: wrap; } .team-row .member { text-align: center; } .team-row .member .av { width: 58px; height: 58px; border-radius: 50%; background: var(--paper-2); overflow: hidden; } .team-row .member .av img { width: 100%; height: 100%; object-fit: cover; } .team-row .member .nm { font-size: 0.64rem; color: var(--ink-3); margin-top: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .studio-visual { aspect-ratio: 5/4; overflow: hidden; } .studio-visual img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .studio-grid { grid-template-columns: 1fr; } .studio-visual { order: -1; } } /* ========================================================================= Final CTA ========================================================================= */ .cta { background: var(--dark); color: var(--ink-invert); padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 3rem); text-align: center; } .cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.0; letter-spacing: -0.02em; } .cta h2 em { color: var(--clay-warm); font-style: italic; } .cta p { color: rgba(250,249,247,0.74); font-size: 1.04rem; margin: var(--sp-3) auto 0; max-width: 33rem; } .cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); } .cta .fineprint { margin-top: var(--sp-4); font-size: 0.82rem; color: rgba(250,249,247,0.62); } .cta .fineprint a { color: rgba(250,249,247,0.88); text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================= Footer ========================================================================= */ .site-footer { border-top: 1px solid var(--line); padding-block: var(--sp-6) var(--sp-4); } .footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2rem; } .footer-grid .brand { margin-bottom: var(--sp-3); } .footer-grid p { color: var(--ink-3); font-size: 0.88rem; max-width: 22rem; } .footer-col h4 { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: var(--sp-3); } .footer-col a { display: block; color: var(--ink-2); font-size: 0.9rem; padding: 0.3rem 0; transition: color .2s var(--ease); } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.76rem; letter-spacing: 0.04em; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid .brand-col { grid-column: span 2; } } /* ========================================================================= Lightbox ========================================================================= */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,17,15,0.92); display: none; align-items: center; justify-content: center; padding: 5vw; } .lightbox.open { display: flex; } .lightbox .lb-inner { max-width: 980px; width: 100%; } .lightbox img { width: 100%; } .lightbox .lb-close { position: absolute; top: 1.4rem; right: 1.6rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(250,249,247,0.14); color: #fff; border: 0; display: grid; place-items: center; } .lightbox .lb-close:hover { background: rgba(250,249,247,0.3); } .lightbox .lb-cap { color: rgba(250,249,247,0.8); text-align: center; margin-top: 1rem; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; } /* ========================================================================= Motion ========================================================================= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .folio-item img, .video-thumb img { transition: none; } } /* ========================================================================= Device sweep — small phones, tablets, very large screens ========================================================================= */ /* Small phones (iPhone SE / 320–420px): tighten the scale so nothing crowds. */ @media (max-width: 420px) { body { font-size: 16px; } .section { padding-block: var(--sp-6); } .section--tight { padding-block: var(--sp-5); } .section-head { margin-bottom: var(--sp-4); } .hero h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); } .hero-sub { font-size: 1.02rem; } .hero-actions .btn { flex: 1 1 100%; justify-content: center; } .stat { padding: var(--sp-4) var(--sp-1); } .svc, .quote, .tier { padding-inline: var(--sp-3); } .hero-micro { align-items: flex-start; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.4rem; } } /* Tablets: keep the studio split readable rather than a wide two-up. */ @media (max-width: 900px) and (min-width: 641px) { .studio-grid { gap: var(--sp-4); } .video-solo { gap: var(--sp-4); } } /* Every touch size: meet the 44px minimum tap target. */ @media (pointer: coarse) { .btn { padding-block: 1rem; min-height: 48px; } .nav-toggle { min-width: 48px; min-height: 48px; align-items: center; justify-content: center; } .footer-col a, .mobile-menu a { min-height: 44px; display: flex; align-items: center; } } /* Very large screens: stop the type scaling away from the 1280px container. Must match the clamp ceilings above, or it silently re-inflates the hero. */ @media (min-width: 1800px) { .hero h1 { font-size: 4.1rem; } .section-head h2 { font-size: 4rem; } #how .section-head h2 { font-size: 4.8rem; } } /* Short landscape phones: the tall hero would otherwise push the CTA off-screen. */ @media (max-height: 520px) and (orientation: landscape) { .hero-inner { padding-block: var(--sp-4); } .hero-visual { aspect-ratio: 16/9; } :root { --header-h: 64px; --brand-size: 1.7rem; } } /* accessibility helpers */ .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; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--ink); color: var(--paper); padding: 0.7rem 1rem; } .skip-link:focus { left: 0; }