/* ============================================================ A. M. Developers (India) Pvt Ltd Design system: Meiseki. Palette sampled directly from the deck's PDF content streams, not eyeballed — deep forest ground, paper-grey light sections, white hairline cards, sage accent. Square corners throughout, serif display over humanist sans, wide-tracked uppercase eyebrows. Motion is GSAP's job (js/motion.js), not this file's. Every tween there is a gsap.from(), so what is written here is the resting, finished state — which is also exactly what a visitor sees if the CDN fails, JS is off, or reduced motion is asked for. The only motion rule below is the FOUC guard. ============================================================ */ :root{ /* ---- Meiseki swatches ---- */ --forest-900: #16382C; /* deep ground, primary ink on paper */ --forest-800: #1B4334; /* raised green panel */ --forest-600: #2F5445; /* hairlines on dark */ --sage: #8FA396; /* eyebrows, numerals, accent */ --sage-200: #C9D5CD; --sage-100: #DCE5E0; --sage-50: #E4EBE7; --paper: #EFEFEE; /* light page ground */ --paper-soft: #F7F7F6; --white: #FFFFFF; /* cards on paper */ --ink: #1B1B18; /* card headings on light */ --body: #6B6B64; /* body copy on light */ --muted: #A9A9A2; /* captions, folios */ --border-light: #D6D6D1; --border-dark: #2F5445; /* ---- type ---- */ /* Spectral and Lato stand in for the deck's licensed faces; swap --font-display / --font-body if you licence the originals. */ --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-body: "Lato", "Helvetica Neue", Arial, sans-serif; --fs-display: clamp(2.75rem, 2.0714rem + 3.3929vw, 5.125rem); --fs-h2: clamp(2rem, 1.7143rem + 1.4286vw, 3rem); --fs-h4: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem); --fs-h5: clamp(1.25rem, 1.1071rem + 0.7143vw, 1.75rem); --fs-h6: clamp(1.0625rem,0.9911rem + 0.3571vw, 1.3125rem); --fs-subheading: clamp(1.0625rem,1.0089rem + 0.2679vw, 1.25rem); --fs-large: clamp(1rem, 0.9821rem + 0.0893vw, 1.0625rem); --fs-main: 1rem; --fs-eyebrow: .6875rem; --lh-small: 1.1; --lh-medium: 1.22; --lh-large: 1.35; --lh-huge: 1.62; --ls-tight: -.01em; --ls-label: .16em; /* ---- space ---- */ --sec-main: clamp(5.25rem, 4.6071rem + 3.2143vw, 7.5rem); --sec-large: clamp(5.25rem, 3.8929rem + 6.7857vw, 10rem); --page-top: clamp(5rem, 2.8571rem + 10.7143vw, 12.5rem); /* Meiseki is square. These stay as tokens so every rule that references them flattens at once. */ --radius-small: 0; --radius-main: 0; --radius-round: 0; --max-width: 78rem; --gut: clamp(1.25rem, 4vw, 2.5rem); --nav-height: 4.5rem; --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; /* No scroll-behavior:smooth — Lenis drives scrolling and the two fight. Anchor links are handed to lenis.scrollTo() in js/motion.js. */ scroll-padding-top:calc(var(--nav-height) + 1.5rem); } body{ margin:0; background:var(--forest-900); color:var(--paper); font-family:var(--font-body); font-size:var(--fs-main); line-height:var(--lh-huge); font-weight:400; -webkit-font-smoothing:antialiased; /* `clip`, not `hidden`: `hidden` would make a scroll container, which breaks ScrollTrigger's measurements and any sticky child. */ overflow-x:clip; } /* --- Lenis --- */ html.lenis, html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; } .lenis.lenis-stopped{ overflow:hidden; } .lenis.lenis-smooth iframe{ pointer-events:none; } /* --- FOUC guard --- Anything with a load animation is hidden until GSAP has set its opening state. Both the engine and a 2.5s inline failsafe in the document head add .anim-ready, so this can never strand content. */ html.js [data-anim-load]{ visibility:hidden; } html.anim-ready [data-anim-load]{ visibility:visible; } .wrap{ width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:var(--gut); } .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--sage-200); color:var(--forest-900); padding:.75rem 1.25rem; font-size:.875rem; } .skip:focus{ left:.5rem; top:.5rem; } :focus-visible{ outline:2px solid var(--sage); outline-offset:3px; } /* ------------------------------ type ------------------------------ */ .display{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-display); line-height:var(--lh-small); letter-spacing:var(--ls-tight); margin:0 0 1rem; } .h2{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:var(--lh-medium); letter-spacing:var(--ls-tight); margin:0 0 1.25rem; } /* Wide-tracked caps. */ .eyebrow{ display:block; font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage); margin:0 0 1.5rem; line-height:1; } .section-label{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage); margin:0 0 1.25rem; } .prose p{ margin:0 0 1.15rem; max-width:64ch; } .prose p:last-child{ margin-bottom:0; } .link{ color:var(--sage-200); text-decoration:none; border-bottom:1px solid var(--border-dark); padding-bottom:2px; transition:border-color .25s var(--ease), color .25s var(--ease); } .link:hover{ border-bottom-color:var(--sage-200); color:var(--white); } .rule{ display:block; width:100%; height:1px; background:var(--border-dark); transform-origin:0 50%; } .ticker .rule{ background:var(--border-light); } /* ------------------------------ buttons ------------------------------ */ .btn{ display:inline-block; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.8125rem; line-height:1; letter-spacing:.1em; text-transform:uppercase; padding:1.1rem 2rem; text-decoration:none; border:1px solid transparent; transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } /* on paper */ .btn--dark{ background:var(--forest-900); border-color:var(--forest-900); color:var(--paper); } .btn--dark:hover{ background:var(--ink); border-color:var(--ink); } /* on forest */ .btn--light{ background:var(--paper); border-color:var(--paper); color:var(--forest-900); } .btn--light:hover{ background:var(--sage-200); border-color:var(--sage-200); } /* ------------------------------ nav ------------------------------ */ /* Fixed and always on screen — it never retracts on scroll. */ .nav{ position:fixed; inset:0 0 auto 0; z-index:100; } .nav__bg{ position:absolute; inset:0; z-index:-1; background:rgba(22,56,44,.92); backdrop-filter:blur(14px) saturate(140%); opacity:0; transition:opacity .4s var(--ease); } .nav.is-stuck .nav__bg{ opacity:1; } .nav.is-light.is-stuck .nav__bg{ background:rgba(239,239,238,.92); border-bottom:1px solid var(--border-light); } .nav.is-light .wordmark, .nav.is-light .nav__links a:not(.nav__cta){ color:var(--forest-900); } .nav.is-light .nav__burger span{ background:var(--forest-900); } .nav__inner{ max-width:var(--max-width); margin-inline:auto; height:var(--nav-height); padding-inline:var(--gut); display:flex; align-items:center; justify-content:space-between; gap:2rem; } .wordmark{ display:inline-flex; align-items:baseline; gap:.55rem; text-decoration:none; color:var(--paper); transition:color .35s var(--ease); } .wordmark__mark{ font-family:var(--font-display); font-weight:600; font-size:1.375rem; letter-spacing:.02em; } .wordmark__name{ font-family:var(--font-body); font-weight:700; font-size:.6875rem; letter-spacing:var(--ls-label); text-transform:uppercase; opacity:.65; } .nav__links{ display:flex; align-items:center; gap:2.25rem; } .nav__links a{ color:var(--paper); text-decoration:none; font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.78; transition:opacity .3s var(--ease), color .3s var(--ease); } .nav__links a:hover{ opacity:1; color:var(--forest-900); } .nav:not(.is-light) .nav__links a:hover{ color:var(--sage-200); } .nav__cta{ background:var(--paper); color:var(--forest-900) !important; opacity:1 !important; padding:.75rem 1.35rem; transition:background .3s var(--ease), color .3s var(--ease); } .nav__cta:hover{ background:var(--sage-200); } .nav.is-light .nav__cta{ background:var(--forest-900); color:var(--paper) !important; } .nav.is-light .nav__cta:hover{ background:var(--ink); } .nav__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(239,239,238,.14); } .nav.is-light .nav__progress{ background:rgba(22,56,44,.12); } .nav__progress i{ display:block; height:100%; width:0%; background:var(--sage); } .nav.is-light .nav__progress i{ background:var(--forest-900); } .nav__burger{ display:none; width:2.75rem; height:2.75rem; padding:0; background:none; border:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; } .nav__burger span{ display:block; width:1.5rem; height:1px; background:var(--paper); transition:transform .35s var(--ease), opacity .25s var(--ease), background .35s var(--ease); } .nav__burger[aria-expanded="true"] span{ background:var(--paper); } .nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(.28rem) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-.28rem) rotate(-45deg); } @media (max-width:860px){ .nav__links a:not(.nav__cta){ display:none; } .nav__links .nav__cta{ display:none; } .nav__burger{ display:flex; } } /* ------------------------------ mobile menu ------------------------------ */ .menu{ position:fixed; inset:0; z-index:99; background:var(--forest-900); padding:calc(var(--nav-height) + 3rem) var(--gut) var(--gut); display:flex; flex-direction:column; justify-content:space-between; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; } .menu[hidden]{ display:none; } .menu.is-open{ opacity:1; visibility:visible; } .menu__links{ display:flex; flex-direction:column; gap:.5rem; } .menu__links a{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem,9vw,2.75rem); line-height:1.15; color:var(--paper); text-decoration:none; opacity:0; transform:translateY(1rem); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s var(--ease); } .menu.is-open .menu__links a{ opacity:1; transform:none; } .menu__links a:hover{ color:var(--sage-200); } .menu__foot{ margin:0; color:var(--sage); font-size:.85rem; line-height:1.7; } body.is-locked{ overflow:hidden; } /* ------------------------------ hero (scrubbed sequence) ------------------------------ */ .hero{ position:relative; background:var(--forest-900); } /* Static default: one full-height still with the title over it. motion.js adds .is-scrub once GSAP is live, which is what makes it tall + sticky. No overflow:hidden on .hero itself — that would cancel the sticky child. */ .hero__viewport{ position:relative; width:100%; height:100vh; height:100svh; overflow:hidden; } .hero.is-scrub{ height:300vh; } .hero.is-scrub .hero__viewport{ position:sticky; top:0; } /* Shows until the canvas has a real frame on it, then steps aside. */ .seq__poster, .seq__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; } .seq__poster{ z-index:0; transition:opacity .3s var(--ease); } .seq__canvas{ z-index:1; } /* Keeps the title legible over a bright frame. */ .seq__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(15,40,32,.92) 0%, rgba(15,40,32,.55) 30%, rgba(15,40,32,.1) 62%, rgba(15,40,32,.35) 100%); } .hero__content{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding-bottom:clamp(3rem,8vh,6rem); } .hero__title{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-display); line-height:var(--lh-small); letter-spacing:var(--ls-tight); margin:0 0 1.5rem; color:var(--paper); } .hero__title > span{ display:block; } .hero__title > span:nth-child(2){ color:var(--sage-200); } .hero__title > span:nth-child(3){ color:var(--sage); } @media (min-width:700px){ .hero__title > span{ display:inline; } .hero__title > span + span::before{ content:" "; } } .hero__lede{ max-width:46ch; margin:0 0 1.5rem; color:var(--paper); opacity:.9; font-size:var(--fs-subheading); line-height:var(--lh-large); } .hero__caption{ margin:0; color:var(--sage); font-size:.75rem; line-height:1.6; max-width:46ch; } .hero__scroll{ position:absolute; right:var(--gut); bottom:clamp(3rem,8vh,6rem); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.75rem; font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage-200); } .hero__scrollline{ position:relative; width:1px; height:56px; overflow:hidden; background:rgba(201,213,205,.3); } .hero__scrollline::after{ content:""; position:absolute; inset:0; background:var(--sage-200); animation:cue 2.1s var(--ease) infinite; } @keyframes cue{ 0% { transform:translateY(-100%); } 55% { transform:translateY(0); } 100% { transform:translateY(100%); } } @media (max-width:720px){ .hero__scroll{ display:none; } } /* ------------------------------ light sections ------------------------------ */ .statement, .ticker, .intro, .segments, .record, .leadership{ background:var(--paper); color:var(--body); } .statement .display, .segments .h2, .record .h2, .leadership .h2{ color:var(--forest-900); } .statement .eyebrow, .segments .eyebrow, .record .eyebrow, .leadership .eyebrow, .intro .eyebrow{ color:var(--sage); } .statement{ padding-block:var(--sec-large) 0; } .statement__inner{ max-width:56rem; } .statement__sub{ font-size:var(--fs-subheading); line-height:var(--lh-large); color:var(--body); margin:0 0 2.5rem; max-width:52ch; } .intro{ padding-block:var(--sec-main); } .intro__copy{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h4); line-height:var(--lh-large); color:var(--forest-900); max-width:38ch; margin:0; } /* ------------------------------ marquee ------------------------------ */ .marquee{ overflow:hidden; width:100%; } .marquee__scroll{ display:flex; width:100%; } .marquee__collection{ display:flex; flex:none; align-items:center; list-style:none; margin:0; padding:0; } .ticker{ padding-block:var(--sec-main) 0; /* Height a 4:1 mark is drawn at; every other ratio is scaled off it. Set here rather than in :root so the ticker owns its own sizing. */ --logo-h:clamp(1.5rem,2.6vw,2rem); } .ticker .marquee{ padding-bottom:calc(var(--sec-main) * .6); } /* Doubled from the original gap: each item used to carry a separator glyph with a matching margin of its own, so removing it halved the rhythm. padding-right matches the gap so the loop seam spaces evenly too. */ .ticker .marquee__collection{ gap:clamp(4rem,10vw,8rem); padding-right:clamp(4rem,10vw,8rem); } .ticker .marquee__collection li{ display:flex; align-items:center; font-family:var(--font-display); font-weight:400; font-size:clamp(1.375rem,3vw,2.25rem); line-height:1; color:var(--forest-900); opacity:.32; white-space:nowrap; transition:opacity .4s var(--ease); } .ticker .marquee__collection li:hover{ opacity:1; } /* --- client logos --- Shown in each brand's own colours. Every item in the row now has a logo file, so there are no plain company names left to sit against — which is what makes true colour workable here. If a name ever comes back (a tenant added before their logo arrives), it keeps the muted serif treatment above and the row will read as mixed until the file lands. */ .logo__img{ display:block; /* Optical, not literal, sizing. Matching bounding-box heights makes a wide wordmark tower over a compact one, so JS sets --logo-scale from the file's own aspect ratio, normalising roughly on area against a 4:1 reference. --logo-ar then derives the width. */ height:calc(var(--logo-h) * var(--logo-scale, 1)); aspect-ratio:var(--logo-ar, 4); width:auto; max-width:13rem; object-fit:contain; } /* Full opacity, no filter, no tint: each logo renders exactly as its file was supplied. The .32 the plain names carry would blend a logo toward the paper ground and shift its brand colour, so logos opt out of it entirely. */ .ticker .marquee__collection li.has-logo, .ticker .marquee__collection li.has-logo:hover{ opacity:1; position:relative; } /* Hover label. A logo replaces the company's name, so the name has to be recoverable — `alt` covers screen readers but is never shown on hover, and `title` cannot be styled or hurried (browsers sit on it for about a second). This is the same information, on the house type. It sits *below* the mark deliberately: .marquee is overflow:hidden, so a label above would be clipped, while the row's own padding-bottom is inside the clip box and leaves room to spare. Absolute, so revealing it never reflows the row or disturbs the marquee's measured width. */ .logo__name{ position:absolute; top:calc(100% + .7rem); left:50%; transform:translate(-50%,.3rem); white-space:nowrap; pointer-events:none; font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow); line-height:1; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage); opacity:0; transition:opacity .28s var(--ease), transform .28s var(--ease); } .ticker .marquee__collection li.has-logo:hover .logo__name{ opacity:1; transform:translate(-50%,0); } /* No hover on touch: show every label, since it can never be revealed. */ @media (hover:none){ .logo__name{ opacity:1; transform:translate(-50%,0); } } /* ------------------------------ numbers ------------------------------ */ .numbers{ background:var(--forest-900); color:var(--paper); padding-block:var(--sec-main); } .numbers .eyebrow{ color:var(--sage); } .numbers__grid{ display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border:1px solid var(--border-dark); } .num{ padding:2.5rem 2rem; border-right:1px solid var(--border-dark); } .num:last-child{ border-right:0; } @media (max-width:860px){ .num{ border-right:0; border-bottom:1px solid var(--border-dark); } .num:last-child{ border-bottom:0; } } .num__value{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.5rem,5vw,3.75rem); line-height:1; color:var(--paper); margin:0 0 1.25rem; font-variant-numeric:tabular-nums; } .num__label{ margin:0; color:var(--sage); opacity:.9; font-size:.875rem; line-height:var(--lh-large); max-width:26ch; } /* ------------------------------ segments ------------------------------ */ .segments{ padding-block:var(--sec-main); } .segments__title{ max-width:18ch; margin-bottom:3rem; } .segments__grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .segment{ background:var(--white); border:1px solid var(--border-light); padding:2.25rem 1.75rem; } .segment__idx{ font-family:var(--font-display); font-weight:400; font-size:1.75rem; line-height:1; color:var(--sage); margin:0 0 1.75rem; } .segment h3{ font-family:var(--font-body); font-weight:700; font-size:.9375rem; line-height:var(--lh-medium); color:var(--ink); margin:0 0 1.25rem; } .segment p:last-child{ margin:0; color:var(--body); font-size:.9375rem; line-height:var(--lh-large); } /* ------------------------------ deals ------------------------------ */ .record{ padding-block:var(--sec-main); } .record__title{ max-width:24ch; margin-bottom:3rem; } .deals{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } .deal{ background:var(--white); color:var(--body); border:1px solid var(--border-light); padding:1.75rem 1.5rem; min-height:12.5rem; display:flex; flex-direction:column; transition:border-color .35s var(--ease), background .35s var(--ease); } .deal:hover{ border-color:var(--sage); background:var(--paper-soft); } .deal__loc{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage); margin:0 0 1.75rem; } .deal__name{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-h6); line-height:var(--lh-medium); color:var(--forest-900); margin:0 0 .35rem; } .deal__type{ margin:0 0 auto; font-size:.875rem; color:var(--body); } .deal__status{ margin-top:1.5rem; align-self:flex-start; font-size:.625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.4rem .75rem; border:1px solid var(--border-light); color:var(--muted); } .deal__status.is-current{ background:var(--forest-900); border-color:var(--forest-900); color:var(--paper); } /* A joint venture is neither a current lease nor a past one, so it reads as its own thing: the accent outlined rather than filled. */ .deal__status.is-jv{ background:transparent; border-color:var(--sage); color:var(--forest-900); } .record__foot{ margin:2.5rem 0 0; color:var(--body); max-width:58ch; } /* ------------------------------ laws (marquee rows) ------------------------------ */ .laws-sec{ background:var(--forest-800); padding-block:var(--sec-main); } .laws-sec .eyebrow{ color:var(--sage); } .laws__title{ color:var(--paper); max-width:18ch; margin-bottom:3rem; } .laws__row + .laws__row{ margin-top:1.25rem; } .laws{ gap:1.25rem; padding-right:1.25rem; } .law{ flex:0 0 clamp(17rem,26vw,22rem); background:rgba(239,239,238,.045); border:1px solid var(--border-dark); padding:1.85rem 1.6rem; min-height:12rem; display:flex; flex-direction:column; transition:background .35s var(--ease), border-color .35s var(--ease); } .law:hover{ background:rgba(239,239,238,.09); border-color:var(--sage); } .law p{ margin:auto 0 0; font-family:var(--font-display); font-weight:400; font-size:var(--fs-h6); line-height:var(--lh-medium); color:var(--paper); } /* ------------------------------ off-market ------------------------------ */ .offmarket{ position:relative; overflow:clip; background:var(--forest-900); padding-block:var(--sec-large); isolation:isolate; } .offmarket__bg{ position:absolute; inset:-25% 0; z-index:-1; background: radial-gradient(60% 60% at 78% 28%, rgba(47,84,69,.6) 0%, transparent 70%), radial-gradient(45% 45% at 12% 82%, rgba(143,163,150,.14) 0%, transparent 70%); } .offmarket__inner{ max-width:46rem; } .offmarket__panel{ background:var(--forest-800); border:1px solid var(--border-dark); padding:clamp(2rem,5vw,3.5rem); } .offmarket .eyebrow{ color:var(--sage); } .offmarket .h2{ color:var(--paper); max-width:18ch; } .offmarket p{ color:var(--sage-100); margin:0 0 2.5rem; max-width:56ch; } /* ------------------------------ leadership ------------------------------ */ .leadership{ padding-block:var(--sec-main); overflow-x:clip; } .leadership__inner{ display:grid; gap:2.5rem; align-items:start; } @media (min-width:900px){ .leadership__inner{ grid-template-columns:20rem 1fr; gap:4rem; } } /* Stands in until a photograph is supplied: swap the whole frame for an then, keeping the 4/5 ratio so the grid column does not shift. */ .portrait-frame{ aspect-ratio:4/5; background:linear-gradient(160deg, var(--forest-800) 0%, var(--forest-900) 100%); display:flex; align-items:center; justify-content:center; } .portrait-initials{ font-family:var(--font-display); font-weight:400; font-size:3.5rem; color:rgba(239,239,238,.3); } .leadership .section-label{ color:var(--sage); } .leadership__role{ font-size:var(--fs-large); color:var(--sage); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:-.25rem 0 1.75rem; } .leadership .prose p{ color:var(--body); } /* ------------------------------ contact ------------------------------ */ /* The panel inside is scrubbed from scale 1.25, so clip it or it bleeds past the page edge on the way down. */ .contact{ background:var(--forest-900); padding-block:var(--sec-main); overflow-x:clip; } .contact__panel{ transform-origin:50% 50%; } .contact__panel-inner{ transform-origin:50% 50%; } .contact .eyebrow{ color:var(--sage); } .contact .display{ color:var(--paper); } .contact__sub{ color:var(--sage-100); font-size:var(--fs-subheading); margin:0 0 3.5rem; } .form{ display:grid; gap:1.75rem 1.5rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); padding-bottom:var(--sec-main); } .field{ display:flex; flex-direction:column; gap:.6rem; border:0; padding:0; margin:0; min-width:0; } .field--wide{ grid-column:1/-1; } .field label, .field legend{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage); padding:0; } .field input[type=text], .field input[type=email], .field select, .field textarea{ width:100%; font:inherit; font-size:1rem; color:var(--paper); background:transparent; border:1px solid var(--border-dark); padding:.9rem 1rem; transition:border-color .3s var(--ease), background .3s var(--ease); } .field select{ appearance:none; cursor:pointer; } .field select option{ background:var(--forest-900); color:var(--paper); } .field textarea{ resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--sage); background:rgba(239,239,238,.04); } .checks{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; padding-top:.25rem; } .checks label{ display:inline-flex; align-items:center; gap:.55rem; font-size:.9375rem; letter-spacing:0; text-transform:none; color:var(--paper); cursor:pointer; } .checks input{ accent-color:var(--sage); width:1rem; height:1rem; } .form__actions{ flex-direction:row; align-items:center; gap:1.25rem; flex-wrap:wrap; } .form__note{ margin:0; font-size:.9375rem; color:var(--sage-200); } .contact__details{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); padding-top:2.5rem; border-top:1px solid var(--border-dark); } .detail h3{ font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--sage); margin:0 0 1rem; } .detail p, .detail address{ margin:0 0 .35rem; font-style:normal; color:var(--sage-100); font-size:.9375rem; line-height:var(--lh-large); } .detail__mono{ font-size:.8125rem !important; color:var(--sage) !important; opacity:.75; } /* ------------------------------ footer ------------------------------ */ .foot{ background:var(--forest-900); border-top:1px solid var(--border-dark); padding-block:3.5rem 2rem; color:var(--paper); } .foot__inner{ display:grid; gap:2rem; padding-bottom:3rem; } @media (min-width:800px){ .foot__inner{ grid-template-columns:1fr auto; gap:4rem; align-items:start; } } .foot__brand .wordmark__mark{ display:block; margin-bottom:.75rem; color:var(--paper); font-family:var(--font-display); font-weight:600; font-size:1.5rem; } .foot__brand p{ margin:0; color:var(--sage); max-width:34ch; font-size:.9375rem; } .foot__nav{ display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; } .foot__nav a{ color:var(--paper); opacity:.7; text-decoration:none; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .foot__nav a:hover{ opacity:1; color:var(--sage-200); } .foot__legal-wrap{ display:grid; gap:.75rem; } .foot__legal-wrap .rule{ margin-bottom:1.25rem; } @media (min-width:900px){ .foot__legal-wrap{ grid-template-columns:1fr auto; gap:3rem; align-items:end; } .foot__legal-wrap .rule{ grid-column:1/-1; } } .foot__legal{ margin:0; font-size:.75rem; line-height:1.7; color:var(--sage); opacity:.7; max-width:72ch; } .foot__copy{ margin:0; font-size:.75rem; color:var(--sage); opacity:.7; } /* Copyright and build credit share the right-hand column, so the legal paragraph keeps the wide one to itself. */ .foot__meta{ display:grid; gap:.4rem; } @media (min-width:900px){ .foot__meta{ justify-items:end; text-align:right; } } .foot__built{ margin:0; font-size:.75rem; color:var(--sage); opacity:.7; } .foot__built a{ color:var(--sage-200); text-decoration:none; border-bottom:1px solid var(--border-dark); padding-bottom:1px; transition:color .25s var(--ease), border-color .25s var(--ease); } .foot__built a:hover{ color:var(--paper); border-bottom-color:var(--sage-200); } /* ------------------------------ reduced motion / no GSAP ------------------------------ */ /* When nothing is animating the rows — reduced motion, or GSAP failed to load — an overflow:hidden marquee would bury every card past the fourth with no way to reach it. Hand the row back to the visitor to swipe. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } @media (prefers-reduced-motion:reduce){ .marquee{ overflow-x:auto; } .marquee__scroll{ width:auto !important; margin-left:0 !important; } } html.no-gsap .marquee{ overflow-x:auto; } html.no-gsap .marquee__scroll{ width:auto !important; margin-left:0 !important; }