:root {
      --parchment: #f2eee5; --paper: #fbf9f4; --stone: #ded6c8; --ink: #17201e;
      --green: #173e35; --brass: #8a744f; --muted: #625f55; --rule: #c7bfae;
      --serif: "castoro", Georgia, serif; --sans: "museo-sans", "avenir-next-lt-pro", sans-serif;
      --gutter: clamp(22px, 5vw, 76px); --max: 1360px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--parchment); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    a:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
    .wrap { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); margin-inline: auto; }
    .label { display: inline-block; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .11em; line-height: 1.5; text-transform: uppercase; }

    .site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 118px; background: rgba(251, 249, 244, .94); border-bottom: 1px solid rgba(23, 32, 30, .16); backdrop-filter: blur(8px); }
    .header-inner { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); max-width: var(--max); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .brand { width: clamp(218px, 18vw, 300px); }
    .brand img { width: 100%; transform: translate(-5px, 8px); }
    .site-nav { min-width: 0; display: flex; align-items: center; }
    .header-call { display: inline-flex; min-height: 54px; align-items: center; gap: 16px; padding: 0 20px 0 23px; border: 1px solid var(--green); background: var(--green); color: var(--paper); text-decoration: none; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
    .header-call-label { color: #d5c8aa; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .header-call-number { padding-left: 16px; border-left: 1px solid rgba(251, 249, 244, .35); font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1; }
    .header-call-arrow { font-family: var(--serif); font-size: 18px; line-height: 1; transition: transform .25s ease; }
    .header-call:hover { background: transparent; color: var(--green); transform: translateY(-2px); }
    .header-call:hover .header-call-label { color: var(--brass); }
    .header-call:hover .header-call-number { border-left-color: var(--rule); }
    .header-call:hover .header-call-arrow { transform: translateX(3px); }
    .text-link::after { position: absolute; content: ""; right: 0; bottom: 0; left: 0; height: 1px; background: var(--brass); transform: scaleX(.24); transform-origin: left; transition: transform .3s ease; }
    .text-link:hover::after { transform: scaleX(1); }

    .hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
    .hero-image { position: absolute; z-index: -3; top: 0; bottom: 0; left: -6%; width: 106%; height: 100%; max-width: none; object-fit: cover; object-position: center; transform: translate3d(0, var(--hero-shift, 0), 0) scale(1.018); filter: saturate(.96) contrast(1.01); will-change: transform; }
    .hero::before { position: absolute; z-index: -2; content: ""; inset: 0; background: linear-gradient(90deg, rgba(242, 238, 229, .90) 0%, rgba(242, 238, 229, .87) 28%, rgba(242, 238, 229, .52) 49%, rgba(242, 238, 229, .02) 72%); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 32%, transparent 65%); mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 32%, transparent 65%); }
    .hero::after { position: absolute; z-index: -1; content: ""; inset: 0; background: linear-gradient(0deg, rgba(23, 32, 30, .14), transparent 25%); pointer-events: none; }
    .hero-inner { min-height: calc(100svh - 138px); display: flex; align-items: center; padding-top: 118px; padding-bottom: 0; }
    .hero-copy { width: min(49vw, 680px); margin-top: -50px; }
    .hero-copy .label { position: relative; top: -5px; margin-bottom: 35px; }
    .hero-copy .label::after { display: block; width: 44px; height: 2px; margin-top: 18px; background: var(--brass); content: ""; }
    h1, h2, h3, .display { font-family: var(--serif); font-weight: 400; }
    h1 { margin: 0; color: var(--ink); font-size: clamp(58px, 7.05vw, 118px); letter-spacing: -.048em; line-height: .90; }
    .hero-intro { max-width: 46ch; margin: 24px 0 0; color: #4f514a; font-family: var(--serif); font-size: clamp(18px, 1.55vw, 23px); line-height: 1.52; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 28px; }
    .hero-cta { min-height: 76px; display: grid; grid-template: "kicker arrow" auto "value arrow" auto / 1fr auto; align-content: center; column-gap: 24px; padding: 13px 20px 13px 22px; border: 1px solid var(--paper); text-decoration: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
    .hero-cta-primary { flex: 0 1 302px; background: var(--paper); color: var(--green); }
    .hero-cta-secondary { flex: 0 1 234px; background: rgba(251, 249, 244, .035); color: var(--paper); }
    .hero-cta-kicker { grid-area: kicker; align-self: end; font-size: 11px; font-weight: 700; letter-spacing: .11em; line-height: 1.3; opacity: .78; text-transform: uppercase; }
    .hero-cta-value { grid-area: value; align-self: start; margin-top: 3px; font-size: 15px; font-weight: 700; letter-spacing: .035em; line-height: 1.2; }
    .hero-cta-arrow { grid-area: arrow; align-self: center; font-family: var(--serif); font-size: 20px; line-height: 1; transition: transform .25s ease; }
    .hero-cta:hover { transform: translateY(-2px); }
    .hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }
    .hero-cta-primary:hover { background: transparent; color: var(--paper); }
    .hero-cta-secondary:hover { background: var(--paper); color: var(--green); }
    .text-link { position: relative; padding-block: 9px; color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: .045em; text-decoration: none; }
    .pillars-ribbon { position: absolute; right: 0; bottom: 0; left: 0; min-height: 138px; background: rgba(251, 249, 244, .96); border-top: 1px solid var(--brass); backdrop-filter: blur(10px); }
    .pillars-inner { width: 87.44%; max-width: none; min-height: 138px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
    .pillar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 17px 22px; text-align: center; transform: translateY(-13px); }
    .pillar + .pillar::before { position: absolute; top: 38px; bottom: 25px; left: 0; width: 1px; background: var(--rule); content: ""; }
    .pillar small { margin-bottom: 10px; color: var(--brass); font-family: var(--serif); font-size: 38px; line-height: 1; }
    .pillar strong { color: var(--green); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

    .human { position: relative; overflow: hidden; padding-block: clamp(88px, 11vw, 164px); background: var(--paper); }
    .human::after { position: absolute; z-index: 0; content: ""; width: min(34vw, 470px); aspect-ratio: 388 / 404; right: clamp(-110px, -4vw, -40px); top: 50%; background: url("../images/fahri-jacob-icon.svg") center / contain no-repeat; opacity: .045; transform: translateY(-50%); pointer-events: none; }
    .human-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr); align-items: center; gap: clamp(54px, 10vw, 160px); }
    .portrait-wrap { position: relative; }
    .portrait-wrap::before { position: absolute; z-index: 1; content: ""; width: 30%; height: 1px; right: -15%; top: 14%; background: var(--brass); }
    .portrait-wrap img { width: 100%; aspect-ratio: .82; object-fit: cover; object-position: center 44%; filter: saturate(.78) contrast(.98); }
    .human-copy { max-width: 650px; }
    .human-copy .label { margin-bottom: 24px; }
    h2 { margin: 0; color: var(--green); font-size: clamp(46px, 5.2vw, 78px); letter-spacing: -.04em; line-height: 1.06; }
    .lead { max-width: 49ch; margin: 28px 0 0; color: var(--muted); font-family: var(--serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.6; }
    .human-note { max-width: 48ch; margin: 30px 0 0; padding-left: 22px; border-left: 1px solid var(--brass); color: var(--muted); font-size: 14px; }
    .section-cta { display: inline-flex; min-width: 294px; min-height: 62px; align-items: center; justify-content: space-between; gap: 26px; margin-top: 28px; padding: 14px 20px 13px 22px; border: 1px solid var(--green); background: var(--green); color: var(--paper); font-size: 14px; font-weight: 700; letter-spacing: .045em; text-decoration: none; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
    .section-cta::after { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1; content: "→"; transition: transform .25s ease; }
    .section-cta:hover { background: transparent; color: var(--green); transform: translateY(-2px); }
    .section-cta:hover::after { transform: translateX(4px); }

    .services { padding-block: clamp(92px, 10vw, 154px); background: var(--parchment); }
    .services-head { width: 52%; max-width: 720px; margin-bottom: clamp(52px, 6.5vw, 88px); }
    .services-head h2 { max-width: none; }
    .services-head .lead { max-width: 46ch; margin-top: 24px; }
    .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px); }
    .service-card { position: relative; min-width: 0; overflow: hidden; background: var(--paper); border: 1px solid rgba(138, 116, 79, .26); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
    .service-card:hover { transform: translateY(-7px); border-color: rgba(138, 116, 79, .62); box-shadow: 0 24px 48px rgba(23, 32, 30, .10); }
    .service-card-media { overflow: hidden; background: var(--stone); }
    .service-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.78) contrast(.98); transition: transform .7s cubic-bezier(.2,.65,.25,1), filter .35s ease; }
    .service-card:hover img { transform: scale(1.035); filter: saturate(.9) contrast(1); }
    .service-card-body { min-height: 196px; display: flex; flex-direction: column; padding: clamp(24px, 2.3vw, 34px); }
    .service-card h3 { margin: 0; color: var(--green); font-size: clamp(27px, 2.1vw, 34px); line-height: 1.12; }
    .service-card p { max-width: 31ch; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
    .service-card-rule { width: 42px; height: 2px; margin-top: auto; padding-top: 26px; border-bottom: 2px solid var(--brass); }

    .values { position: relative; overflow: hidden; padding-block: clamp(90px, 11vw, 160px); background: var(--green); color: var(--paper); }
    .values::before { position: absolute; content: ""; width: min(46vw, 650px); aspect-ratio: 1; right: -9%; bottom: -38%; background: url("../images/fahri-jacob-icon.svg") center / contain no-repeat; filter: invert(100%); opacity: .035; }
    .values-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 10vw, 160px); align-items: start; }
    .values-mark { display: flex; align-items: flex-start; gap: 25px; }
    .values-mark img { width: clamp(76px, 8vw, 114px); filter: invert(96%) sepia(7%) saturate(274%) hue-rotate(346deg) brightness(103%); }
    .values-mark p { max-width: 22ch; margin: 3px 0 0; color: var(--stone); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.6; text-transform: uppercase; }
    .values h2 { max-width: 12ch; color: var(--paper); }
    .value-line { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(62px, 8vw, 112px); border-top: 1px solid rgba(251, 249, 244, .3); }
    .value { min-height: 218px; padding: 27px 24px 12px 0; }
    .value + .value { padding-left: 24px; border-left: 1px solid rgba(251, 249, 244, .3); }
    .value small { display: block; color: #c9b68e; font-family: var(--serif); }
    .value h3 { margin: 38px 0 12px; color: var(--paper); font-size: 28px; }
    .value p { max-width: 25ch; margin: 0; color: var(--stone); font-size: 14px; }

    .contact { position: relative; padding-block: clamp(88px, 10vw, 145px); background: var(--paper); overflow: hidden; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(64px, 11vw, 175px); }
    .contact .label { margin-bottom: 22px; }
    .contact h2 { max-width: 12ch; }
    .contact-intro { max-width: 40ch; margin: 24px 0 0; color: var(--muted); font-family: var(--serif); font-size: 19px; }
    .contact-details { margin: 0; border-top: 1px solid var(--brass); }
    .contact-row { display: grid; grid-template-columns: 106px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
    .contact-row dt { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .contact-row dd { margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(18px, 1.65vw, 24px); line-height: 1.45; }
    .contact-row a { text-decoration-color: var(--rule); text-underline-offset: 5px; transition: text-decoration-color .2s ease; }
    .contact-row a:hover { text-decoration-color: var(--brass); }
    footer { padding-block: 33px; border-top: 1px solid var(--rule); background: var(--paper); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .footer-inner img { width: 180px; }
    .footer-inner p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

    .hero-copy > * { animation: arrive .85s both; }
    .hero-copy > :nth-child(2) { animation-delay: .08s; }
    .hero-copy > :nth-child(3) { animation-delay: .16s; }
    .hero-copy > :nth-child(4) { animation-delay: .24s; }
    @keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @supports (animation-timeline: view()) {
      .view-reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 12% cover 32%; }
      @keyframes reveal { from { opacity: .18; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
    }

    @media (max-width: 940px) {
      .hero::before { background: linear-gradient(90deg, rgba(242, 238, 229, .99) 0%, rgba(242, 238, 229, .93) 54%, rgba(242, 238, 229, .24) 88%); backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
      .hero-copy { width: min(68vw, 620px); }
      .human-grid { grid-template-columns: .85fr 1.15fr; gap: 50px; }
      .values-top, .contact-grid { grid-template-columns: 1fr; }
      .values-top { gap: 38px; }
      .services-head { width: 72%; }
      .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .value-line { grid-template-columns: repeat(2, 1fr); }
      .value:nth-child(3) { border-left: 0; border-top: 1px solid rgba(251, 249, 244, .3); }
      .value:nth-child(4) { border-top: 1px solid rgba(251, 249, 244, .3); }
    }
    @media (min-width: 941px) {
      .site-nav { width: auto; transform: translateY(2px); }
      .hero::before {
        background: var(--green);
        backdrop-filter: none;
        -webkit-mask-image: none;
        mask-image: none;
        clip-path: polygon(0 0, 46% 0, 60% 100%, 0 100%);
      }
      .hero::after {
        background: var(--brass);
        clip-path: polygon(46% 0, calc(46% + 2px) 0, calc(60% + 2px) 100%, 60% 100%);
        opacity: .82;
      }
      .hero h1 { color: var(--paper); }
      .hero-copy .label { color: #d3c29c; }
      .hero-copy .label::after { background: #c9b68e; }
      .hero-intro { color: #ded8ca; }
    }
    @media (max-width: 700px) {
      .site-header { height: 84px; }
      .header-inner { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); margin-inline: auto; gap: 12px; }
      .brand { flex: 0 0 178px; width: 178px; }
      .brand img { transform: none; }
      .site-nav { min-width: 0; margin-left: auto; gap: 0; }
      .header-call { min-height: 48px; gap: 10px; padding-inline: 15px; }
      .header-call-label { display: none; }
      .header-call-number { padding-left: 0; border-left: 0; font-size: 12px; letter-spacing: .02em; }
      .header-call-arrow { font-size: 16px; }
      .hero { min-height: 900px; }
      .hero-image { inset: 0; width: 100%; height: 100%; object-position: 67% center; }
      .hero::before { background: linear-gradient(180deg, rgba(242, 238, 229, .98) 0%, rgba(242, 238, 229, .96) 48%, rgba(242, 238, 229, .48) 69%, rgba(23, 32, 30, .16) 100%); }
      .hero-inner { min-height: 775px; align-items: flex-start; padding-top: 146px; padding-bottom: 54px; }
      .hero-copy { width: 100%; margin-top: 0; }
      h1 { max-width: 8ch; font-size: clamp(52px, 15.3vw, 70px); }
      .hero-intro { max-width: 32ch; margin-top: 22px; font-size: 18px; }
      .hero-actions { gap: 9px; margin-top: 26px; }
      .hero-cta { min-height: 62px; flex: 1 1 100%; padding: 10px 17px; }
      .hero-cta-secondary { background: rgba(23, 62, 53, .92); color: var(--paper); border-color: var(--green); }
      .pillars-ribbon { min-height: 125px; }
      .pillars-inner { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); min-height: 125px; grid-template-columns: repeat(4, 1fr); }
      .pillar { padding: 17px 7px; transform: none; }
      .pillar small { font-size: 22px; }
      .pillar strong { font-size: 11px; letter-spacing: .01em; }
      .human-grid { grid-template-columns: 1fr; }
      .human::after { width: 78vw; right: -31vw; top: 73%; opacity: .035; }
      .portrait-wrap { width: calc(100% - 38px); }
      .portrait-wrap::before { width: 46%; right: -46px; }
      .portrait-wrap img { aspect-ratio: .9; object-position: center 39%; }
      .services-head { width: 100%; margin-bottom: 42px; }
      .service-grid { grid-template-columns: 1fr; gap: 22px; }
      .service-card-body { min-height: 0; }
      .value-line { grid-template-columns: 1fr; }
      .value { min-height: 0; padding: 26px 0; }
      .value + .value { padding-left: 0; border-left: 0; border-top: 1px solid rgba(251, 249, 244, .3); }
      .value h3 { margin: 22px 0 8px; }
      .values-mark img { width: 72px; }
      .contact-row { grid-template-columns: 1fr; gap: 6px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .hero-image { transform: none !important; }
    }