@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&display=swap'); /* ── Variables (light theme, logo-matched colors) ── */ :root { --bg: #ffffff; --bg-alt: #f4f6fb; --bg-card: #ffffff; --navy: #0f2044; --navy-lt: #1a3564; --gold: #b8963e; --gold-lt: #d4af60; --gold-dim: rgba(184,150,62,0.12); --text: #1e2d4a; --muted: #586580; --dim: #8496b0; --border: #dde2ec; --line: #edf0f6; --shadow-sm: 0 2px 8px rgba(15,32,68,.06); --shadow: 0 8px 32px rgba(15,32,68,.10); --shadow-lg: 0 20px 50px rgba(15,32,68,.14); --max-w: 1200px; --ease: cubic-bezier(0.4,0,0.2,1); --trans: 0.28s var(--ease); } /* ── Accessibility body classes ── */ body.a11y-high-contrast { --bg: #000 !important; --bg-alt: #000 !important; --bg-card: #111 !important; --navy: #000 !important; --text: #fff !important; --muted: #fff !important; --gold: #ff0 !important; --gold-lt: #ff0 !important; --border: #fff !important; --line: #333 !important; background: #000 !important; color: #fff !important; } body.a11y-high-contrast .site-header { background: #000 !important; border-bottom-color: #fff !important; } body.a11y-high-contrast .info-card, body.a11y-high-contrast .approach-card, body.a11y-high-contrast .svc-card, body.a11y-high-contrast .contact-card { background: #111 !important; border-color: #fff !important; } body.a11y-inverted { filter: invert(1) hue-rotate(180deg); } body.a11y-inverted img, body.a11y-inverted canvas { filter: invert(1) hue-rotate(180deg); } body.a11y-grayscale { filter: grayscale(1); } body.a11y-letter-space, body.a11y-letter-space * { letter-spacing: 0.12em !important; word-spacing: 0.18em !important; } body.a11y-line-height, body.a11y-line-height * { line-height: 2.1 !important; } body.a11y-readable-font, body.a11y-readable-font * { font-family: Arial, Tahoma, 'Lucida Sans', sans-serif !important; } body.a11y-highlight-links a { text-decoration: underline !important; font-weight: 700 !important; outline: 2px solid var(--gold) !important; outline-offset: 2px !important; } body.a11y-highlight-focus :focus-visible { outline: 4px solid #0050ff !important; outline-offset: 4px !important; box-shadow: 0 0 0 8px rgba(0,80,255,.25) !important; } body.a11y-stop-motion *, body.a11y-stop-motion *::before, body.a11y-stop-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Text size — on so rem units scale correctly */ html.a11y-text-sm { font-size: 14px !important; } html.a11y-text-lg { font-size: 19px !important; } html.a11y-text-xl { font-size: 22px !important; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } body { font-family: 'Assistant', sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; overflow-x: hidden; } .container { width: 90%; max-width: var(--max-w); margin: 0 auto; } /* ── Accessibility base ── */ .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; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--navy); color: #fff; padding: .75rem 1.5rem; z-index: 9999; font-weight: 700; text-decoration: none; transition: top .2s; border-radius: 0 0 4px 0; } .skip-link:focus { top: 0; } /* ── Type ── */ h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; color: var(--navy); } h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.2; color: var(--navy); margin-bottom: 1.4rem; } h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: .7rem; } .gold-text { color: var(--gold); } .eyebrow { display: inline-block; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: .75rem; } /* ── Sections ── */ .section { position: relative; padding: 7rem 0; } /* Section transitions — only bg-alt manages the fade. bg-alt starts & ends at white so it blends seamlessly with adjacent white sections. bg-white is pure white — no gradient needed, so no hard line at boundaries. */ .section.bg-white { background: var(--bg); } .section.bg-alt { background: linear-gradient( to bottom, var(--bg) 0%, var(--bg-alt) 10%, var(--bg-alt) 90%, var(--bg) 100% ); } .section-heading { max-width: 680px; margin-bottom: 3.5rem; } .section-heading.centered { text-align: center; margin-left: auto; margin-right: auto; } .section-heading > p:last-of-type { color: var(--muted); font-size: 1.05rem; margin-top: .9rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 2.2rem; font-size: 1rem; font-weight: 700; font-family: inherit; text-decoration: none; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: var(--trans); } .btn-navy { background: var(--navy); color: #fff; box-shadow: 0 4px 20px rgba(15,32,68,.2); } .btn-navy:hover { background: var(--navy-lt); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-outline { background: transparent; color: var(--navy); border-color: var(--border); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-block { width: 100%; } /* ── 404 Error page ── */ .content-page { padding-top: 8rem; } .error-card { max-width: 640px; margin: 3rem auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 3.5rem 2.5rem; text-align: center; box-shadow: var(--shadow); } .error-card img { width: 170px; height: 170px; object-fit: cover; border-radius: 50%; margin: 0 auto 1.75rem; border: 3px solid var(--gold-dim); } .error-card h1 { font-size: 2.1rem; margin-bottom: .6rem; } .error-card > p { color: var(--muted); font-size: 1rem; margin-bottom: 2rem; line-height: 1.7; } .error-card-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── Header ── */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transition: border-color var(--trans), box-shadow var(--trans); } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; } .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .brand img { height: 48px; width: auto; } .brand-name { font-size: 1.5rem; font-weight: 700; color: var(--navy); white-space: nowrap; letter-spacing: -.02em; line-height: 1; } .brand-name-adv { color: var(--gold); } .main-nav { display: flex; align-items: center; gap: 1.8rem; } .main-nav a { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--muted); transition: color var(--trans); position: relative; padding: .3rem 0; } .main-nav a::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 2px; background: var(--gold); transition: width var(--trans); } .main-nav a:not(.nav-cta):hover, .main-nav a.active { color: var(--navy); } .main-nav a:not(.nav-cta):hover::after, .main-nav a.active::after { width: 100%; } .main-nav .nav-cta { background: var(--navy); color: #fff; padding: .55rem 1.4rem; border-radius: 4px; font-weight: 700; } .main-nav .nav-cta::after { display: none; } .main-nav .nav-cta:hover { background: var(--navy-lt); color: #fff; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 910; } .hamburger span { display: block; width: 26px; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--trans); } .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ── Hero ── */ .hero-section { position: relative; background: var(--bg); padding-top: 5rem; /* header height */ overflow: hidden; min-height: 100vh; display: flex; align-items: center; } /* Statue — right side, diagonal fade bottom-right → top-left, painterly gray */ .hero-statue-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* אפקט שמש — כאילו צולמו הפנים מול השמש, הבהרה חזקה מהפינה הימנית */ .hero-statue-bg::after { content: ''; position: absolute; top: -20%; right: -10%; width: 88%; height: 90%; background: radial-gradient( ellipse at 92% 4%, rgba(255,255,255,1) 14%, rgba(255,255,255,.96) 26%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.28) 58%, rgba(255,255,255,.06) 72%, transparent 84% ); pointer-events: none; z-index: 2; } .hero-statue-bg img { position: absolute; right: 7%; left: auto; top: 62%; transform: translateY(-50%); height: 110%; width: auto; /* יותר ברקע: blur גדול יותר, contrast נמוך, opacity נמוך */ filter: grayscale(1) contrast(0.70) brightness(1.12) blur(0.8px); opacity: .42; /* מסכה: fade שמאלי + עליון עדין — ה"שמש" מטפלת בהסתרת הראש */ -webkit-mask-image: linear-gradient(to left, black 18%, rgba(0,0,0,.5) 52%, transparent 76%), linear-gradient(to bottom, transparent 0%, black 28%, black 92%, transparent 100%); mask-image: linear-gradient(to left, black 18%, rgba(0,0,0,.5) 52%, transparent 76%), linear-gradient(to bottom, transparent 0%, black 46%, black 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; mix-blend-mode: multiply; } /* Subtle dot-grid — ties hero visually to world map section */ .hero-dot-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(184,150,62,.18) 1px, transparent 1px); background-size: 52px 52px; pointer-events: none; } /* ── Hero two-panel layout ── In RTL flex-row: first DOM child → physical RIGHT, second → physical LEFT Brand block (right, on statue) comes first in DOM; text block (left) comes second. */ .hero-layout { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 8rem 0 5rem; } /* RIGHT panel — block flow, RTL aligns everything naturally to the right */ .hero-brand-block { flex: 1 1 auto; } .hero-brand-block h1 { font-size: 4.4rem; white-space: nowrap; margin-top: .3rem; margin-bottom: 0; } .hero-sub { font-size: 1.05rem; color: var(--muted); font-weight: 400; margin: .7rem 0 0; border-right: 3px solid var(--gold); padding-right: 1.2rem; line-height: 1.7; white-space: nowrap; } /* CTA — מחוץ לשני הבלוקים, ממורכז באמצע ה-container = אמצע העמוד */ .hero-cta { display: block; width: fit-content; margin: 0.75rem auto 0; position: relative; z-index: 2; } /* LEFT panel — logo only, pushed toward center */ .hero-text-block { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-start; /* RTL: flex-start = physical right = כלפי אמצע העמוד */ } .hero-logo { height: 200px; width: auto; } /* ── About ── */ .about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: center; } .about-photo { position: relative; } .about-photo img { border-radius: 8px; box-shadow: var(--shadow); position: relative; z-index: 1; } .about-photo::before { content: ''; position: absolute; top: -14px; right: -14px; bottom: 14px; left: 14px; border: 2px solid var(--gold); opacity: .3; border-radius: 8px; z-index: 0; } .about-content p { color: var(--muted); margin-bottom: 1.1rem; font-size: 1.02rem; } .credentials-row { display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; } .credential { display: flex; flex-direction: column; border-right: 3px solid var(--gold); padding-right: 1rem; } .credential strong { font-size: 1rem; color: var(--navy); font-weight: 700; } .credential span { font-size: .82rem; color: var(--muted); } /* ── Approach ── */ .approach-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; } .approach-card { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-top: 3px solid transparent; padding: 2rem 1.6rem; border-radius: 8px; transition: border-top-color var(--trans), transform var(--trans), box-shadow var(--trans); } .approach-card:hover { border-top-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); } .approach-num { font-size: 3.5rem; font-weight: 800; color: var(--gold); opacity: .1; position: absolute; top: .5rem; left: 1rem; line-height: 1; } .approach-card h3 { margin-top: 1rem; } .approach-card p { color: var(--muted); font-size: .93rem; line-height: 1.65; } /* ── Approach — animated diagonal stripe background ── */ .approach-section { overflow: hidden; } .approach-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .approach-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; } .approach-section > .container { position: relative; z-index: 1; } /* ── Services Overview ── */ .svc-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .svc-row:last-child { margin-bottom: 0; } .svc-row .svc-card { flex: 1 1 calc(33.333% - 1rem); min-width: 240px; } .svc-row-center { justify-content: center; } .svc-row-center .svc-card { flex: 0 0 calc(33.333% - 1rem); } .svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--line); border-right: 3px solid transparent; padding: 2rem; border-radius: 8px; text-decoration: none; transition: border-right-color var(--trans), transform var(--trans), box-shadow var(--trans); } .svc-card:hover { border-right-color: var(--gold); transform: translateX(-4px); box-shadow: var(--shadow); } .svc-num { position: absolute; top: .5rem; left: 1rem; font-size: 3rem; font-weight: 800; color: var(--gold); opacity: .1; line-height: 1; } .svc-card h3 { color: var(--navy); margin-bottom: .5rem; } .svc-card p { color: var(--muted); font-size: .9rem; flex: 1; } .svc-arr { color: var(--gold); font-weight: 700; margin-top: 1.5rem; font-size: .95rem; } /* ── Detail sections ── */ .detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 5rem; align-items: start; } .detail-num { display: block; font-size: 5rem; font-weight: 800; color: var(--gold); opacity: .12; line-height: 1; margin-bottom: .5rem; } .detail-content > p { color: var(--muted); font-size: 1.02rem; margin-bottom: 1.1rem; } .detail-list { list-style: none; margin-top: 1.5rem; } .detail-list li { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 1rem; } .detail-list li::before { content: '✦'; color: var(--gold); font-size: .65rem; flex-shrink: 0; margin-top: .35rem; } .detail-list li:last-child { border-bottom: none; } /* ── Two-column variant ── */ .detail-list.two-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } .detail-list.two-col li:nth-last-child(-n+2) { border-bottom: none; } .detail-list.two-col li:last-child:nth-child(odd) { grid-column: 1 / -1; } .detail-list.two-col li:nth-last-child(3):nth-child(odd) { border-bottom: none; } .info-card { background: var(--bg-alt); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 2rem; border-radius: 8px; position: sticky; top: 7rem; } .info-card h3 { color: var(--navy); margin-bottom: .75rem; } .info-card > p { color: var(--muted); font-size: .93rem; margin-top: .5rem; } .info-card ul { list-style: none; } .info-card li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9rem; } .info-card li::before { content: '◆'; color: var(--gold); font-size: .5rem; } .info-card li:last-child { border-bottom: none; } .map-label { font-style: italic; color: var(--dim); font-size: .88rem; margin-top: .5rem; } /* ── World Map section ── */ /* Light background — matches site's bg-alt, canvas renders subtly behind content */ .world-map-section { position: relative; overflow: hidden; } .world-map-wrap { /* Shifted left and lower — fills the empty left/bottom space */ position: absolute; top: 68%; left: 32%; transform: translate(-50%, -50%); width: 112%; max-width: 1280px; aspect-ratio: 2 / 1; z-index: 0; pointer-events: none; opacity: 0.38; /* Aggressive fade on all four edges */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%), linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .world-map-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* ── Contact ── */ .contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; } .contact-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; } .contact-card { display: flex; flex-direction: column; gap: .25rem; background: var(--bg-card); border: 1px solid var(--line); padding: 1.4rem; border-radius: 8px; text-decoration: none; transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans); } .contact-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); } .cc-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-alt); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; } .cc-icon--wa { background: #dcf8c6; color: #128c7e; } .cc-icon--mail { background: #ffefd5; color: var(--gold); } .cc-label { font-size: .78rem; color: var(--muted); font-weight: 600; } .contact-card strong { font-size: 1.1rem; color: var(--navy); direction: ltr; text-align: right; } .office-address { grid-column: 1 / -1; font-style: normal; color: var(--muted); font-size: .93rem; border-right: 3px solid var(--gold); padding-right: 1rem; display: flex; align-items: center; gap: .4rem; } .contact-map { display: flex; flex-direction: column; gap: 1rem; } .contact-map iframe { width: 100%; height: 340px; border: 0; border-radius: 8px; box-shadow: var(--shadow); } /* ── Footer ── */ .site-footer { background: var(--navy); border-top: 3px solid var(--gold); padding: 2rem 0; color: rgba(255,255,255,.55); position: relative; overflow: visible; } /* חתול איסטר אג — יושב על קו הזכויות */ .footer-cat { position: absolute; bottom: calc(100% - 42px); right: 3rem; width: 96px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); pointer-events: none; user-select: none; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .88rem; } .site-footer nav { display: flex; gap: 2rem; } .site-footer nav a { color: rgba(255,255,255,.55); text-decoration: none; transition: color var(--trans); } .site-footer nav a:hover { color: var(--gold); } .footer-switch { text-align: center; padding: .5rem 0 0; font-size: .72rem; letter-spacing: .02em; color: rgba(255,255,255,.55); } .footer-switch a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .25s; } .footer-switch a:hover { color: var(--gold); } .footer-switch .fs-sep { margin: 0 .55rem; } /* ── Accessibility FAB & Panel ── */ .a11y-fab { position: fixed; bottom: 1.75rem; left: 1.75rem; z-index: 9500; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border: 2px solid rgba(184,150,62,.6); cursor: grab; user-select: none; touch-action: none; box-shadow: 0 4px 18px rgba(15,32,68,.28); transition: background var(--trans), box-shadow var(--trans), transform var(--trans); } .a11y-fab-icon { width: 28px; height: 28px; object-fit: contain; filter: invert(1); /* שחור → לבן על הרקע הנייבי */ } .a11y-fab:hover { background: var(--navy-lt); transform: scale(1.08); } .a11y-fab.dragging { cursor: grabbing; transform: scale(1.12); box-shadow: var(--shadow-lg); } .a11y-panel { position: fixed; bottom: 5rem; left: 1.75rem; width: 290px; max-height: 82vh; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 9400; display: flex; flex-direction: column; } .a11y-panel[hidden] { display: none; } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; } .a11y-panel-header h2 { font-size: 1rem; color: var(--navy); margin: 0; } .a11y-close { background: none; border: none; cursor: pointer; font-size: 1.4rem; color: var(--muted); line-height: 1; padding: 0 .25rem; transition: color var(--trans); } .a11y-close:hover { color: var(--navy); } .a11y-group { padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); } .a11y-group-title { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); margin-bottom: .6rem; } .a11y-size-row { display: flex; gap: .5rem; } .a11y-size-btn { flex: 1; padding: .55rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-alt); font-family: inherit; color: var(--navy); cursor: pointer; font-weight: 700; transition: var(--trans); } .a11y-size-btn:hover, .a11y-size-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); } .a11y-size-mid { font-size: 1rem; } .a11y-toggle { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: right; background: none; border: 1px solid var(--line); padding: .6rem .9rem; border-radius: 6px; color: var(--text); font-family: inherit; font-size: .9rem; cursor: pointer; margin-bottom: .4rem; transition: var(--trans); } .a11y-toggle:last-child { margin-bottom: 0; } .a11y-toggle:hover { border-color: var(--gold); background: var(--gold-dim); } .a11y-toggle.active { border-color: var(--navy); background: rgba(15,32,68,.06); font-weight: 600; } .a11y-check { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: var(--trans); } .a11y-toggle.active .a11y-check { background: var(--navy); border-color: var(--navy); } .a11y-toggle.active .a11y-check::after { content: '✓'; color: #fff; font-size: .68rem; font-weight: 700; } .a11y-panel-footer { padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); } .a11y-reset { width: 100%; padding: .65rem; background: #fff2f2; border: 1px solid #fca5a5; color: #b91c1c; font-weight: 700; font-family: inherit; border-radius: 6px; cursor: pointer; transition: var(--trans); } .a11y-reset:hover { background: #ef4444; color: #fff; } .a11y-law-note { padding: .75rem 1.25rem; font-size: .75rem; color: var(--dim); text-align: center; } .a11y-law-note a { color: var(--gold); } /* Reading guide */ .a11y-reading-guide { position: fixed; left: 0; right: 0; height: 24px; background: rgba(255,220,50,.22); border-top: 1px solid rgba(200,160,0,.35); border-bottom: 1px solid rgba(200,160,0,.35); pointer-events: none; z-index: 8999; display: none; } /* ── Scroll animations ── */ [data-animate] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } [data-animate].visible { opacity: 1; transform: none; } /* ── Responsive ── */ @media (max-width: 1100px) { h1 { font-size: 2.7rem; } .approach-grid { grid-template-columns: repeat(2,1fr); } .about-grid, .detail-grid, .contact-layout { gap: 3rem; } } @media (max-width: 768px) { .section { padding: 4.5rem 0; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } .hamburger { display: flex; } .brand-name { display: none; } .main-nav { position: fixed; inset: 0; background: #fff; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; transform: translateX(100%); transition: transform .3s var(--ease); z-index: 905; } .main-nav.open { transform: translateX(0); } .main-nav a { font-size: 1.2rem; color: var(--navy); } .hero-layout { flex-direction: column-reverse; align-items: flex-start; padding: 6rem 0 4rem; gap: 1.5rem; } .hero-brand-block { width: 100%; } .hero-brand-block h1 { white-space: normal; font-size: 2.4rem; } .hero-sub { white-space: normal; font-size: 1rem; } .hero-logo { height: 100px; } .hero-logo { height: 72px; } .hero-text-block { width: 100%; justify-content: flex-start; } .about-grid { grid-template-columns: 1fr; } .about-photo { max-width: 300px; margin: 0 auto; } .approach-grid { grid-template-columns: 1fr; } .svc-row { flex-direction: column; } .svc-row-center { justify-content: stretch; } .svc-row-center .svc-card { flex: 1 1 100%; } .detail-grid { grid-template-columns: 1fr; gap: 2.5rem; } .detail-side .info-card { position: static; } .contact-layout { grid-template-columns: 1fr; } .credentials-row { flex-direction: column; gap: 1rem; } .footer-inner { flex-direction: column; text-align: center; } .a11y-fab { bottom: 1rem; left: 1rem; width: 46px; height: 46px; } .a11y-panel { left: 1rem; right: 1rem; width: auto; bottom: 4rem; } } @media (max-width: 480px) { .contact-cards { grid-template-columns: 1fr; } }