/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:"DM Sans", ui-sans-serif, system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-4xl:56rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--tracking-tight:-.025em;--leading-relaxed:1.625;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"DM Sans", ui-sans-serif, system-ui, sans-serif;--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-muted-foreground:var(--muted-foreground);--color-border:var(--border)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--color-border)}html{scroll-behavior:smooth}body{background-color:var(--color-background);color:var(--color-foreground);font-family:var(--font-sans);font-feature-settings:"ss01", "cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}::selection{color:var(--color-foreground);background:#78a18c33}}@layer components;@layer utilities{.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-6{inset-inline:calc(var(--spacing) * 6)}.top-0{top:0}.top-24{top:calc(var(--spacing) * 24)}.right-0{right:0}.right-6{right:calc(var(--spacing) * 6)}.bottom-20{bottom:calc(var(--spacing) * 20)}.left-0{left:0}.z-10{z-index:10}.z-\[100\]{z-index:100}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-24{margin-top:calc(var(--spacing) * 24)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.mb-20{margin-bottom:calc(var(--spacing) * 20)}.ml-1{margin-left:var(--spacing)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-\[16\/11\]{aspect-ratio:16/11}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-11{height:calc(var(--spacing) * 11)}.h-\[100svh\]{height:100svh}.h-\[115\%\]{height:115%}.h-full{height:100%}.h-px{height:1px}.min-h-\[640px\]{min-height:640px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-11{width:calc(var(--spacing) * 11)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-\[1400px\]{max-width:1400px}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:0}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.grid-cols-\[minmax\(0\,1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-9{gap:calc(var(--spacing) * 9)}.gap-14{gap:calc(var(--spacing) * 14)}.gap-16{gap:calc(var(--spacing) * 16)}.gap-24{gap:calc(var(--spacing) * 24)}:where(.space-y-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-10{column-gap:calc(var(--spacing) * 10)}.gap-y-4{row-gap:calc(var(--spacing) * 4)}.gap-y-14{row-gap:calc(var(--spacing) * 14)}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background\/15{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.border-background\/15{border-color:color-mix(in oklab, var(--background) 15%, transparent)}}.border-background\/30{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.border-background\/30{border-color:color-mix(in oklab, var(--background) 30%, transparent)}}.border-border,.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-border\/80{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/80{border-color:color-mix(in oklab, var(--border) 80%, transparent)}}.border-foreground\/15{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/15{border-color:color-mix(in oklab, var(--foreground) 15%, transparent)}}.border-primary\/40{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/40{border-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.bg-accent\/60{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/60{background-color:color-mix(in oklab, var(--accent) 60%, transparent)}}.bg-background,.bg-background\/10{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/10{background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.bg-background\/40{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/40{background-color:color-mix(in oklab, var(--background) 40%, transparent)}}.bg-card{background-color:var(--card)}.bg-foreground,.bg-foreground\/40{background-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/40{background-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.bg-primary,.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.bg-secondary\/50{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/50{background-color:color-mix(in oklab, var(--secondary) 50%, transparent)}}.bg-transparent{background-color:#0000}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-black\/20{--tw-gradient-from:#0003}@supports (color:color-mix(in lab, red, red)){.from-black\/20{--tw-gradient-from:color-mix(in oklab, var(--color-black) 20%, transparent)}}.from-black\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/30{--tw-gradient-via:#0000004d}@supports (color:color-mix(in lab, red, red)){.via-black\/30{--tw-gradient-via:color-mix(in oklab, var(--color-black) 30%, transparent)}}.via-black\/30{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-black\/60{--tw-gradient-to:#0009}@supports (color:color-mix(in lab, red, red)){.to-black\/60{--tw-gradient-to:color-mix(in oklab, var(--color-black) 60%, transparent)}}.to-black\/60{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-20{padding-block:calc(var(--spacing) * 20)}.py-28{padding-block:calc(var(--spacing) * 28)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-4{padding-left:calc(var(--spacing) * 4)}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.label-eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted-foreground);font-size:11px;font-weight:400}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[clamp\(1\.75rem\,3\.5vw\,3rem\)\]{font-size:clamp(1.75rem,3.5vw,3rem)}.text-\[clamp\(2\.25rem\,6vw\,5rem\)\]{font-size:clamp(2.25rem,6vw,5rem)}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.02\]{--tw-leading:1.02;line-height:1.02}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-tightest{--tw-tracking:-.03em;letter-spacing:-.03em}.tracking-wider{--tw-tracking:.1em;letter-spacing:.1em}.text-balance{text-wrap:balance;text-wrap:balance}.text-pretty{text-wrap:pretty;text-wrap:pretty}.text-background,.text-background\/40{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.text-background\/40{color:color-mix(in oklab, var(--background) 40%, transparent)}}.text-background\/50{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.text-background\/50{color:color-mix(in oklab, var(--background) 50%, transparent)}}.text-background\/60{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.text-background\/60{color:color-mix(in oklab, var(--background) 60%, transparent)}}.text-background\/70{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.text-background\/70{color:color-mix(in oklab, var(--background) 70%, transparent)}}.text-background\/80{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.text-background\/80{color:color-mix(in oklab, var(--background) 80%, transparent)}}.text-foreground,.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-foreground\/85{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/85{color:color-mix(in oklab, var(--foreground) 85%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-primary,.text-primary\/90{color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/90{color:color-mix(in oklab, var(--primary) 90%, transparent)}}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-500{--tw-duration:.5s;transition-duration:.5s}@media (hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:border-primary:is(:where(.group):hover *){border-color:var(--primary)}.group-hover\:bg-primary:is(:where(.group):hover *){background-color:var(--primary)}.group-hover\:text-primary-foreground:is(:where(.group):hover *){color:var(--primary-foreground)}}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-foreground\/20:hover{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:border-foreground\/20:hover{border-color:color-mix(in oklab, var(--foreground) 20%, transparent)}}.hover\:border-primary:hover{border-color:var(--primary)}.hover\:bg-background\/10:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-background\/10:hover{background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.hover\:bg-primary:hover{background-color:var(--primary)}.hover\:text-background:hover{color:var(--background)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary-foreground:hover{color:var(--primary-foreground)}.hover\:opacity-60:hover{opacity:.6}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:fixed:focus{position:fixed}.focus\:top-4:focus{top:calc(var(--spacing) * 4)}.focus\:left-4:focus{left:calc(var(--spacing) * 4)}.focus\:z-\[200\]:focus{z-index:200}.focus\:rounded-md:focus{border-radius:calc(var(--radius) - 2px)}.focus\:bg-foreground:focus{background-color:var(--foreground)}.focus\:px-4:focus{padding-inline:calc(var(--spacing) * 4)}.focus\:py-2:focus{padding-block:calc(var(--spacing) * 2)}.focus\:text-sm:focus{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.focus\:text-background:focus{color:var(--background)}@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){.md\:inset-x-12{inset-inline:calc(var(--spacing) * 12)}.md\:right-12{right:calc(var(--spacing) * 12)}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:64rem){.lg\:inset-x-16{inset-inline:calc(var(--spacing) * 16)}.lg\:right-16{right:calc(var(--spacing) * 16)}.lg\:bottom-24{bottom:calc(var(--spacing) * 24)}.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:col-start-7{grid-column-start:7}.lg\:col-start-8{grid-column-start:8}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:items-center{align-items:center}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:gap-14{gap:calc(var(--spacing) * 14)}.lg\:gap-32{gap:calc(var(--spacing) * 32)}.lg\:px-12{padding-inline:calc(var(--spacing) * 12)}.lg\:py-24{padding-block:calc(var(--spacing) * 24)}.lg\:py-40{padding-block:calc(var(--spacing) * 40)}}}:root{--radius:.5rem;--background:#f9f8f6;--foreground:#242424;--card:#fff;--card-foreground:#242424;--popover:#fff;--popover-foreground:#242424;--primary:#78a18c;--primary-foreground:#fff;--secondary:#f2f0ed;--secondary-foreground:#333;--muted:#f2f0ed;--muted-foreground:#6b6b6b;--accent:#eaf1ed;--accent-foreground:#383838;--destructive:#dd3c3c;--destructive-foreground:#fff;--border:#e3e1dd;--input:#e3e1dd;--ring:#78a18c}.dark{--background:#1d1a16;--foreground:#f3f1ed;--card:#28241f;--card-foreground:#f3f1ed;--popover:#28241f;--popover-foreground:#f3f1ed;--primary:#6aaf81;--primary-foreground:#1d1a16;--secondary:#322e29;--secondary-foreground:#f3f1ed;--muted:#38332e;--muted-foreground:#b0a99b;--accent:#2a4633;--accent-foreground:#deede3;--destructive:#d22d2d;--destructive-foreground:#f3f1ed;--border:#3e3832;--input:#3e3832;--ring:#7ab88f}nav.is-scrolled{background:var(--background)}@supports (color:color-mix(in lab, red, red)){nav.is-scrolled{background:color-mix(in srgb, var(--background) 88%, transparent)}}nav.is-scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px #0000000d}.static-mobile-menu{background:var(--foreground);margin:1rem -1.5rem -1.25rem;padding:.75rem 1.5rem 1.25rem}.static-mobile-menu a{color:var(--background);letter-spacing:.1em;text-transform:uppercase;padding:.75rem 0;font-size:.75rem;display:block}@media (min-width:768px){.static-mobile-menu{display:none!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0} @font-face { font-family: "Caviar Dreams"; src: url("../fonts/CaviarDreams-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } /* Reference return bar: a compact final row instead of an overlapping circle. */ :root { --reference-return-height: clamp(3rem, 4.5vw, 3.65rem); } body:is(.project-modal-open, .fullscreen-reference-open, .live-preview-open) .hero-start.is-return { position: fixed; z-index: 1400; inset: auto 0 0; width: 100%; height: var(--reference-return-height); overflow: hidden; border-radius: 0; box-shadow: 0 -.35rem 1.2rem rgba(25,38,32,.15), inset 0 1px rgba(255,255,255,.18); transform: none; animation: reference-return-enter .38s cubic-bezier(.22, 1, .36, 1) both; } body:is(.project-modal-open, .fullscreen-reference-open, .live-preview-open) .hero-start.is-return:active { transform: none; } body:is(.project-modal-open, .fullscreen-reference-open, .live-preview-open) .hero-start.is-return .hero-start__toggle { inset: 0; width: 100%; height: 100%; padding: 0; place-items: center; } body.project-modal-open .project-modal { inset: 0 0 var(--reference-return-height); padding: 1rem; } body.project-modal-open .project-modal__dialog { max-height: calc(100dvh - var(--reference-return-height) - 2rem); } body.fullscreen-reference-open .fullscreen-reference { inset: 0 0 var(--reference-return-height); } body.fullscreen-reference-open .fullscreen-reference__dialog { height: 100%; } body.live-preview-open .project-modal__live-frame-shell.is-fallback-fullscreen { inset: 0 0 var(--reference-return-height); height: auto; min-height: 0; } @media (min-width: 901px) { body.project-modal-open .project-modal__content { min-height: calc(100dvh - var(--reference-return-height) - 2rem); } body.project-modal-open .project-modal__content .project-modal__gallery, body.project-modal-open .project-modal__content--live .project-modal__live-frame-shell { height: calc(100dvh - var(--reference-return-height) - 2rem); min-height: calc(100dvh - var(--reference-return-height) - 2rem); } } @media (max-width: 900px) { body.project-modal-open .project-modal { padding: 0; } body.project-modal-open .project-modal__dialog { width: 100%; max-height: calc(100dvh - var(--reference-return-height)); border-radius: 0; } body.project-modal-open .project-modal__content { padding-bottom: 0; } } @keyframes reference-return-enter { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } /* 2026-09-03 content revision: quieter hierarchy and explicit service language. */ .expertise-strip { padding: 0; border-bottom: 1px solid var(--border); background: #101613; } .expertise-marquee { margin-top: 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); background: #101613; } .expertise-marquee__track { display: flex; width: max-content; animation: expertise-marquee-scroll 74s linear infinite; will-change: transform; } .expertise-marquee__group { display: flex; flex: none; margin: 0; padding: 0; list-style: none; } .expertise-marquee__group li { display: grid; flex: 0 0 clamp(12rem, 17vw, 20rem); min-height: clamp(4.5rem, 6vw, 5.5rem); padding: 1rem 1.35rem; place-items: center; border-left: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.54); text-align: center; font-size: clamp(.68rem, .8vw, .78rem); font-weight: 400; letter-spacing: .11em; text-transform: uppercase; } .expertise-marquee:hover .expertise-marquee__track, .expertise-marquee:focus-within .expertise-marquee__track { animation-play-state: paused; } @keyframes expertise-marquee-scroll { to { transform: translateX(-50%); } } .care-teaser { --care-footer-clearance: 9.5rem; padding: clamp(5rem, 8vw, 8rem) 0 calc(clamp(5rem, 8vw, 8rem) + var(--care-footer-clearance)); background: radial-gradient(circle at 84% 18%, rgba(120,161,140,.17), transparent 28%), #18201d; color: #fff; } .care-teaser__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 4fr); gap: clamp(3rem, 8vw, 8rem); align-items: end; } .care-teaser h2 { max-width: 54rem; margin-top: 1.5rem; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(2.4rem, 4.5vw, 4.7rem); font-weight: 400; letter-spacing: -.04em; line-height: .94; } .care-teaser__copy p { color: rgba(255,255,255,.68); font-size: .92rem; font-weight: 300; line-height: 1.75; } .care-teaser__copy p + p { margin-top: 1rem; } .care-teaser__copy .button { margin-top: 2rem; } /* Every editorial section title now uses one calm visual voice. */ .section-display-title__base, .section-display-title__key, .portfolio-heading .section-display-title__base, .portfolio-heading .section-display-title__key, #website-title .section-display-title__base, #website-title .section-display-title__key { margin-top: 0; color: inherit; font-size: 1em !important; font-weight: 400 !important; letter-spacing: inherit; line-height: inherit; } .section-display-title__key { margin-top: .12em; } .portfolio-heading .section-display-title__base, .portfolio-heading .section-display-title__key, #website-title .section-display-title__base, #website-title .section-display-title__key { color: #fff; } .service-card { grid-template-rows: auto 1fr; } .service-card__content { min-width: 0; } .service-card__meta { align-items: baseline; } .service-card__meta span:last-child { text-align: right; } .portfolio-card__meta { grid-template-columns: auto 1fr; } @media (max-width: 900px) { .care-teaser__grid { grid-template-columns: 1fr; } .care-teaser__grid { align-items: start; } } @media (max-width: 640px) { .expertise-marquee__group li { flex-basis: 11rem; min-height: 4.25rem; font-size: .64rem; } .care-teaser { padding: 5rem 0 calc(5rem + var(--care-footer-clearance)); } .care-teaser__grid { gap: 2.5rem; } .service-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .expertise-marquee { overflow-x: auto; } .expertise-marquee__track { animation: none; } .expertise-marquee__group[aria-hidden="true"] { display: none; } } @font-face { font-family: "Caviar Dreams"; src: url("../fonts/CaviarDreams-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; } /* Site-specific components kept outside the generated utility layer. */ .hero-portrait { display: none; object-position: 68% center; } .hero-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .24) 52%, rgba(0, 0, 0, .08) 100%), linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .08) 46%, rgba(0, 0, 0, .72) 100%); } @media (min-width: 768px) { .hero-portrait { object-position: center center; } } .site-logo { display: inline-flex; align-items: center; white-space: nowrap; font-family: "Caviar Dreams", "Century Gothic", sans-serif; font-size: 1.75rem; font-weight: 400; line-height: 1; letter-spacing: -.063em; font-kerning: normal; font-feature-settings: "kern" 1; } .site-logo__name { color: #171717; } .site-logo__suffix { flex: 0 0 auto; margin-left: .055em; transform: translate(-1px, calc(.08em - 1px)); } .site-logo__suffix--text { display: inline-block; width: auto; height: auto; margin-left: .025em; color: var(--primary); font-family: "Caviar Dreams", "Century Gothic", sans-serif; font-size: 1em; font-weight: 700; letter-spacing: -.063em; line-height: 1; transform: translate(-1px, 0); } .site-logo__suffix--svg { display: none; width: 1.2em; height: 1.2em; } /* Reversible SVG fallback: add `site-logo--use-svg` to the logo wrapper. */ .site-logo--use-svg .site-logo__suffix--text { display: none; } .site-logo--use-svg .site-logo__suffix--svg { display: block; } .site-logo--nav .site-logo__name, .site-logo--dark .site-logo__name { color: #fff; } nav.is-scrolled .site-logo--nav .site-logo__name { color: #171717; } .site-logo--dark { font-size: 2rem; } .nav-logo-display { display: none; } .vita-image { aspect-ratio: 3 / 2; } .vita-image img { object-fit: contain; background: #050807; } @media (min-width: 64rem) { .vita-media { grid-column: 1 / -1; } .vita-copy { grid-column: 3 / span 8; } } .input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--color-border); padding: .75rem 0; font-size: .9rem; font-weight: 300; color: var(--color-foreground); transition: border-color .2s ease; } .input:focus { outline: none; border-bottom-color: var(--color-primary); } select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .25rem center; } .legal-main { width: min(100% - 3rem, 48rem); margin-inline: auto; padding: 10rem 0 6rem; } .legal-main h1 { margin-top: 1.5rem; font-size: clamp(2.25rem, 6vw, 3rem); font-weight: 300; letter-spacing: -.02em; } .legal-heading { margin-top: 4rem; } .legal-content { display: grid; gap: 2rem; margin-top: 3rem; color: var(--color-muted-foreground); font-size: .875rem; font-weight: 300; line-height: 1.65; } .legal-content h2 { margin-bottom: .75rem; color: var(--color-foreground); font-size: 1rem; font-weight: 400; } .legal-content a, .back-link { text-decoration: underline; text-underline-offset: .2em; } /* Data-driven portfolio */ .portfolio-shell { width: min(100% - 3rem, 1400px); margin-inline: auto; } .website-feature__copy { max-width: 58rem; } .website-feature__copy > span { color: rgba(16,32,24,.62); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; } .website-feature__copy h2 { max-width: 52rem; margin-top: 1.5rem; color: #102018; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 300; letter-spacing: -.05em; line-height: .98; text-wrap: balance; } .website-feature__text-panel { width: fit-content; max-width: 49rem; margin-top: 2.75rem; padding: 2rem clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid rgba(216,238,227,.55); border-left: 1px solid rgba(216,238,227,.7); background: rgba(16,32,24,.28); box-shadow: 1.5rem 1.5rem 0 rgba(16,32,24,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .website-feature__text-panel p { max-width: 44rem; color: rgba(255,255,255,.72); font-size: .94rem; font-weight: 300; line-height: 1.75; } .website-feature__text-panel p + p { margin-top: 1.35rem; } .website-feature__text-panel .website-feature__lead { color: rgba(255,255,255,.96); font-size: 1.08rem; } .website-feature__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-bottom: 0; border-bottom: 1px solid var(--primary); background: rgba(20,24,22,.56); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .website-feature__benefits article { min-height: 12rem; padding: 2rem clamp(2rem, 4vw, 5rem) 2.4rem; } .website-feature__benefits article + article { border-left: 1px solid var(--primary); } .website-feature__benefits article > span { color: var(--primary); font-size: .625rem; letter-spacing: .12em; } .website-feature__benefits h3 { margin-top: 1.4rem; color: var(--primary); font-size: 1.2rem; font-weight: 400; } .website-feature__benefits p { max-width: 24rem; margin-top: .75rem; color: var(--primary); font-size: .82rem; font-weight: 300; line-height: 1.65; } .portfolio-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 4.5rem; } .portfolio-heading span, .portfolio-heading p { color: color-mix(in srgb, var(--background) 55%, transparent); font-size: .6875rem; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; } .portfolio-heading h2 { max-width: 48rem; margin-top: 1.5rem; color: var(--background); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.04; } .portfolio-heading p { text-align: right; } .portfolio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5rem 2rem; } .portfolio-card:nth-child(odd) { grid-column: span 7; padding-top: 0; } .portfolio-card:nth-child(even) { grid-column: span 5; padding-top: 7rem; } .portfolio-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: .5rem; background: #343434; } .portfolio-card--featured .portfolio-card__media { box-shadow: 0 0 0 2px var(--primary); } .portfolio-card__media-link { display: block; width: 100%; height: 100%; } .portfolio-card__media-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; } .portfolio-card__media > img, .portfolio-card__media-link > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.16) contrast(1.08); transition: filter .48s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .portfolio-card:hover .portfolio-card__media > img, .portfolio-card:hover .portfolio-card__media-link > img, .portfolio-card:focus-within .portfolio-card__media > img, .portfolio-card:focus-within .portfolio-card__media-link > img { filter: grayscale(0) brightness(1) contrast(1); transform: scale(1.025); } .portfolio-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(145deg, #383b39, #222); } .portfolio-card__placeholder span { color: var(--primary); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; } .portfolio-card__body { padding-top: 1.5rem; } .portfolio-card__meta { display: grid; grid-template-columns: auto auto 1fr; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid color-mix(in srgb, var(--background) 15%, transparent); color: color-mix(in srgb, var(--background) 45%, transparent); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; } .portfolio-card__meta span:last-child { text-align: right; } .portfolio-card h3 { margin-top: 1.25rem; color: var(--background); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: -.02em; } .portfolio-card h3 a:hover { color: var(--primary); } .portfolio-card__claim { margin-top: .75rem; color: color-mix(in srgb, var(--background) 82%, transparent); font-size: .95rem; font-weight: 300; } .portfolio-card__description { max-width: 42rem; margin-top: .55rem; color: color-mix(in srgb, var(--background) 58%, transparent); font-size: .82rem; font-weight: 300; line-height: 1.65; } .portfolio-card__credit { max-width: 42rem; margin-top: 1rem; padding-left: .85rem; border-left: 1px solid var(--primary); color: color-mix(in srgb, var(--background) 68%, transparent); font-size: .72rem; font-weight: 300; line-height: 1.6; } .portfolio-card__credit a { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; } .portfolio-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.15rem; } .portfolio-card__tags span { padding: .3rem .6rem; border-radius: .2rem; background: color-mix(in srgb, var(--background) 9%, transparent); color: color-mix(in srgb, var(--background) 68%, transparent); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; } @media (max-width: 767px) { .website-feature__copy h2 { font-size: 3rem; } .website-feature__text-panel { margin-top: 2rem; padding: 1.5rem 1.25rem; box-shadow: .8rem .8rem 0 rgba(16,32,24,.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .website-feature__text-panel .website-feature__lead { font-size: 1rem; } .digital-continuum::before { height: 76rem; } .digital-continuum__network { top: -2rem; left: -18%; width: 136%; height: 79rem; object-fit: cover; object-position: 58% top; } .digital-continuum__geometry span:nth-child(1) { top: 38rem; right: -28vw; width: 92vw; height: 13rem; } .digital-continuum__geometry span:nth-child(2) { top: 53rem; left: -18vw; width: 110vw; } .digital-continuum__geometry span:nth-child(3) { top: 59rem; right: -4rem; width: 13rem; } .digital-bridge__inner { grid-template-columns: 1fr; gap: 1.5rem; width: min(100% - 2rem, 1400px); padding: 1.5rem 0 3.5rem; } .digital-bridge__statement p { font-size: clamp(2.15rem, 10.5vw, 3.2rem); } .website-feature__benefits { grid-template-columns: 1fr; margin-bottom: 0; } .portfolio-projects { padding: 3rem 0 6rem; } .website-feature__benefits article { min-height: 0; padding: 1.8rem 1.25rem; } .website-feature__benefits article + article { border-top: 1px solid var(--primary); border-left: 0; } .portfolio-heading { align-items: start; flex-direction: column; margin-bottom: 3rem; } .portfolio-heading p { text-align: left; } .portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; } .portfolio-card, .portfolio-card:nth-child(n) { grid-column: 1; padding-top: 0; } } .back-link { display: inline-block; margin-top: 4rem; color: var(--color-muted-foreground); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } /* 2026 repositioning */ html { background: var(--background); } body { overflow-x: hidden; } [id] { scroll-margin-top: 5.25rem; } .skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 300; transform: translateY(-200%); padding: .7rem 1rem; background: var(--foreground); color: var(--background); } .skip-link:focus { transform: none; } .section-shell { width: min(100% - 3rem, 1400px); margin-inline: auto; } .eyebrow { display: block; color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .eyebrow--light { color: rgba(255,255,255,.62); } .main-nav { position: fixed; inset: 0 0 auto; z-index: 100; color: white; transition: color .25s, background .25s; } .main-nav.is-scrolled { background: color-mix(in srgb, var(--background) 96%, transparent); color: var(--foreground); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-inner { width: min(100% - 3rem, 1400px); min-height: 5.25rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; } .desktop-nav { display: flex; align-items: center; gap: 2rem; font-size: .6875rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; } .desktop-nav > a { transition: opacity .2s; } .desktop-nav > a:hover { opacity: .55; } .nav-cta { padding: .75rem 1.25rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; } .main-nav.is-scrolled .nav-cta { border-color: var(--border); } .menu-button { display: none; width: 2rem; height: 2rem; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .menu-button span { width: 1.25rem; height: 1px; background: currentColor; transition: transform .25s ease, opacity .2s ease; } .menu-button:focus-visible { outline: 1px solid var(--primary); outline-offset: 4px; border-radius: 999px; } .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.menu-open { overflow: hidden; } html.menu-open { background: #78a18c; } html.page-scroll-locked { overflow: hidden; overscroll-behavior: none; } body.page-scroll-locked { position: fixed; top: var(--scroll-lock-top, 0); left: var(--scroll-lock-left, 0); width: 100%; overflow: hidden; overscroll-behavior: none; padding-right: var(--scrollbar-compensation, 0); } .static-mobile-menu, .project-modal__dialog, .gallery-lightbox__track, .contact-modal, .legal-modal, .care-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .nav-inner > a, .menu-button { position: relative; z-index: 2; } nav.main-nav.is-menu-open, nav.main-nav.is-scrolled.is-menu-open { background: transparent; color: white; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .main-nav.is-menu-open .site-logo--nav .site-logo__name { color: white; } .static-mobile-menu { position: fixed; z-index: 1; inset: 0; min-height: 100svh; min-height: 100dvh; margin: 0; padding: calc(5.25rem + max(1rem, env(safe-area-inset-top))) max(2rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left)); flex-direction: column; justify-content: center; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(circle at 88% 10%, rgba(255,255,255,.1), transparent 30%), linear-gradient(145deg, #86ad99 0%, #78a18c 52%, #668f79 100%); counter-reset: mobile-nav; clip-path: circle(0 at calc(100% - 3.375rem) calc(env(safe-area-inset-top) + 1.75rem)); opacity: 0; visibility: hidden; pointer-events: none; transition: clip-path .62s cubic-bezier(.72, 0, .18, 1), opacity .16s ease .38s, visibility 0s linear .62s; will-change: clip-path; } .static-mobile-menu.is-visible { clip-path: circle(150vmax at calc(100% - 3.375rem) calc(env(safe-area-inset-top) + 1.75rem)); opacity: 1; visibility: visible; pointer-events: auto; transition: clip-path .62s cubic-bezier(.72, 0, .18, 1), opacity .2s ease, visibility 0s; } .static-mobile-menu.is-closing { transition: clip-path .52s cubic-bezier(.4, 0, .2, 1), opacity .16s ease .3s, visibility 0s linear .52s; } .static-mobile-menu > a { counter-increment: mobile-nav; display: flex; align-items: center; width: 100%; min-height: clamp(3rem, 7svh, 4rem); padding: .35rem 0; border-top: 1px solid rgba(255,255,255,.14); color: white; font-size: clamp(1.35rem, 5.2vw, 2.15rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.05; text-transform: none; opacity: 0; transform: translate3d(0, .8rem, 0) scale(.99); will-change: opacity, transform; } .static-mobile-menu.is-visible > a { animation: mobile-menu-link-reveal .52s cubic-bezier(.22, 1, .36, 1) both; } .static-mobile-menu.is-visible > a:nth-child(1) { animation-delay: .18s; } .static-mobile-menu.is-visible > a:nth-child(2) { animation-delay: .25s; } .static-mobile-menu.is-visible > a:nth-child(3) { animation-delay: .32s; } .static-mobile-menu.is-visible > a:nth-child(4) { animation-delay: .39s; } .static-mobile-menu.is-visible > a:nth-child(5) { animation-delay: .46s; } .static-mobile-menu.is-visible > a:nth-child(6) { animation-delay: .55s; } .static-mobile-menu.is-closing > a { animation: mobile-menu-link-hide .26s cubic-bezier(.55, 0, 1, .45) both; } .static-mobile-menu.is-closing > a:nth-child(6) { animation-delay: 0s; } .static-mobile-menu.is-closing > a:nth-child(5) { animation-delay: .035s; } .static-mobile-menu.is-closing > a:nth-child(4) { animation-delay: .07s; } .static-mobile-menu.is-closing > a:nth-child(3) { animation-delay: .105s; } .static-mobile-menu.is-closing > a:nth-child(2) { animation-delay: .14s; } .static-mobile-menu.is-closing > a:nth-child(1) { animation-delay: .175s; } .static-mobile-menu > a:focus-visible { outline: 1px solid rgba(255,255,255,.88); outline-offset: -1px; border-radius: .2rem; } .static-mobile-menu > a:not(.nav-cta)::before { content: "0" counter(mobile-nav); width: 2.25rem; flex: 0 0 2.25rem; color: rgba(255,255,255,.42); font-size: .625rem; font-weight: 500; letter-spacing: .12em; } .static-mobile-menu > .nav-cta { justify-content: center; min-height: 3rem; margin-top: 1rem; padding: .7rem 1.1rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: white; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } @keyframes mobile-menu-link-reveal { from { opacity: 0; transform: translate3d(0, .8rem, 0) scale(.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes mobile-menu-link-hide { from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0; transform: translate3d(0, -.55rem, 0) scale(.99); } } .section-transition { position: fixed; z-index: 500; inset: 0; background: radial-gradient(circle at 72% 24%, rgba(120,161,140,.18), transparent 30%), #101513; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; } .section-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; } html.is-instant-navigation { scroll-behavior: auto !important; } @media (max-width: 900px) { .static-mobile-menu:not([hidden]) { display: flex !important; } } /* First mobile impression: the three navigation surfaces enter from their nearest edge and settle from a soft, compressed shape into their circles. */ @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { html.mobile-entry-pending .main-nav:not(.is-scrolled) .nav-inner > a { animation: mobile-entry-logo-surface 1.05s cubic-bezier(.16, 1, .3, 1) .06s both; } html.mobile-entry-pending .main-nav:not(.is-scrolled) .menu-button { animation: mobile-entry-menu-surface .98s cubic-bezier(.16, 1, .3, 1) .18s both; } html.mobile-entry-pending .hero-start:not(.is-open):not(.is-return):not(.is-footer) { animation: mobile-entry-contact-surface 1.08s cubic-bezier(.16, 1, .3, 1) .34s both; } html.mobile-entry-pending .main-nav:not(.is-scrolled) .nav-logo-display { animation: mobile-entry-logo-copy .62s cubic-bezier(.22, 1, .36, 1) .55s both; } /* The white strip is a separate scrolled state, not the final frame of the circular logo surface. Keep it rectangular even when a restored scroll position is detected while the entry sequence is still running. */ html.mobile-entry-pending .main-nav.is-scrolled .nav-inner > a { border-radius: 0; opacity: 1; transform: none; animation: none !important; transition: none !important; } html.mobile-entry-pending .main-nav.is-scrolled .nav-logo-display { opacity: 1; transform: none; animation: none !important; transition: none !important; } html.mobile-entry-settling .nav-inner > a, html.mobile-entry-settling .menu-button, html.mobile-entry-settling .hero-start, html.mobile-entry-settling .nav-logo-display { animation: none !important; transition: none !important; } @keyframes mobile-entry-logo-surface { 0% { border-radius: 35% 65% 58% 42% / 42% 38% 62% 58%; opacity: .45; transform: translate3d(-28vw, -24svh, 0) scale(.5, .7) rotate(-7deg); } 100% { border-radius: 50%; opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); } } @keyframes mobile-entry-menu-surface { 0% { border-radius: 62% 38% 45% 55% / 39% 53% 47% 61%; opacity: .42; transform: translate3d(26vw, -28svh, 0) scale(.48, .72) rotate(8deg); } 100% { border-radius: 50%; opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); } } @keyframes mobile-entry-contact-surface { 0% { border-radius: 70% 70% 0 0 / 100% 100% 0 0; opacity: .48; transform: translate3d(0, 100%, 0) scaleY(.62); } 100% { border-radius: 0; opacity: 1; transform: translate3d(0, 0, 0) scaleY(1); } } @keyframes mobile-entry-logo-copy { from { opacity: 0; transform: translate3d(-.8rem, -.35rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } } @media (min-width: 901px) { .static-mobile-menu { display: none !important; } } .hero-stage { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 77% 24%, rgba(120,161,140,.13), transparent 27%), radial-gradient(circle at 22% 72%, rgba(120,161,140,.07), transparent 34%), linear-gradient(145deg, #1d2421 0%, #141917 58%, #0d100f 100%); } .hero-stage::before { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px); background-size: 8rem 8rem; mask-image: linear-gradient(to bottom, transparent, black 12%, black 90%, transparent); pointer-events: none; } .hero-stage::after { content: ""; position: absolute; z-index: 2; right: 7vw; top: 68%; width: min(54vw, 760px); aspect-ratio: 1; border: 1px solid rgba(120,161,140,.28); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(120,161,140,.04), 0 0 0 14vw rgba(120,161,140,.025); transform: translateY(-50%); pointer-events: none; } .home-hero { position: relative; z-index: 4; height: 100svh; min-height: 700px; overflow: hidden; background: transparent; color: white; } .home-hero--intro { isolation: isolate; } .home-hero .hero-portrait { display: block; position: absolute; inset: 0; width: 100%; height: 108%; max-width: none; object-fit: cover; object-position: center 44%; } .home-hero .hero-shade { position: absolute; inset: 0; } .hero-location { position: absolute; z-index: 2; top: 6.25rem; right: max(1.5rem, calc((100vw - 1400px) / 2)); display: grid; gap: .35rem; text-align: right; color: rgba(255,255,255,.65); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 1440px) { .hero-location { display: none; } } .hero-content { position: absolute; z-index: 2; left: max(1.5rem, calc((100vw - 1400px) / 2)); right: 1.5rem; bottom: 8vh; max-width: 62rem; } .hero-kicker { display: block; margin-bottom: 1.5rem; color: rgba(255,255,255,.66); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; } .hero-content h1 { font-size: clamp(2.7rem, 6vw, 5.7rem); font-weight: 300; letter-spacing: -.045em; line-height: .98; text-wrap: balance; } .hero-content h1 em { color: #a8c7b6; font-style: normal; } .hero-content p { max-width: 42rem; margin-top: 1.5rem; color: rgba(255,255,255,.8); font-size: clamp(.95rem, 1.3vw, 1.1rem); font-weight: 300; line-height: 1.65; } .hero-rule { width: min(30rem, 70vw); height: 1px; margin-top: 2rem; background: linear-gradient(90deg, var(--primary), rgba(255,255,255,.14)); } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } .button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: fit-content; padding: .9rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-size: .6875rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; transition: .2s; } .button--light { background: white; color: #222; } .button--light:hover { background: #a8c7b6; } .button--ghost { border-color: rgba(255,255,255,.34); color: white; } .button--ghost:hover { background: rgba(255,255,255,.1); } .button--dark { background: var(--foreground); color: var(--background); cursor: pointer; } .button--dark:hover { background: var(--primary); } .positioning-section { position: relative; padding: 0; background: transparent; } .positioning-media { position: relative; min-height: min(78vw, 820px); overflow: hidden; } .positioning-portrait { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: transparent; } .positioning-art { --portrait-entry-offset: 4.5rem; position: absolute; top: 43%; right: -4%; bottom: auto; left: auto; width: min(92vw, 1580px); height: auto; aspect-ratio: 1360 / 768; max-width: none; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%); transform: translate3d(0, calc(-50% + var(--portrait-parallax, 0px) + var(--portrait-entry-offset)), 0) scale(1.03); transform-origin: 79% 50%; backface-visibility: hidden; pointer-events: none; will-change: transform; } .positioning-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(12,17,15,.38) 0%, rgba(12,17,15,.16) 32%, rgba(12,17,15,.04) 48%, transparent 60%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%); } .positioning-copy { position: absolute; z-index: 3; top: 50%; left: max(1.5rem, calc((100vw - 1400px) / 2)); width: min(42rem, 47vw); transform: translateY(-50%); color: white; } .positioning-copy h2 { margin-top: 1.5rem; font-size: clamp(2rem, 4.2vw, 4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; } .positioning-copy p { max-width: 38rem; margin-top: 2rem; color: rgba(255,255,255,.74); font-size: 1rem; font-weight: 300; line-height: 1.75; } .positioning-copy ul { display: grid; gap: .8rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .8rem; font-weight: 300; } .positioning-copy li { display: flex; align-items: center; gap: .8rem; } .positioning-copy li::before { content: ""; width: 1.5rem; height: 1px; background: var(--primary); } @media (min-width: 641px) { .positioning-media, .positioning-portrait { overflow: visible; } } @media (min-width: 1024px) { .positioning-copy h2 span { display: block; } } .services-section { padding: 9rem 0; background: var(--secondary); } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 4.5rem; } .section-heading h2, .relationship-intro h2, .about-copy h2, .clients-grid h2, .contact-grid h2 { margin-top: 1.5rem; font-size: clamp(2.1rem, 4vw, 3.8rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; } .section-heading > p { max-width: 23rem; text-align: right; color: var(--muted-foreground); font-size: .75rem; letter-spacing: .08em; line-height: 1.65; text-transform: uppercase; } .service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; } .service-card { border-radius: .5rem; background: transparent; color: var(--foreground); } .relationship-section { padding: 9rem 0; background: var(--background); } .relationship-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 10%; align-items: start; } .relationship-intro > p { max-width: 36rem; margin-top: 2rem; color: var(--muted-foreground); font-weight: 300; line-height: 1.75; } .relationship-action { margin-top: 2rem; } .relationship-points article { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--border); } .relationship-points article > span { color: var(--primary); font-size: .6875rem; letter-spacing: .12em; } .relationship-points h3 { font-size: 1.25rem; font-weight: 400; } .relationship-points p { margin-top: .65rem; color: var(--muted-foreground); font-size: .9rem; font-weight: 300; line-height: 1.65; } .quick-contact { padding: clamp(4.5rem, 7vw, 7rem) 0; } .quick-contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 4fr); gap: clamp(4rem, 9vw, 9rem); align-items: center; } .quick-contact__intro > h2 { margin-top: 1.5rem; } .quick-contact__intro > p { max-width: 44rem; margin-top: 1.35rem; color: var(--muted-foreground); font-weight: 300; line-height: 1.75; } .quick-contact__intro > p:first-of-type { margin-top: 2rem; } .quick-contact__center { padding: 2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .quick-contact__label { display: block; color: var(--primary); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .quick-contact__phone { display: block; width: fit-content; margin-top: .85rem; color: var(--foreground); font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(2.35rem, 4vw, 4rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; } .quick-contact__phone:hover { color: var(--primary); } .quick-contact__center > p { max-width: 31rem; margin-top: 1.25rem; color: var(--muted-foreground); font-size: .9rem; font-weight: 300; line-height: 1.65; } .quick-contact__whatsapp { margin-top: 1.75rem; } .quick-contact__email { display: block; width: fit-content; margin-top: 1.25rem; color: var(--muted-foreground); font-size: .75rem; text-decoration: underline; text-underline-offset: .25em; } .quick-contact__email:hover { color: var(--primary); } .digital-continuum { --digital-network-shift: 0px; --digital-geometry-shift: 0px; position: relative; isolation: isolate; overflow: hidden; background: var(--foreground); } .digital-continuum::before { position: absolute; z-index: -3; top: 0; right: 0; left: 0; height: clamp(62rem, 92vw, 88rem); background: linear-gradient(180deg, rgba(120,161,140,.94) 0%, rgba(120,161,140,.88) 36%, rgba(74,101,87,.66) 57%, rgba(35,35,35,.82) 78%, var(--foreground) 96%); content: ""; pointer-events: none; } .digital-continuum__network { position: absolute; z-index: -2; top: -5rem; left: -3%; width: 106%; height: clamp(66rem, 98vw, 92rem); max-width: none; object-fit: contain; object-position: right top; opacity: 1; mix-blend-mode: screen; filter: none; transform: translate3d(0, var(--digital-network-shift), 0); transform-origin: 50% 18%; will-change: transform; pointer-events: none; } .digital-continuum__geometry { position: absolute; z-index: -1; inset: 0; transform: translate3d(0, var(--digital-geometry-shift), 0); will-change: transform; pointer-events: none; } .digital-continuum__geometry span { position: absolute; display: block; border: 1px solid rgba(120,161,140,.48); } .digital-continuum__geometry span:nth-child(1) { top: clamp(30rem, 39vw, 41rem); right: -8vw; width: min(58vw, 62rem); height: clamp(10rem, 17vw, 18rem); background: linear-gradient(135deg, rgba(120,161,140,.18), transparent 62%); clip-path: polygon(14% 0, 100% 0, 83% 100%, 0 74%); } .digital-continuum__geometry span:nth-child(2) { top: clamp(43rem, 54vw, 58rem); left: -7vw; width: 68vw; height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--primary) 18%, var(--primary) 78%, transparent); transform: rotate(-5deg); transform-origin: center; } .digital-continuum__geometry span:nth-child(3) { top: clamp(48rem, 62vw, 66rem); right: 11vw; width: clamp(12rem, 21vw, 22rem); aspect-ratio: 1; border-radius: 50%; opacity: .58; } .relationship-statement { position: relative; min-height: 46rem; padding: clamp(6rem, 8vw, 8.5rem) max(1.5rem, calc((100vw - 1400px) / 2)) clamp(10rem, 14vw, 15rem); color: #102018; } .relationship-statement__content { width: min(100%, 1400px); margin-inline: auto; } .portfolio-section { position: relative; padding: 0; background: transparent; color: var(--background); } .portfolio-projects { position: relative; z-index: 1; padding: 4.5rem 0 18.5rem; background: radial-gradient(circle at 84% 18%, rgba(120,161,140,.17), transparent 28%), #18201d; } .digital-bridge__statement { width: 100%; margin: 0; border-top: 1px solid var(--primary); border-bottom: 1px solid rgba(120,161,140,.46); background: linear-gradient(90deg, rgba(20,24,22,.26), rgba(20,24,22,.36)); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .digital-bridge__inner { width: min(100% - 3rem, 1400px); margin-inline: auto; padding: 2rem 0 clamp(3rem, 6vw, 6rem); } .digital-bridge__inner > span { align-self: start; color: var(--primary); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; } .digital-bridge__inner > .section-display-title { margin-top: 1.5rem; color: rgba(255,255,255,.92); } .digital-bridge__statement p { max-width: 58rem; color: rgba(255,255,255,.92); font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(2.3rem, 4.6vw, 4.8rem); font-weight: 400; letter-spacing: -.04em; line-height: .92; } .digital-bridge__statement strong { color: var(--primary); font-weight: 400; } .digital-bridge__statement em { color: #d8eee3; font-style: normal; } @media (max-width: 767px) { .digital-bridge__inner { width: min(100% - 2rem, 1400px); padding: 1.5rem 0 3.5rem; } .digital-bridge__statement p { font-size: clamp(2.15rem, 10.5vw, 3.2rem); } .portfolio-projects { padding: 3rem 0 15.5rem; } } .about-section { padding: 9rem 0; background: var(--background); } .about-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 8%; align-items: center; } .about-image { overflow: hidden; min-height: 44rem; border-radius: .5rem; background: #111; } .about-image img { width: 100%; height: 100%; min-height: 44rem; object-fit: cover; object-position: 64% center; } .about-copy > p { margin-top: 1.5rem; color: var(--muted-foreground); font-weight: 300; line-height: 1.75; } .about-copy dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .about-copy dt { color: var(--muted-foreground); font-size: .625rem; letter-spacing: .11em; text-transform: uppercase; } .about-copy dd { margin-top: .6rem; font-size: 1.05rem; font-weight: 300; } .clients-section { padding: 9rem 0; background: var(--secondary); } .clients-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 10%; } .clients-grid ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; } .clients-grid li { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; font-weight: 300; } .clients-grid li span { color: var(--primary); font-size: .625rem; letter-spacing: .1em; } .contact-section { padding: 9rem 0; background: var(--background); } .contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 10%; } .contact-grid > div > p { max-width: 32rem; margin-top: 2rem; color: var(--muted-foreground); font-weight: 300; line-height: 1.7; } .contact-data { display: grid; gap: .7rem; margin-top: 2.5rem; font-size: .9rem; } .contact-data a:hover { color: var(--primary); } .contact-grid form { display: grid; gap: 1.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .contact-grid label { color: var(--muted-foreground); font-size: .625rem; letter-spacing: .11em; text-transform: uppercase; } .contact-grid label span { color: var(--primary); } .contact-grid label small { font-size: inherit; opacity: .7; } .contact-grid input, .contact-grid textarea, .contact-grid select { display: block; width: 100%; margin-top: .4rem; padding: .75rem 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--foreground); font-size: .9rem; font-weight: 300; letter-spacing: 0; text-transform: none; outline: none; } .contact-grid input:focus, .contact-grid textarea:focus, .contact-grid select:focus { border-color: var(--primary); } .form-note { max-width: 40rem; color: var(--muted-foreground); font-size: .6875rem; line-height: 1.6; } .form-note a { text-decoration: underline; text-underline-offset: .2em; } /* Shared menu control: used by the navigation and website-reference modal. */ :root { --menu-circle-size: clamp(9rem, 38vw, 12.875rem); --menu-circle-top: calc(-1 * clamp(2.106875rem, 9.1vw, 3.75rem)); --menu-circle-right: calc(-1 * clamp(1.981875rem, 7.7vw, 3.2rem)); } .menu-button { position: fixed; top: calc(env(safe-area-inset-top) + var(--menu-circle-top)); right: var(--menu-circle-right); width: var(--menu-circle-size); height: var(--menu-circle-size); border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(120,161,140,.58); color: #fff; box-shadow: inset 0 0 0 1px rgba(120,161,140,.14), 0 .25rem .8rem rgba(36,36,36,.08); -webkit-backdrop-filter: blur(.55rem) saturate(1.12); backdrop-filter: blur(.55rem) saturate(1.12); cursor: pointer; transition: background-color .35s ease, transform .2s ease; } .menu-button:hover, .menu-button:focus-visible { background: rgba(120,161,140,.68); } .main-nav .menu-button, .main-nav .menu-button:hover, .main-nav .menu-button:focus-visible { background: #78a18c; -webkit-backdrop-filter: none; backdrop-filter: none; } .main-nav.is-scrolled:not(.is-menu-open) .menu-button { border-color: rgba(120,161,140,.76); background: #78a18c; -webkit-backdrop-filter: none; backdrop-filter: none; } .main-nav.is-scrolled:not(.is-menu-open) .menu-button:hover, .main-nav.is-scrolled:not(.is-menu-open) .menu-button:focus-visible { background: var(--primary); } .menu-button span { display: block; width: 1.45rem; height: 1.5px; border-radius: 999px; background: currentColor; box-shadow: 0 1px 1px rgba(20,30,25,.18); } .menu-button[aria-expanded="false"] span { opacity: 0; } .main-nav .menu-button span { position: absolute; top: calc(clamp(2.106875rem, 9.1vw, 3.75rem) + 1.75rem); left: calc(var(--menu-circle-size) + var(--menu-circle-right) - 3rem); display: block; width: 2rem; height: 1.5px; opacity: 0; transform-origin: center; transition: top .56s cubic-bezier(.32, .72, .3, 1), left .56s cubic-bezier(.32, .72, .3, 1), opacity .22s ease, transform .46s cubic-bezier(.32, .72, .3, 1); } .main-nav .menu-button span:nth-child(1) { transform: translateY(-.55rem); } .main-nav .menu-button span:nth-child(2) { transform: none; } .main-nav .menu-button span:nth-child(3) { transform: translateY(.55rem); } .main-nav .menu-button.is-close-mode span { opacity: 1; } .main-nav.is-scrolled .menu-button span { left: calc(var(--menu-circle-size) + var(--menu-circle-right) - 4.5rem); } .main-nav .menu-button.is-close-mode span:nth-child(2) { opacity: 0; } .main-nav .menu-button.is-close-mode span:nth-child(1) { transform: rotate(45deg); } .main-nav .menu-button.is-close-mode span:nth-child(3) { transform: rotate(-45deg); } .menu-button::before, .menu-button::after { content: none; } .menu-button.is-reference-close span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-button.is-reference-close span:nth-child(2) { opacity: 0; } .menu-button.is-reference-close span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .fullscreen-reference > .menu-button { z-index: 4; display: flex; } .fullscreen-reference > .menu-button span { position: relative; top: .75rem; left: -.85rem; } @media (max-width: 900px) { html { background: #000; } html.mobile-safe-area-green { background: #78a18c; } html.mobile-safe-area-modal { background: var(--background); } body::after { content: ""; position: fixed; z-index: 235; right: 0; bottom: 0; left: 0; height: env(safe-area-inset-bottom); background: #000; pointer-events: none; transform: translateZ(0); } body.mobile-safe-area-green::after { background: #78a18c; } body.mobile-safe-area-modal::after { background: var(--background); } :root { --nav-logo-surface-size: clamp(38.35rem, 191.5vw, 79.25rem); --nav-logo-folded-left: calc(-1 * clamp(21.675rem, 107.75vw, 42.875rem)); --nav-logo-folded-height: clamp(8.75rem, 30vw, 12rem); } .desktop-nav { display: none; } .main-nav, .main-nav.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-inner { width: 100%; min-height: 0; margin-inline: 0; padding: 0; } .nav-inner > a { position: fixed; z-index: 2; top: calc(env(safe-area-inset-top) - clamp(33.4rem, 166.8vw, 69rem)); left: calc(-1 * clamp(14.65rem, 73.1vw, 30.25rem)); display: flex; align-items: center; justify-content: center; width: var(--nav-logo-surface-size); height: var(--nav-logo-surface-size); margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(249,248,246,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 .25rem .8rem rgba(36,36,36,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: top .64s cubic-bezier(.32, .72, .3, 1), left .64s cubic-bezier(.32, .72, .3, 1), width .64s cubic-bezier(.32, .72, .3, 1), height .64s cubic-bezier(.32, .72, .3, 1), border-radius .64s cubic-bezier(.32, .72, .3, 1), background-color .25s ease, box-shadow .25s ease, transform .18s cubic-bezier(.2, .7,.3, 1); will-change: top, left, width, height, border-radius; contain: layout paint; backface-visibility: hidden; } .main-nav.is-scrolled .nav-inner > a { top: 0; left: 0; width: 100vw; height: calc(env(safe-area-inset-top) + 40px); border-color: rgba(255,255,255,.72); border-radius: 0; background: rgba(249,248,246,.94); box-shadow: 0 1px rgba(36,36,36,.07); } .nav-inner > a .site-logo { display: none; } .nav-logo-display { position: fixed; z-index: 3; top: calc(env(safe-area-inset-top) + clamp(1.55rem, 8.6vw, 3.6rem)); left: clamp(.55rem, 3.6vw, 1.5rem); display: inline-flex; font-size: clamp(1.55rem, 6.2vw, 2.57rem); pointer-events: none; transition: top .64s cubic-bezier(.32, .72, .3, 1), left .64s cubic-bezier(.32, .72, .3, 1), font-size .64s cubic-bezier(.32, .72, .3, 1), opacity .24s ease; } .main-nav.is-scrolled .nav-logo-display { top: calc(env(safe-area-inset-top) + 12px); left: max(.75rem, env(safe-area-inset-left)); font-size: 1rem; opacity: 1; } .nav-logo-display .site-logo__name { display: block; max-width: 18rem; margin-bottom: -.18em; padding-bottom: .18em; overflow: hidden; opacity: 1; transition: max-width .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, transform .52s cubic-bezier(.22, 1, .36, 1); } .nav-logo-display .site-logo__suffix { transition: margin-left .45s ease, transform .52s cubic-bezier(.22, 1, .36, 1); } .main-nav .site-logo--nav .site-logo__name, .main-nav.is-menu-open .site-logo--nav .site-logo__name { color: #171717; } .static-mobile-menu { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } .menu-button { display: flex; } .main-nav:not(.is-scrolled) .menu-button { top: calc(env(safe-area-inset-top) - clamp(8.5rem, 24vw, 10.25rem)); right: calc(-1 * clamp(7.75rem, 28vw, 11.5rem) + 1.5rem); width: clamp(15.4275rem, 62.2vw, 25.75rem); height: clamp(15.4275rem, 62.2vw, 25.75rem); } .main-nav .menu-button { transition: top .56s cubic-bezier(.32, .72, .3, 1), right .56s cubic-bezier(.32, .72, .3, 1), width .56s cubic-bezier(.32, .72, .3, 1), height .56s cubic-bezier(.32, .72, .3, 1), background-color .3s ease, transform .18s cubic-bezier(.2, .7, .3, 1); transform-origin: center; will-change: top, right, width, height; contain: layout paint; backface-visibility: hidden; } .main-nav:not(.is-scrolled) .menu-button span { top: calc(clamp(8.5rem, 24vw, 10.25rem) + 1.75rem); left: calc(clamp(15.4275rem, 62.2vw, 25.75rem) - clamp(7.75rem, 28vw, 11.5rem) - 3rem); } .nav-inner > a { transform-origin: center; } .nav-inner > a.is-nav-ball-pressed, .menu-button.is-nav-ball-pressed { transform: scale(1.045); } .main-nav.is-scrolled .nav-inner > a.is-nav-ball-pressed { transform: none; } .main-nav.is-menu-open .nav-inner > a, .main-nav.is-menu-open .menu-button, .main-nav.is-menu-closing .nav-inner > a, .main-nav.is-menu-closing .menu-button { -webkit-backdrop-filter: none; backdrop-filter: none; } .main-nav.is-scrolled:not(.is-menu-open) .menu-button, .main-nav.is-scrolled:not(.is-menu-open) .menu-button:hover, .main-nav.is-scrolled:not(.is-menu-open) .menu-button:focus-visible { border-color: rgba(255,255,255,.24); background: #78a18c; -webkit-backdrop-filter: none; backdrop-filter: none; } .service-grid { grid-template-columns: 1fr 1fr; } .relationship-grid, .clients-grid, .contact-grid { grid-template-columns: 1fr; gap: 4rem; } .quick-contact__grid { grid-template-columns: 1fr; gap: 3.5rem; } .about-grid { grid-template-columns: 1fr; gap: 4rem; } .about-image, .about-image img { min-height: 36rem; } } @media (max-width: 900px) and (hover: hover) { .menu-button:hover { transform: scale(1.045); } } /* Keep the opened mobile menu visible on short landscape screens. */ @media (max-width: 900px) and (max-height: 600px) and (orientation: landscape) { .static-mobile-menu { justify-content: center; padding: max(3.25rem, calc(env(safe-area-inset-top) + 2.75rem)) max(2rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left)); } .static-mobile-menu > a { min-height: clamp(2.05rem, 9svh, 2.45rem); padding: .15rem 0; font-size: clamp(.95rem, 4.2svh, 1.125rem); line-height: 1; } .static-mobile-menu > a:not(.nav-cta)::before { width: 1.75rem; flex-basis: 1.75rem; font-size: .55rem; } .static-mobile-menu > .nav-cta { min-height: 2.25rem; margin-top: .45rem; padding: .45rem .9rem; font-size: .625rem; } } @media (max-width: 420px) { :root { --menu-circle-right: -3rem; } } @media (max-width: 640px) { .section-shell { width: min(100% - 2rem, 1400px); } .hero-stage::after { top: 57%; right: -25vw; width: 105vw; } .home-hero { min-height: 680px; } .home-hero .hero-portrait { height: 100%; object-position: 61% center; } .hero-location { display: none; } .hero-content { left: 1rem; right: 1rem; bottom: 3rem; } .hero-content h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); } .hero-content p { max-width: 31rem; font-size: .9rem; } .hero-actions { align-items: stretch; } .button { width: 100%; } .positioning-section { padding-top: 0; } .positioning-media { min-height: 0; overflow: visible; background: transparent; } .positioning-portrait { position: relative; inset: auto; aspect-ratio: 5/4; border-bottom: 1px solid rgba(120,161,140,.35); } .positioning-art {--portrait-entry-offset: 0px;inset: 1rem -20% auto auto;width: 175%;height: auto;aspect-ratio: 1360/768;transform: translate3d(0, var(--portrait-parallax, 0px), 0) scale(1.06);transform-origin: 72% 0;-webkit-mask-image: none;mask-image: none;} .positioning-shade { display: none; } .positioning-copy { position: relative; top: auto; left: auto; width: auto; transform: none; padding: 2.5rem 1rem 4rem; color: white; } .positioning-copy .eyebrow { color: rgba(255,255,255,.62); } .positioning-copy h2 { font-size: 2.35rem; } .positioning-copy p { color: rgba(255,255,255,.74); font-size: .92rem; } .positioning-copy ul { border-color: rgba(255,255,255,.2); font-size: .76rem; } .services-section, .relationship-section, .about-section, .clients-section, .contact-section { padding-top: 6rem; } .services-section, .portfolio-section, .about-section, .clients-section, .contact-section { padding-bottom: 6rem; } .portfolio-section { padding-bottom: 0; } .relationship-section { padding-bottom: 6rem; } .quick-contact { padding-top: 4.5rem; padding-bottom: 4.5rem; } .quick-contact__phone { font-size: clamp(2.25rem, 11vw, 3rem); } .section-heading { align-items: start; flex-direction: column; margin-bottom: 3rem; } .section-heading > p { text-align: left; } .section-heading h2, .relationship-intro h2, .about-copy h2, .clients-grid h2, .contact-grid h2 { font-size: 2.5rem; } .service-grid { grid-template-columns: 1fr; } .relationship-statement { min-height: 0; margin-top: 0; padding: 5rem 1rem 9rem; } .about-image, .about-image img { min-height: 27rem; } .about-copy dl { grid-template-columns: 1fr; } .clients-grid ul, .form-row { grid-template-columns: 1fr; } } /* Mobile contact center: use the same bottom-band model as desktop. */ @media (max-width: 900px) { .hero-start:not(.is-return), .hero-start:not(.is-return).is-open { --mobile-contact-folded-height: 3rem; --mobile-contact-open-height: min(82svh, 42rem); right: 0; bottom: 0; left: 0; width: 100%; height: var(--mobile-contact-folded-height); overflow: hidden; border: 0; border-top: 1px solid rgba(255,255,255,.32); border-radius: 0; box-shadow: 0 -.35rem 1.4rem rgba(36,36,36,.12), inset 0 1px rgba(255,255,255,.14); transform: none; transform-origin: center bottom; transition: height .58s cubic-bezier(.32, .72, .3, 1), border-radius .42s ease, box-shadow .35s ease; will-change: height; } .hero-start:not(.is-return).is-open { height: var(--mobile-contact-open-height); border-radius: 1.3rem 1.3rem 0 0; box-shadow: 0 -1rem 2.8rem rgba(36,36,36,.18), inset 0 1px rgba(255,255,255,.16); } .hero-start:not(.is-return).is-minimized { height: 4px; overflow: visible; border-radius: 0; box-shadow: 0 -.12rem .65rem rgba(36,36,36,.12), inset 0 1px rgba(255,255,255,.16); } .hero-start:not(.is-return) .hero-start__toggle { z-index: 4; inset: 0 0 auto; width: 100%; height: var(--mobile-contact-folded-height); padding: 0; place-items: center; border-radius: 0; cursor: pointer; transform: none; } .hero-start:not(.is-return) .hero-start__toggle::after { content: none; animation: none; } .hero-start:not(.is-return) .hero-start__state-label { position: absolute; top: 50%; left: 50%; display: grid; transform: translate(-50%, -50%); pointer-events: none; } .hero-start:not(.is-return) .hero-start__state-label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: opacity .26s ease, transform .36s cubic-bezier(.22, 1, .36, 1); } .hero-start:not(.is-return) .hero-start__state-label b { font-size: .88rem; font-weight: 300; } .hero-start:not(.is-return) .hero-start__state-open { opacity: .9; transform: translateY(0); } .hero-start:not(.is-return) .hero-start__state-close { opacity: 0; transform: translateY(.4rem); } .hero-start:not(.is-return).is-open .hero-start__state-open { opacity: 0; transform: translateY(-.4rem); } .hero-start:not(.is-return).is-open .hero-start__state-close { opacity: .94; transform: translateY(0); } .hero-start:not(.is-return).is-minimized .hero-start__toggle { inset: auto max(1rem, env(safe-area-inset-right)) 0 auto; width: 7.75rem; height: 2.45rem; border: 1px solid rgba(255,255,255,.32); border-bottom: 0; border-radius: 1.15rem 1.15rem 0 0; background: #78a18c; box-shadow: 0 -.38rem 1rem rgba(36,36,36,.14), inset 0 1px rgba(255,255,255,.15); transform-origin: center bottom; animation: contact-center-handle-in .46s cubic-bezier(.22, 1, .36, 1) both; } .hero-start:not(.is-return) .hero-start__panel { top: 3.45rem; left: 50%; display: block; width: min(38rem, calc(100vw - 2rem)); max-height: calc(var(--mobile-contact-open-height) - 4.2rem); overflow-x: hidden; overflow-y: auto; padding: 0 0 max(1.5rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; scrollbar-width: thin; } .hero-start__panel-mobile { display: none; } .hero-start:not(.is-return) .desktop-contact { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; color: #fff; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__brand { position: static; display: inline-flex; width: max-content; min-height: 0; margin: 0 0 -.45rem; padding: 0; border: 0; color: #fff; font-size: 1.2rem; font-weight: 400; letter-spacing: -.063em; line-height: 1; text-transform: none; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__brand .site-logo__name, .hero-start:not(.is-return) .hero-start__panel .desktop-contact__brand .site-logo__suffix { color: #fff; } .desktop-contact__direct { display: flex; min-width: 0; flex-direction: column; padding: 0 0 2rem; border-bottom: 1px solid rgba(255,255,255,.25); } .desktop-contact__eyebrow { display: block; color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 600; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; } .desktop-contact__prompt { margin: .65rem 0 .2rem; color: rgba(255,255,255,.88); font-size: 1rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__phone { display: block; min-height: 0; margin: 0; padding: 0; border: 0; color: #fff; font: 300 clamp(2.1rem, 10vw, 3.25rem)/1.02 "DM Sans", sans-serif; letter-spacing: -.06em; text-transform: none; white-space: nowrap; } .desktop-contact__phone span { color: rgba(255,255,255,.58); } .desktop-contact__hint { margin: .7rem 0 1rem; color: rgba(255,255,255,.68); font-size: .84rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__mail { display: flex; min-height: 3.55rem; align-items: center; justify-content: space-between; padding: .65rem 1rem .7rem 1.05rem; border: 1px solid rgba(255,255,255,.42); border-radius: .2rem; background: rgba(255,255,255,.96); color: #335345; font-size: .96rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-transform: none; } .desktop-contact__mail small { display: block; margin-bottom: .2rem; color: #6d897b; font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .desktop-contact__quick { display: flex; min-width: 0; flex-direction: column; } .desktop-contact__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; } .desktop-contact__heading h2 { margin: .2rem 0 0; color: #fff; font: 400 clamp(1.9rem, 9vw, 2.65rem)/1 "Poiret One", "Century Gothic", sans-serif; letter-spacing: .02em; } .desktop-contact__step { display: none; } .desktop-contact__topics { min-width: 0; margin: 0 0 .7rem; padding: 0; overflow: hidden; border: 0; } .desktop-contact__topic-scroll { display: flex; gap: .45rem; padding: .1rem .75rem .55rem 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scroll-snap-type: x proximity; } .desktop-contact__topic-scroll label { flex: 0 0 auto; scroll-snap-align: start; } .desktop-contact__topic-scroll input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .desktop-contact__topic-scroll span { display: block; padding: .58rem .78rem; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: rgba(255,255,255,.82); font-size: .75rem; line-height: 1.15; white-space: nowrap; } .desktop-contact__topic-scroll input:checked + span { border-color: #fff; background: #fff; color: #335345; } .desktop-contact__message-row { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.46); border-radius: .2rem; background: rgba(255,255,255,.08); } .desktop-contact__message-row textarea { width: 100%; min-height: 6rem; resize: none; padding: .9rem 1rem; border: 0; outline: 0; background: transparent; color: #fff; font: 400 1rem/1.5 "DM Sans", sans-serif; } .desktop-contact__message-row textarea::placeholder { color: rgba(255,255,255,.72); } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__message-row button { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 0; border-top: 1px solid rgba(255,255,255,.3); background: #fff; color: #335345; font-size: .75rem; font-weight: 700; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; } .desktop-contact__note { margin: .55rem 0 0; color: rgba(255,255,255,.76); font-size: .78rem; line-height: 1.45; } .hero-start__panel .desktop-contact a::after, .hero-start__panel .desktop-contact button::after { content: none; } .hero-start:not(.is-return).is-footer { right: 0; bottom: 0; left: 0; width: 100%; height: 9.5rem; overflow: hidden; border-radius: 0; transform: none; } .hero-start:not(.is-return).is-footer .hero-start__footer { top: 1.1rem; } } /* Keep the revised editorial hierarchy last in the cascade. */ .section-display-title__base, .section-display-title__key, .portfolio-heading .section-display-title__base, .portfolio-heading .section-display-title__key, #website-title .section-display-title__base, #website-title .section-display-title__key { color: inherit; font-size: 1em !important; font-weight: 400 !important; letter-spacing: inherit; line-height: inherit; } .section-display-title__key { margin-top: .12em; } .portfolio-heading .section-display-title__base, .portfolio-heading .section-display-title__key, #website-title .section-display-title__base, #website-title .section-display-title__key { color: #fff; } .service-card { grid-template-rows: auto 1fr; } .portfolio-card__meta { grid-template-columns: auto 1fr; } @media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; gap: 2.5rem; } } /* Contact center refinement — uses the existing local typefaces unchanged. */ .phone-display, .desktop-contact__phone { display: inline-flex !important; align-items: baseline; justify-content: flex-start !important; flex-wrap: nowrap; gap: .17em; white-space: nowrap; } .phone-prefix { color: var(--primary); } .phone-main { color: inherit; } .phone-display .phone-prefix, .phone-display .phone-main { white-space: nowrap; } .desktop-contact__phone .phone-prefix { color: rgba(216, 238, 227, .64); } .desktop-contact__phone .phone-main { color: #fff; } .phone-inline { display: inline-flex; align-items: baseline; gap: .28em; } .phone-inline .phone-prefix { color: var(--primary); } .desktop-contact__topics { overflow: visible; } .desktop-contact__topic-scroll { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .48rem; padding: .1rem 0 .35rem; overflow: visible; overscroll-behavior: auto; scrollbar-width: none; scroll-snap-type: none; } .desktop-contact__topic-scroll label { flex: 0 1 auto; scroll-snap-align: none; } .hero-start__panel .desktop-contact__message-row button { width: 10.25rem; min-width: 8.75rem; gap: .65rem; padding-inline: .85rem; } .hero-start__panel .desktop-contact__message-row button > span:first-child { min-width: 0; white-space: normal; } @media (min-width: 901px) { .desktop-contact { grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); gap: clamp(1.1rem, 2vw, 2rem); } .desktop-contact__direct, .desktop-contact__quick { justify-content: center; padding: clamp(1.15rem, 2.2vw, 1.8rem); border: 1px solid rgba(255,255,255,.2); border-radius: .45rem; background: rgba(20,45,34,.13); } .desktop-contact__direct { border-right: 1px solid rgba(255,255,255,.2); } .hero-start__panel .desktop-contact__mail { width: min(100%, 27rem); } } @media (max-width: 900px) { .hero-start:not(.is-return), .hero-start:not(.is-return).is-open { --mobile-contact-open-height: min(88svh, 44rem); } .hero-start:not(.is-return) .hero-start__panel { padding-top: .15rem; } .hero-start__panel-mobile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1.1rem; } .hero-start__panel .hero-start__quick-action { display: flex; min-height: 3.45rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.5); border-radius: .35rem; background: rgba(255,255,255,.1); color: #fff; font-size: .73rem; font-weight: 650; letter-spacing: .09em; line-height: 1.1; text-transform: uppercase; box-shadow: inset 0 1px rgba(255,255,255,.08); } .hero-start__panel .hero-start__quick-action::after { content: none; } .hero-start__quick-action span { display: grid; gap: .27rem; } .hero-start__quick-action small { color: rgba(255,255,255,.6); font-size: .51rem; font-weight: 600; letter-spacing: .14em; } .hero-start__quick-action b { color: #d8eee3; font-size: 1rem; font-weight: 400; } .hero-start__panel .hero-start__quick-action:hover, .hero-start__panel .hero-start__quick-action:focus-visible { border-color: #fff; background: rgba(255,255,255,.18); outline: none; } .hero-start:not(.is-return) .desktop-contact { gap: 1rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__brand { margin: 0 0 -.05rem; font-size: 1.08rem; } .desktop-contact__direct, .desktop-contact__quick { padding: 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: .4rem; background: rgba(35,76,58,.1); } .desktop-contact__direct { border-bottom: 1px solid rgba(255,255,255,.22); } .desktop-contact__prompt { margin-top: .5rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__phone { font-size: clamp(2.15rem, 10vw, 3rem); } .desktop-contact__hint { margin: .55rem 0 .75rem; line-height: 1.45; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__mail { min-height: 2.95rem; padding: .48rem .72rem .52rem .78rem; font-size: .83rem; } .desktop-contact__mail small { margin-bottom: .12rem; font-size: .49rem; } .desktop-contact__heading { margin-bottom: .6rem; } .desktop-contact__heading h2 { font-size: clamp(1.75rem, 8.6vw, 2.35rem); } .desktop-contact__topic-scroll { gap: .42rem; padding-right: 0; } .desktop-contact__topic-scroll span { padding: .48rem .66rem; white-space: normal; font-size: .62rem; } .desktop-contact__message-row { grid-template-columns: minmax(0, 1fr) 7.75rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__message-row button { width: auto; min-width: 0; min-height: 100%; justify-content: space-between; padding: .7rem .72rem; border-top: 0; border-left: 1px solid rgba(255,255,255,.3); font-size: .64rem; } } /* Digital continuum — scalable SVG detail and a deliberate light-to-dark transition. */ .digital-continuum { --digital-network-shift: 0px; --digital-geometry-shift: 0px; background: var(--foreground); } .digital-continuum::before { height: clamp(69rem, 89vw, 86rem); background: linear-gradient(180deg, #8eae9d 0%, #78a18c 37%, #557364 61%, #303a35 79%, var(--foreground) 97%); } .digital-continuum__network { top: -4rem; left: 50%; width: max(100%, 100rem); height: clamp(68rem, 88vw, 86rem); max-width: none; opacity: .78; mix-blend-mode: screen; transform: translate3d(-50%, var(--digital-network-shift), 0); transform-origin: 50% 20%; } .digital-continuum__routes path { stroke-width: 1.15; } .digital-continuum__routes path:nth-child(2n) { stroke-width: .75; opacity: .72; } .digital-continuum__fine { opacity: .75; } .digital-continuum__fine path:nth-child(3n) { opacity: .58; } .relationship-statement { min-height: 48rem; padding-top: clamp(7rem, 9vw, 9.5rem); padding-bottom: clamp(10rem, 14vw, 14rem); } .website-feature__copy { max-width: 66rem; } .website-feature__copy h2 { max-width: 64rem; } .website-feature__text-panel { max-width: 51rem; border: 1px solid rgba(235, 248, 241, .34); border-right-color: rgba(16, 32, 24, .14); border-bottom-color: rgba(16, 32, 24, .14); background: rgba(16, 32, 24, .34); box-shadow: 1.15rem 1.15rem 0 rgba(16, 32, 24, .09); } .digital-bridge__statement { border-top-color: rgba(216, 238, 227, .48); border-bottom-color: rgba(120, 161, 140, .55); background: linear-gradient(105deg, rgba(20, 24, 22, .44), rgba(20, 24, 22, .76)), rgba(20, 24, 22, .25); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .digital-bridge__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr); column-gap: clamp(3rem, 8vw, 8rem); align-items: end; padding-top: 2.25rem; padding-bottom: clamp(4rem, 6vw, 6.5rem); } .digital-bridge__inner > span { grid-column: 1 / -1; } .digital-bridge__inner > .section-display-title { grid-column: 1; margin-top: 2rem; } .digital-bridge__statement .digital-bridge__intro { grid-column: 2; max-width: 28rem; margin: 2rem 0 .1rem; color: rgba(255,255,255,.68); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; font-size: .9rem; font-weight: 300; letter-spacing: 0; line-height: 1.75; } .website-feature__benefits { border-bottom-color: rgba(120, 161, 140, .56); background: rgba(20, 24, 22, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .website-feature__benefits article { min-height: 17rem; padding-top: 2.35rem; padding-bottom: 3rem; } .website-feature__benefits article + article { border-left-color: rgba(120,161,140,.5); } .website-feature__benefits article > span { display: inline-block; padding-bottom: .75rem; border-bottom: 1px solid rgba(120,161,140,.48); color: rgba(216,238,227,.72); } .website-feature__benefits h3 { max-width: 22rem; margin-top: 1.65rem; font-size: clamp(1.25rem, 1.7vw, 1.55rem); } .website-feature__benefits p { color: rgba(255,255,255,.61); font-size: .86rem; line-height: 1.72; } .portfolio-projects { padding-top: clamp(5rem, 7vw, 7rem); } .portfolio-heading > div > span { color: var(--primary); } @media (max-width: 900px) { .digital-continuum::before { height: 84rem; } .digital-continuum__network { top: -1rem; left: 48%; width: 94rem; height: 84rem; opacity: .7; transform: translateX(-50%); } .digital-bridge__inner { grid-template-columns: 1fr; } .digital-bridge__inner > .section-display-title, .digital-bridge__statement .digital-bridge__intro { grid-column: 1; } .digital-bridge__statement .digital-bridge__intro { margin-top: 2rem; } } @media (max-width: 767px) { .relationship-statement { padding: 5.5rem 1rem 8rem; } .website-feature__text-panel { box-shadow: .75rem .75rem 0 rgba(16,32,24,.09); } .digital-bridge__inner { padding: 1.5rem 0 4rem; } .website-feature__benefits article { min-height: 0; padding: 2.2rem 1.25rem 2.5rem; } .website-feature__benefits article + article { border-top-color: rgba(120,161,140,.5); border-left: 0; } .portfolio-projects { padding-top: 4.5rem; } } @media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) { .digital-continuum__network { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .menu-button span, .menu-button::before, .menu-button::after, .static-mobile-menu, .static-mobile-menu > a, .section-transition { transition: none !important; } .nav-inner > a, .menu-button { animation: none !important; transition: none !important; } .static-mobile-menu.is-visible > a { animation: none !important; opacity: 1; transform: none; } .positioning-art { transform: translateY(calc(-50% + var(--portrait-entry-offset))) scale(1.03); will-change: auto; } .digital-continuum__network, .digital-continuum__geometry { transform: none; will-change: auto; } } @media (max-width: 640px) and (prefers-reduced-motion: reduce) { .positioning-art { transform: scale(1.06); } } /* Dynamic project browser */ .service-browser { display: grid; gap: 2rem; } .service-filter { display: flex; flex-wrap: wrap; gap: .65rem; } .service-filter button { min-height: 2.6rem; padding: .65rem 1.15rem; border: 1px solid color-mix(in srgb, var(--foreground) 16%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--background) 86%, white); color: var(--foreground); cursor: pointer; font: inherit; font-size: .6875rem; font-weight: 500; letter-spacing: .1em; line-height: 1; text-transform: uppercase; transition: border-color .2s, background .2s, color .2s, transform .2s; } .service-filter button:hover { border-color: color-mix(in srgb, var(--foreground) 45%, transparent); transform: translateY(-1px); } .service-filter button.is-active { border-color: var(--foreground); background: var(--foreground); color: var(--background); } .service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1rem; } .service-card { grid-column: span 1; grid-row: span 1; display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--foreground); appearance: none; cursor: pointer; font: inherit; text-align: left; } .service-card[hidden] { display: none; } .service-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; } .service-card__media { position: relative; isolation: isolate; display: block; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .65rem; background: #eeede9; } .service-card--featured .service-card__media { box-shadow: none; } @property --service-edge-angle { syntax: ""; inherits: false; initial-value: 0deg; } .service-card__media::before { position: absolute; z-index: 3; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient( from var(--service-edge-angle), transparent 0 31%, color-mix(in srgb, var(--primary) 24%, transparent) 38%, color-mix(in srgb, var(--primary) 72%, white) 47%, rgba(255,255,255,.92) 50%, color-mix(in srgb, var(--primary) 72%, white) 53%, color-mix(in srgb, var(--primary) 24%, transparent) 62%, transparent 69% 100% ); content: ""; opacity: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .reference-featured-badge { position: absolute; z-index: 2; top: .85rem; right: .85rem; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 999px; background: var(--primary); color: var(--foreground); box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.2); font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .service-card__media > img { position: relative; z-index: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(.82) brightness(1.12); object-fit: cover; transform: scale(1.001); transition: filter .55s ease, transform .72s cubic-bezier(.2,.72,.18,1); } .service-card:hover .service-card__media > img, .service-card:focus-visible .service-card__media > img { filter: none; transform: scale(1.065); } .service-card:hover .service-card__media::before, .service-card:focus-visible .service-card__media::before { animation: service-edge-half-turn 1.05s cubic-bezier(.35,0,.2,1) 1 both; } @keyframes service-edge-half-turn { 0% { --service-edge-angle: 0deg; opacity: 0; } 14% { opacity: .9; } 72% { opacity: .9; } 100% { --service-edge-angle: 180deg; opacity: 0; } } .service-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 75% 20%, rgba(168,199,182,.2), transparent 32%), linear-gradient(145deg, #363b38, #171a19); } .service-card__placeholder span { color: rgba(255,255,255,.55); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; } .service-card__content { display: block; padding-top: 1.5rem; } .service-card__meta { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent); color: color-mix(in srgb, var(--foreground) 48%, transparent); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; } .service-card__content strong { display: block; margin-top: 1.2rem; color: var(--foreground); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; } .service-card__content small { display: -webkit-box; max-width: 38rem; margin-top: .75rem; overflow: hidden; color: color-mix(in srgb, var(--foreground) 64%, transparent); font-size: .88rem; font-weight: 300; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .service-empty { padding: 3rem; border: 1px dashed var(--border); border-radius: .65rem; color: var(--muted-foreground); text-align: center; } .fullscreen-reference[hidden] { display: none; } .fullscreen-reference { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 0; overflow: hidden; color: var(--primary); opacity: 0; visibility: hidden; transition: opacity .36s ease, visibility .36s ease; } .fullscreen-reference.is-visible { opacity: 1; visibility: visible; } .fullscreen-reference__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(29,36,33,.74); -webkit-backdrop-filter: blur(.7rem); backdrop-filter: blur(.7rem); cursor: pointer; } .fullscreen-reference__dialog { position: relative; z-index: 1; width: 100vw; height: 100svh; height: 100dvh; overflow: hidden; border: 0; border-radius: 0; background: #1d2421; box-shadow: none; transform: translateY(1.2rem) scale(.985); transition: transform .45s cubic-bezier(.22, 1, .36, 1); } .fullscreen-reference.is-visible .fullscreen-reference__dialog { transform: none; } .fullscreen-reference__loader { position: absolute; z-index: 2; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1rem; padding: 2rem; background: #1d2421; opacity: 1; visibility: visible; transition: opacity .42s ease .18s, visibility .42s ease .18s; } .fullscreen-reference__loader .project-modal__loader-progress { width: min(18rem, 72vw); } .fullscreen-reference.is-loaded .fullscreen-reference__loader { opacity: 0; visibility: hidden; pointer-events: none; } .fullscreen-reference__frame { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .42s ease; } .fullscreen-reference.is-loaded .fullscreen-reference__frame { opacity: 1; pointer-events: auto; } .fullscreen-reference-open { overflow: hidden; } @media (max-width: 640px) { .fullscreen-reference { padding: 0; } .fullscreen-reference__dialog { width: 100%; height: 100svh; height: 100dvh; border-radius: 0; } } .project-modal[hidden] { display: none; } .project-modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 1.5rem; } .project-modal__backdrop { position: absolute; inset: 0; background: rgba(249,248,246,.9); backdrop-filter: blur(.7rem); } .project-modal__dialog { position: relative; z-index: 1; width: min(100%, 1320px); max-height: calc(100svh - 3rem); overflow: auto; border-radius: .8rem; background: var(--background); box-shadow: 0 2rem 6rem rgba(0,0,0,.3); } .project-modal.is-assets-loading .project-modal__dialog { min-height: min(36rem, calc(100svh - 3rem)); overflow: hidden; background: #1d2421; } .project-modal__asset-loader { position: absolute; z-index: 10; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1rem; padding: 2rem; background: #1d2421; color: var(--primary); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .34s ease, visibility 0s linear .34s; } .project-modal.is-assets-loading .project-modal__asset-loader { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s; } .project-modal.is-assets-loaded .project-modal__asset-loader { opacity: 0; visibility: hidden; pointer-events: none; } .project-modal.is-assets-loaded .project-modal__asset-loader .project-modal__loader-progress > span { width: 100%; animation: none; transition: width .28s ease; } .project-modal__dialog--image { width: min(96vw, 1600px); max-height: calc(100svh - 3rem); overflow: visible; background: transparent; box-shadow: none; } .project-modal__content.project-modal__content--image { display: grid; grid-template-columns: 1fr; place-items: center; min-height: 0; } .project-modal__content.project-modal__content--image > img { display: block; max-width: 100%; max-height: calc(100svh - 3rem); border-radius: .65rem; object-fit: contain; box-shadow: 0 2rem 6rem rgba(0,0,0,.4); } .project-modal__close { position: sticky; z-index: 3; top: 1rem; left: calc(100% - 8.5rem); display: block; margin: 1rem 1rem -3.7rem auto; padding: .7rem 1rem; border: 1px solid rgba(36,36,36,.18); border-radius: 999px; background: rgba(249,248,246,.9); color: var(--foreground); box-shadow: 0 .35rem 1.5rem rgba(36,36,36,.08); cursor: pointer; font: inherit; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(.5rem); appearance: none; outline: none; } .project-modal__close:focus-visible, .project-modal__close-bottom:focus-visible { border-color: var(--primary); outline: 1px solid var(--primary); outline-offset: 2px; box-shadow: 0 .35rem 1.5rem rgba(36,36,36,.08), 0 0 0 3px rgba(120,161,140,.14); } .project-modal__content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .65fr); min-height: min(47rem, calc(100svh - 3rem)); opacity: 1; transition: opacity .32s ease .08s; } .project-modal.is-assets-loading .project-modal__content { opacity: 0; visibility: hidden; } .project-modal.is-assets-loaded .project-modal__content { opacity: 1; visibility: visible; } .project-modal__gallery { min-width: 0; padding: 0; background: transparent; } .project-modal__footer { display: none; } .project-modal__media { position: relative; overflow: hidden; min-height: 0; height: auto; border-radius: 0; background: transparent; } .project-modal__media-trigger { display: block; width: 100%; height: auto; padding: 0; border: 0; background: transparent; cursor: default; } .project-modal__media-trigger > img { display: block; width: 100%; height: auto; object-fit: contain; } .project-modal__live-frame-shell { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 34rem; overflow: hidden; background: #1d2421; } .project-modal__live-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .project-modal__live-frame-shell.is-loaded .project-modal__live-frame { opacity: 1; } .project-modal__live-loader { position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1rem; padding: 2rem; background: #1d2421; color: var(--primary); opacity: 1; visibility: visible; transition: opacity .4s ease .28s, visibility .4s ease .28s; } .project-modal__live-frame-shell.is-loaded .project-modal__live-loader { opacity: 0; visibility: hidden; } .project-modal__loader-mark { width: clamp(5rem, 12vw, 7.5rem); overflow: visible; filter: drop-shadow(0 0 24px rgba(120,161,140,.26)); } .project-modal__loader-stem { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; } .project-modal__loader-o { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 70 18; stroke-dashoffset: 88; transform: rotate(-90deg); transform-origin: 78px 64px; animation: project-loader-o-rotate .85s linear infinite; } .project-modal__loader-dot-motion { transform-box: view-box; transform-origin: 0 0; animation: project-loader-dot-hop .4s linear infinite; will-change: transform; } .project-modal__loader-dot { fill: currentColor; filter: drop-shadow(0 0 4px rgba(120,161,140,.7)); transform-box: fill-box; transform-origin: center; animation: project-loader-dot-squash .4s linear infinite; will-change: transform; } .project-modal__loader-label { color: rgba(255,255,255,.68); font-size: .62rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; } .project-modal__loader-progress { display: block; width: min(18rem, 70%); height: 1px; overflow: hidden; background: rgba(255,255,255,.16); } .project-modal__loader-progress > span { display: block; width: 0; height: 100%; background: var(--primary); box-shadow: 0 0 12px rgba(120,161,140,.65); animation: project-loader-progress 2.7s cubic-bezier(.22,1,.36,1) infinite; } .project-modal__live-frame-shell.is-loaded .project-modal__loader-progress > span { width: 100%; animation: none; transition: width .28s ease; } .project-modal__live-shield { position: absolute; z-index: 4; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: .65rem; padding: 1.4rem; border: 0; outline: none; background: linear-gradient(180deg, transparent 72%, rgba(14,18,16,.3)); color: white; cursor: zoom-in; opacity: 1; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; } .project-modal__live-shield:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); } .project-modal__tap-gesture { position: relative; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; } .project-modal__tap-gesture::before { width: .42rem; height: .42rem; border-radius: 50%; background: white; box-shadow: 0 0 0 .2rem rgba(255,255,255,.14); content: ""; } .project-modal__tap-gesture i { position: absolute; inset: .2rem; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; animation: project-live-tap 2.8s ease-out infinite; } .project-modal__tap-gesture i:nth-child(2) { animation-delay: .28s; } .project-modal__tap-label { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(17,22,20,.62); font-size: .56rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; backdrop-filter: blur(.5rem); } .project-modal__live-frame-shell:not(.is-loaded) .project-modal__tap-gesture, .project-modal__live-frame-shell:not(.is-loaded) .project-modal__tap-label { opacity: 0; } .project-modal__live-shield.is-tapped .project-modal__tap-gesture { animation: project-live-tap-nudge .42s ease both; } .project-modal__live-frame-shell.is-interactive .project-modal__live-frame { opacity: 1; pointer-events: auto; } .project-modal__live-frame-shell.is-interactive .project-modal__live-shield { opacity: 0; pointer-events: none; } .project-modal__web-screen { position: absolute; z-index: 6; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); display: grid; min-width: min(17rem, calc(100vw - 2rem)); gap: .2rem; padding: 1rem 3rem 1rem 1.1rem; border: 1px solid rgba(120,161,140,.46); border-radius: .55rem; background: rgba(18,24,21,.9); color: white; box-shadow: 0 1rem 3rem rgba(0,0,0,.26); opacity: 0; pointer-events: none; transform: translateY(-.8rem) scale(.98); transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1); backdrop-filter: blur(1rem); } .project-modal__web-screen.is-visible { opacity: 1; pointer-events: auto; transform: none; } .project-modal__web-screen-status { color: var(--primary); font-size: .56rem; font-weight: 600; letter-spacing: .15em; } .project-modal__web-screen-status i { display: inline-block; width: .42rem; height: .42rem; margin-right: .42rem; border-radius: 50%; background: #7ed69f; box-shadow: 0 0 0 .22rem rgba(126,214,159,.12); animation: project-web-status 1.8s ease-in-out infinite; } .project-modal__web-screen strong { font-family: "Poiret One", "Century Gothic", sans-serif; font-size: 1.18rem; font-weight: 400; } .project-modal__web-screen small { color: rgba(255,255,255,.58); font-size: .58rem; letter-spacing: .06em; } .project-modal__web-screen-close { position: absolute; top: .55rem; right: .55rem; display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: white; cursor: pointer; font: inherit; font-size: 1.15rem; } .project-modal__web-screen-close:hover, .project-modal__web-screen-close:focus-visible { background: var(--primary); outline: none; } .project-modal__live-frame-shell:fullscreen, .project-modal__live-frame-shell.is-fallback-fullscreen { width: 100vw; height: 100svh; min-height: 100svh; background: #fff; } .project-modal__live-frame-shell.is-fallback-fullscreen { position: fixed; z-index: 1000; inset: 0; } .live-preview-open { overflow: hidden; } @keyframes project-loader-dot-hop { 0%, 100% { transform: translateY(0); } 6% { transform: translateY(1px); } 14% { transform: translateY(-2px); } 32% { transform: translateY(-5px); } 44%, 56% { transform: translateY(-6px); } 68% { transform: translateY(-5px); } 86% { transform: translateY(-2px); } 94% { transform: translateY(0); } } @keyframes project-loader-dot-squash { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.28, .72); } 14% { transform: scale(.8, 1.22); } 32% { transform: scale(.9, 1.1); } 44%, 56% { transform: scale(1); } 68% { transform: scale(.92, 1.08); } 86% { transform: scale(.82, 1.2); } 94% { transform: scale(1.3, .7); } } @keyframes project-loader-o-rotate { from { stroke-dashoffset: 88; } to { stroke-dashoffset: 0; } } @keyframes project-loader-progress { 0% { width: 0; transform: translateX(0); } 68% { width: 82%; transform: translateX(0); } 84% { width: 82%; transform: translateX(12%); } 100% { width: 0; transform: translateX(18rem); } } @keyframes project-live-tap { 0%, 66%, 100% { opacity: 0; transform: scale(.45); } 72% { opacity: .85; } 92% { opacity: 0; transform: scale(1.35); } } @keyframes project-live-tap-nudge { 0%, 100% { transform: scale(1); } 45% { transform: scale(.8); } } @keyframes project-web-status { 0%, 100% { opacity: .52; } 50% { opacity: 1; } } .project-modal__media-trigger--fallback { display: none; } .project-modal__placeholder--fallback { display: none; } .project-modal__thumbs { display: grid; grid-auto-columns: minmax(5rem, 8rem); grid-auto-flow: column; gap: .65rem; margin: .6rem; overflow-x: auto; padding-bottom: .25rem; } .project-modal__thumbs-shell { position: relative; } .project-modal__thumb-arrow { display: none; } .project-modal__compact-media { display: none; } .project-modal__thumbs button { overflow: hidden; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: .35rem; background: #e7e6e2; cursor: pointer; } .project-modal__thumbs button[aria-current="true"] { border-color: var(--primary); } .project-modal__thumbs img { width: 100%; height: 100%; object-fit: cover; } .project-modal__placeholder { display: grid; place-items: center; min-height: 34rem; color: var(--muted-foreground); background: #e9e8e4; letter-spacing: .12em; text-transform: uppercase; } .project-modal__copy { align-self: center; padding: clamp(3rem, 5vw, 6rem) clamp(2rem, 4vw, 4.5rem); } .project-modal__eyebrow { color: var(--muted-foreground); font-size: .65rem; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; } .project-modal__copy h2 { margin-top: 1.25rem; font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; } .project-modal__identity { display: flex; align-items: center; width: min(80%, 17.6rem); min-height: 4.4rem; margin-top: 2.25rem; margin-bottom: .5rem; } .project-modal__identity img { display: block; width: auto; max-width: 100%; max-height: 5.6rem; object-fit: contain; object-position: left center; filter: grayscale(1) brightness(0); } .project-modal__claim { margin-top: 1.5rem; font-size: 1.05rem; font-weight: 300; line-height: 1.55; } .project-modal__description { margin-top: 1.2rem; color: var(--muted-foreground); font-size: .88rem; font-weight: 300; line-height: 1.75; } .project-modal__credit { max-width: 42rem; margin-top: 1.35rem; padding-left: 1rem; border-left: 1px solid var(--primary); color: color-mix(in srgb, var(--foreground) 72%, transparent); font-size: .86rem; font-weight: 300; line-height: 1.65; } .project-modal__credit a { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; } .project-modal__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; } .project-modal__tags span { padding: .4rem .65rem; border-radius: .25rem; background: var(--secondary); color: var(--muted-foreground); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; } .project-modal__link { display: inline-flex; gap: .6rem; margin-top: 2rem; padding-bottom: .3rem; border-bottom: 1px solid currentColor; font-size: .7rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; } .project-modal__scroll-cue { display: none; } .project-modal-open { overflow: hidden; } .gallery-lightbox[hidden] { display: none; } .gallery-lightbox { position: fixed; z-index: 300; inset: 0; background: transparent; } .gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(249,248,246,.98); opacity: var(--lightbox-backdrop-opacity, 1); transition: opacity .28s ease; } .gallery-lightbox__dialog { position: relative; z-index: 1; width: 100%; height: 100svh; overflow: hidden; background: transparent; transform: translate3d(0, var(--lightbox-pull-y, 0px), 0); transition: transform .3s cubic-bezier(.22,.7,.2,1); will-change: transform; } .gallery-lightbox.is-dragging .gallery-lightbox__backdrop, .gallery-lightbox.is-dragging .gallery-lightbox__dialog { transition: none; } .gallery-lightbox.is-dismissing .gallery-lightbox__backdrop { transition-timing-function: ease-out; } .gallery-lightbox.is-dismissing .gallery-lightbox__dialog { transition-duration: .28s; transition-timing-function: cubic-bezier(.4,0,1,1); } .gallery-lightbox__close { position: absolute; z-index: 4; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); padding: .72rem 1rem; border: 1px solid rgba(36,36,36,.18); border-radius: 999px; background: rgba(249,248,246,.88); color: var(--foreground); box-shadow: 0 .35rem 1.5rem rgba(36,36,36,.08); cursor: pointer; font: inherit; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(.6rem); } .gallery-lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pinch-zoom; -webkit-overflow-scrolling: touch; } .gallery-lightbox__track::-webkit-scrollbar { display: none; } .gallery-lightbox__slide { display: grid; flex: 0 0 100%; width: 100%; height: 100%; place-items: center; padding: max(4.5rem, calc(env(safe-area-inset-top) + 3.5rem)) max(1rem, env(safe-area-inset-right)) max(3.5rem, calc(env(safe-area-inset-bottom) + 2.5rem)) max(1rem, env(safe-area-inset-left)); background: #f7f6f3; scroll-snap-align: center; scroll-snap-stop: always; } .gallery-lightbox__slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .gallery-lightbox__counter { position: absolute; z-index: 3; right: 0; bottom: max(1.15rem, env(safe-area-inset-bottom)); left: 0; color: rgba(36,36,36,.68); font-size: .65rem; letter-spacing: .12em; text-align: center; } .gallery-lightbox__swipe-hint { position: absolute; z-index: 3; inset: 50% 0 auto; pointer-events: none; opacity: 0; transition: opacity .3s ease; } .gallery-lightbox__swipe-hint.is-visible { opacity: 1; } .gallery-lightbox__swipe-hint span { position: absolute; top: 0; display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgba(36,36,36,.18); border-radius: 50%; background: rgba(249,248,246,.86); color: var(--foreground); box-shadow: 0 .35rem 1.5rem rgba(36,36,36,.1); font-size: 1.35rem; line-height: 1; backdrop-filter: blur(.5rem); } .gallery-lightbox__swipe-hint-left { left: 18%; animation: gallery-swipe-left 2.2s ease-in-out both; } .gallery-lightbox__swipe-hint-right { right: 18%; animation: gallery-swipe-right 2.2s ease-in-out both; } .gallery-lightbox-open { overflow: hidden; } @keyframes gallery-swipe-left { 0%, 100% { opacity: 0; transform: translate(1rem, -50%); } 24%, 74% { opacity: .92; } 58% { transform: translate(-.65rem, -50%); } } @keyframes gallery-swipe-right { 0%, 100% { opacity: 0; transform: translate(-1rem, -50%); } 24%, 74% { opacity: .92; } 58% { transform: translate(.65rem, -50%); } } @media (min-width: 901px) { .project-modal { padding: 1rem; } .project-modal__dialog { width: min(96vw, 1680px); max-height: calc(100svh - 2rem); } .project-modal__content { grid-template-columns: minmax(0, 1.55fr) minmax(21rem, .55fr); min-height: calc(100svh - 2rem); } .project-modal__content .project-modal__gallery { position: sticky; top: 0; display: flex; align-self: start; flex-direction: column; height: calc(100svh - 2rem); overflow: hidden; background: #eeede9; } .project-modal__content .project-modal__media { display: grid; flex: 1 1 auto; min-height: 0; place-items: center; } .project-modal__content .project-modal__media-trigger { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; place-items: center; overflow: hidden; } .project-modal__content .project-modal__media-trigger > img { width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; } .project-modal__content--live .project-modal__media--live { display: block; width: 100%; height: 100%; } .project-modal__content--live .project-modal__live-frame-shell { height: calc(100svh - 2rem); min-height: calc(100svh - 2rem); } .project-modal__content.project-modal__content--live .project-modal__media-trigger--fallback, .project-modal__content.project-modal__content--live .project-modal__placeholder--fallback { display: none; } .project-modal__content--live .project-modal__live-frame-shell:fullscreen, .project-modal__content--live .project-modal__live-frame-shell.is-fallback-fullscreen { height: 100svh; min-height: 100svh; } .project-modal__content--live .project-modal__thumbs-shell { display: none; } .project-modal__thumbs-shell { flex: 0 0 auto; padding: .85rem 2.8rem 1rem; border-top: 1px solid rgba(36,36,36,.08); background: color-mix(in srgb, var(--background) 94%, white); } .project-modal__thumbs { grid-auto-columns: clamp(11rem, 16vw, 16rem); gap: .8rem; margin: 0; padding: .1rem; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; } .project-modal__thumbs::-webkit-scrollbar { display: none; } .project-modal__thumbs button { aspect-ratio: 16 / 10; border-width: 1px; border-radius: .45rem; scroll-snap-align: start; transition: border-color .2s ease, opacity .2s ease, transform .2s ease; } .project-modal__thumbs button:hover { transform: translateY(-1px); } .project-modal__thumb-arrow { position: absolute; z-index: 2; top: 50%; display: grid; width: 1.9rem; height: 1.9rem; padding: 0; place-items: center; border: 1px solid rgba(36,36,36,.16); border-radius: 50%; background: rgba(249,248,246,.92); color: color-mix(in srgb, var(--foreground) 68%, transparent); box-shadow: 0 .2rem .8rem rgba(36,36,36,.08); cursor: pointer; font-size: .8rem; line-height: 1; transform: translateY(-50%); transition: opacity .2s ease, border-color .2s ease, color .2s ease; } .project-modal__thumb-arrow--previous { left: .45rem; } .project-modal__thumb-arrow--next { right: .45rem; } .project-modal__thumb-arrow:hover, .project-modal__thumb-arrow:focus-visible { border-color: var(--primary); color: var(--foreground); outline: none; } .project-modal__thumb-arrow:disabled { opacity: .16; cursor: default; } } @media (max-width: 900px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; } .service-card { grid-column: span 1; grid-row: span 1; } .service-card__media { aspect-ratio: 4 / 3; } .project-modal__content { grid-template-columns: 1fr; } .project-modal__copy { order: 1; } .project-modal__gallery { order: 2; } .project-modal__footer { order: 3; } .project-modal__media { height: auto; min-height: 0; } } @media (max-width: 640px) { .service-browser { gap: 1.5rem; } .service-filter { flex-wrap: nowrap; margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; scrollbar-width: none; } .service-filter::-webkit-scrollbar { display: none; } .service-filter button { flex: 0 0 auto; } .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1rem; } .service-card__media { aspect-ratio: 4 / 3; } .project-modal { min-height: 100dvh; padding: 0; background: var(--background); } .project-modal__dialog { width: 100%; max-height: 100dvh; border-radius: 0; background: var(--background); } .project-modal__dialog--image { width: 100%; max-height: 100svh; } .project-modal__content.project-modal__content--image > img { max-height: 100svh; border-radius: 0; } .project-modal__gallery { display: flex; flex-direction: column; padding: 0; background: transparent; } .project-modal__footer { display: flex; justify-content: center; padding: 1.5rem 1rem max(1.5rem, env(safe-area-inset-bottom)); background: var(--background); } .project-modal__close-bottom { padding: .8rem 1.25rem; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--background) 90%, white); color: var(--foreground); box-shadow: 0 .35rem 1.5rem rgba(36,36,36,.08); cursor: pointer; font: inherit; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; } .project-modal__thumbs { flex: 0 0 auto; margin-top: .65rem; } .project-modal__media { height: auto; border-radius: 0; background: transparent; } .project-modal__media-trigger { height: auto; cursor: zoom-in; } .project-modal__content--live .project-modal__live-frame-shell { display: block; height: clamp(30rem, 72svh, 42rem); min-height: clamp(30rem, 72svh, 42rem); } .project-modal__content.project-modal__content--live .project-modal__media-trigger--fallback, .project-modal__content.project-modal__content--live .project-modal__placeholder--fallback { display: none; } .project-modal__content--live .project-modal__live-frame-shell:fullscreen, .project-modal__content--live .project-modal__live-frame-shell.is-fallback-fullscreen { height: 100svh; min-height: 100svh; } .project-modal__media-trigger > img { height: auto; object-fit: contain; } .project-modal__copy { display: flex; align-items: center; flex-direction: column; padding: 4.25rem 1rem .8rem; text-align: center; } .project-modal__copy .project-modal__identity { justify-content: center; margin: 2rem auto 1.4rem; } .project-modal__identity img { object-position: center; } .project-modal__identity + .project-modal__claim { margin-top: 0; } .project-modal__copy h2 { margin-top: .9rem; } .project-modal__claim { margin-top: .9rem; } .project-modal__description { margin-top: .75rem; } .project-modal__tags { justify-content: center; margin-top: 1rem; } .project-modal__link { margin-top: 1.3rem; } .project-modal__scroll-cue { display: none; } .project-modal__scroll-cue-arrow { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid color-mix(in srgb, var(--foreground) 18%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--background) 88%, white); color: var(--foreground); box-shadow: 0 .35rem 1.5rem rgba(36,36,36,.08); font-size: 1.35rem; line-height: 1; animation: project-scroll-down 1.65s ease-in-out 3 forwards; } } @keyframes project-scroll-down { 0% { opacity: 0; transform: translateY(-.3rem); } 18% { opacity: .7; } 52% { opacity: 1; transform: translateY(.45rem); } 82%, 100% { opacity: 0; transform: translateY(.7rem); } } @media (prefers-reduced-motion: reduce) { .service-card__media > img { transition: none; } .service-card:hover .service-card__media::before, .service-card:focus-visible .service-card__media::before { animation: none; opacity: 0; } .gallery-lightbox__backdrop, .gallery-lightbox__dialog { transition: none; } .gallery-lightbox__track { scroll-behavior: auto; } .gallery-lightbox__swipe-hint-left, .gallery-lightbox__swipe-hint-right { animation: none; transform: translateY(-50%); } .project-modal__scroll-cue-arrow { animation: none; opacity: 0; } } /* Logo-derived headline system: exact wordmark voice plus a related bold voice. */ h1, h2, h3 { font-synthesis: none; text-wrap: balance; } /* Signature voice — identical to the pappenberg wordmark. */ .hero-content h1, .positioning-copy h2, .relationship-intro h2, .website-feature__copy h2, .about-copy h2, .contact-grid h2, .project-modal__copy h2, .portfolio-card h3, .legal-main h1 { font-family: "Poiret One", "Century Gothic", sans-serif; font-weight: 400 !important; letter-spacing: -.035em !important; line-height: .93 !important; } /* Bold voice — rounded geometry chosen to echo the logo's letterforms. */ .section-heading h2, .portfolio-heading h2, .clients-grid h2, .legal-content h2 { font-family: "Quicksand", "Century Gothic", sans-serif; font-weight: 600 !important; letter-spacing: -.045em !important; line-height: 1.02 !important; } .hero-content { max-width: 76rem; } .hero-content h1 { max-width: 74rem; font-size: clamp(3.12rem, 6.084vw, 5.928rem); } .hero-content h1 em { color: #b5d2c2; font-style: normal; } .positioning-copy h2 { font-size: clamp(2.418rem, 4.29vw, 4.368rem); } .relationship-intro h2, .about-copy h2, .contact-grid h2 { font-size: clamp(2.04rem, 3.36vw, 3.42rem); } .website-feature__copy h2 { font-size: clamp(2.4rem, 4.02vw, 4.08rem); } .section-heading h2, .clients-grid h2 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); } .portfolio-heading h2 { font-size: clamp(2.2rem, 3.2vw, 3.2rem); } .relationship-points h3, .website-feature__benefits h3 { color: #171717 !important; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(1.05rem, 1.35vw, 1.25rem); font-synthesis: none; font-style: normal; font-weight: 400 !important; letter-spacing: -.025em !important; line-height: 1.05 !important; -webkit-text-stroke: .3px currentColor; paint-order: stroke fill; } .website-feature__benefits h3 { color: #fff !important; font-family: "Quicksand", "Century Gothic", sans-serif; font-weight: 600 !important; letter-spacing: -.045em !important; line-height: 1.02 !important; -webkit-text-stroke: 0; } .portfolio-card h3 { color: #fff; font-size: clamp(2.0625rem, 3.025vw, 2.8125rem); } .portfolio-card h3 { font-synthesis: none; font-style: normal; font-weight: 400 !important; } .portfolio-card h3 a { color: inherit; } .portfolio-card h3 a:hover { color: #fff; } .project-modal__copy h2 { font-size: clamp(2.8rem, 4.6vw, 4.65rem); } @media (min-width: 901px) { .project-modal__copy { min-width: 0; container-type: inline-size; } .project-modal__copy h2 { font-size: clamp(1.6rem, 12cqi, 3rem); hyphens: auto; overflow-wrap: anywhere; } } .legal-main h1 { font-size: clamp(2.4rem, 5.4vw, 3.75rem); } .legal-content h2 { font-size: 1.25rem; } .headline-accent { color: var(--primary) !important; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: 1.06em !important; font-weight: 400 !important; letter-spacing: -.035em !important; } #services-title .headline-lead { display: block; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(1.15rem, 2.4vw, 2.4rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; white-space: nowrap; } #services-title .headline-accent { display: block; margin-top: .08em; } #website-title .headline-accent { color: #fff !important; } .website-feature__text-panel .website-feature__lead { font-weight: 400; } .portfolio-heading h2 { font-family: "Poiret One", "Century Gothic", sans-serif; font-weight: 400 !important; letter-spacing: -.035em !important; line-height: .93 !important; } /* Unified editorial system for the four section headlines; the page hero stays untouched. */ .section-display-title, .section-heading h2.section-display-title, .relationship-intro h2.section-display-title, .website-feature__copy h2.section-display-title, .portfolio-heading h2.section-display-title { max-width: 62rem; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(2rem, 3.4vw, 3.5rem) !important; font-weight: 400 !important; letter-spacing: -.035em !important; line-height: .94 !important; text-wrap: balance; } .section-display-title__base, .section-display-title__key { display: block; } .section-display-title__base { color: inherit; font-size: 1em !important; letter-spacing: inherit; line-height: inherit; text-transform: none; } .section-display-title__key { margin-top: .2em; margin-left: 0; color: var(--primary); font-size: 1.4em !important; font-weight: 400 !important; letter-spacing: -.045em; line-height: .78; } .portfolio-heading .section-display-title { max-width: 62rem; } .portfolio-heading .section-display-title__base { color: var(--background); font-size: 1em !important; letter-spacing: inherit; line-height: inherit; text-transform: none; } .portfolio-heading .section-display-title__key { margin-top: .3em; color: var(--primary); letter-spacing: -.045em; line-height: .78; text-transform: none; } /* On the green image field the same accent becomes a pale green for contrast. */ #website-title .section-display-title__base { color: #fff; } #website-title .section-display-title__key { color: #d8eee3; } @media (max-width: 640px) { .hero-content h1 { font-size: clamp(2.2rem, 9.3vw, 2.95rem); } .relationship-intro h2, .about-copy h2, .contact-grid h2 { font-size: 2.13rem; } .positioning-copy h2 { font-size: 2.05rem; } .website-feature__copy h2 { font-size: clamp(2.1rem, 9vw, 2.79rem); } .section-heading h2, .clients-grid h2, .portfolio-heading h2 { font-size: 2.2rem; } .project-modal__copy h2 { font-size: 2.8rem; } .section-display-title, .section-heading h2.section-display-title, .relationship-intro h2.section-display-title, .website-feature__copy h2.section-display-title, .portfolio-heading h2.section-display-title { font-size: clamp(1.8rem, 7.7vw, 2.15rem) !important; } .section-display-title__key { line-height: .82; } } /* Image-only final hero and modal contact flow. */ .vita-hero { overflow: hidden; background: #070908; } .vita-hero img { display: block; width: 100%; height: auto; max-width: none; } .contact-modal, .legal-modal { width: min(calc(100% - 2rem), 72rem); max-width: none; max-height: min(90svh, 58rem); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: .65rem; background: var(--background); color: var(--foreground); box-shadow: 0 2rem 6rem rgba(0,0,0,.35); } .contact-modal::backdrop, .legal-modal::backdrop, .care-modal::backdrop { background: rgba(8,12,10,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .contact-modal__inner { position: relative; padding: clamp(2rem, 5vw, 5rem); } .contact-modal .contact-grid { width: 100%; } .contact-modal__close { position: absolute; z-index: 2; top: 1.25rem; right: 1.25rem; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--background); color: var(--foreground); font-size: 1.5rem; line-height: 1; cursor: pointer; } .contact-modal__close:hover { border-color: var(--primary); color: var(--primary); } body.contact-modal-open { overflow: hidden; } body.modal-open { overflow: hidden; } .care-modal { width: min(calc(100% - 2rem), 80rem); height: min(92svh, 62rem); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: .65rem; background: var(--background); color: var(--foreground); box-shadow: 0 2rem 6rem rgba(0,0,0,.35); } .care-modal__inner, .care-modal__frame { width: 100%; height: 100%; } .care-modal__inner { position: relative; } .care-modal__frame { border: 0; background: var(--background); } .care-modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 4; box-shadow: 0 .5rem 2rem rgba(0,0,0,.12); } .legal-modal { width: min(calc(100% - 2rem), 56rem); } .legal-modal__inner { position: relative; padding: clamp(2.5rem, 6vw, 5rem); } .legal-modal .legal-heading { margin-top: 0; padding-right: 4rem; } .legal-modal .legal-heading h2 { margin: .6rem 0 0; font-family: "Poiret One", sans-serif; font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 400; line-height: .95; } .legal-modal .legal-content { margin-top: 2.5rem; } .legal-modal .legal-content h3 { margin: 0 0 .45rem; color: var(--foreground); font-size: .875rem; font-weight: 700; } .legal-modal .legal-content a { text-decoration: underline; text-underline-offset: .2em; } @media (max-width: 900px) { .contact-modal .contact-grid { grid-template-columns: 1fr; gap: 3rem; } } @media (max-width: 640px) { .vita-hero img { min-height: 0; } .contact-modal, .legal-modal, .care-modal { width: 100%; max-height: 100svh; border-radius: 0; } .care-modal { height: 100svh; } .contact-modal__inner { padding: 4.5rem 1.25rem 2rem; } .legal-modal__inner { padding: 4.5rem 1.25rem 2.5rem; } .contact-modal__close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: 1rem; } } /* Fixed mobile bottom dock that overlays the scrolling page content. */ .hero-start { display: none; touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .hero-start__panel-mobile { display: contents; } .hero-start__state-label { display: none; } .desktop-contact { display: none; } @media (max-width: 900px) { .home-hero--intro .hero-actions { display: none; } .home-hero--intro .hero-content { bottom: calc(8vh + 5rem); } .hero-start { --hero-start-height: clamp(6.25rem, 22vw, 7.5rem); --hero-start-open-height: calc(var(--hero-start-height) + 2.5rem); position: fixed; z-index: 245; bottom: -2rem; left: -1.25rem; display: block; width: calc(100vw + 2.5rem); height: var(--hero-start-height); border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: var(--primary); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 -.35rem 1.4rem rgba(11,17,14,.16); transform: none; cursor: pointer; overflow: hidden; transition: height .62s cubic-bezier(.34, 1.18, .64, 1), background-color .25s ease; will-change: height; } .hero-start:hover, .hero-start:focus-visible { background: #86ad99; } .hero-start:focus-visible { outline: 2px solid #fff; outline-offset: -5px; } .hero-start__label { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: .78rem; font-weight: 600; letter-spacing: .2em; line-height: 1; transition: top .58s cubic-bezier(.22, 1, .36, 1), left .58s cubic-bezier(.22, 1, .36, 1), opacity .22s ease; } .hero-start__whatsapp { position: absolute; top: 50%; left: 50%; width: 34%; height: 34%; opacity: 0; transform: translate(-50%, -50%) scale(.62) rotate(-12deg); transition: opacity .24s ease .12s, transform .58s cubic-bezier(.34, 1.56, .64, 1); } .hero-start.is-open { height: var(--hero-start-open-height); background: var(--primary); } .hero-start.is-open .hero-start__label { left: 50%; opacity: 0; } .hero-start.is-open .hero-start__whatsapp { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } } @media (max-width: 640px) { .home-hero--intro .hero-content { bottom: 10rem; } } /* iOS: keep large blended artwork static while the browser scrolls. */ @media (max-width: 767px), (hover: none) and (pointer: coarse) { .digital-continuum__network, .digital-continuum__geometry { transform: none; will-change: auto; } } @media (max-width: 640px) { .positioning-art { transform: scale(1.06); will-change: auto; } } /* Mobile contact center: folded to at most 15% viewport height and shifted left. */ @media (max-width: 900px) { .hero-start, .hero-start.is-open { --contact-center-open-diameter: clamp(34rem, 145vw, 64rem); --contact-center-open-visible: clamp(14.5rem, 29svh, 18rem); --contact-center-folded-visible: 15svh; right: auto; bottom: calc(var(--contact-center-folded-visible) - var(--contact-center-open-diameter)); left: 30%; display: block; width: var(--contact-center-open-diameter); height: var(--contact-center-open-diameter); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: #78a18c; color: #fff; box-shadow: 0 0 1.8rem rgba(36,36,36,.14), inset 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: auto; cursor: default; transform: translate3d(-50%,0,0) rotate(0); transform-origin: center; transition: left .64s cubic-bezier(.32, .72, .3, 1), bottom .64s cubic-bezier(.32, .72, .3, 1), transform .64s cubic-bezier(.32, .72, .3, 1), background-color .28s ease, box-shadow .4s ease; will-change: left, bottom, transform; backface-visibility: hidden; } body.menu-open .hero-start { z-index: 90; pointer-events: none; } .hero-start::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: none; pointer-events: none; transition: opacity .35s ease; } .hero-start.is-open { bottom: calc(var(--contact-center-open-visible) - var(--contact-center-open-diameter)); left: 50%; border: 1px solid rgba(255,255,255,.36); box-shadow: 0 -1rem 2.8rem rgba(36,36,36,.13), inset 0 .12rem rgba(255,255,255,.17); } .hero-start:hover, .hero-start:focus-within, .hero-start.is-open:hover, .hero-start.is-open:focus-within { background: #78a18c; } .hero-start__toggle { position: absolute; z-index: 2; inset: 0; display: grid; width: 100%; height: 100%; place-items: start center; padding: 1.5rem 0 0; border: 0; background: transparent; color: #fff; cursor: grab; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transform: rotate(0); transform-origin: center; transition: transform .64s cubic-bezier(.32, .72, .3, 1), padding .64s cubic-bezier(.32, .72, .3, 1); } .hero-start.is-open .hero-start__toggle { padding: 1.5rem 0 0; place-items: start center; transform: rotate(0); } .hero-start__toggle:active { cursor: grabbing; } .hero-start__toggle::after { content: "↑"; position: absolute; top: 1.15rem; left: 50%; opacity: 0; font-size: 1rem; font-weight: 300; line-height: 1; transform: translateX(-50%); animation: contact-center-pull-hint 5.4s ease-in-out infinite; } .hero-start.is-open .hero-start__toggle::after { content: "↓"; } .hero-start.is-dragging, .hero-start.is-dragging .hero-start__toggle, .hero-start.is-dragging .hero-start__panel { transition: none; } .hero-start.is-pressed { filter: saturate(1.08); box-shadow: 0 -1.25rem 3rem rgba(36,36,36,.2), inset 0 .12rem rgba(255,255,255,.22); } .hero-start.is-dragging .hero-start__toggle::after, .hero-start.is-pressed .hero-start__toggle::after, .hero-start__toggle:focus-visible::after { opacity: 1; animation: none; } .hero-start__label { position: static; display: block; opacity: 1; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(1.45rem, 6vw, 2rem); font-synthesis: none; font-weight: 400; letter-spacing: .055em; line-height: 1; transform: translate(.025em, 0); transition: font-size .45s ease, transform .45s ease; } .hero-start.is-open .hero-start__label { font-size: clamp(2.15rem, 8.5vw, 3rem); } .hero-start__toggle:focus-visible { outline: 1px solid rgba(255,255,255,.86); outline-offset: -5px; border-radius: inherit; } .hero-start__panel { position: absolute; z-index: 3; top: 5.35rem; left: 50%; display: grid; gap: .45rem; width: min(18rem, 72vw); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .7rem); transition: opacity .24s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s; } .hero-start.is-open .hero-start__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .28s ease .2s, transform .48s cubic-bezier(.22, 1, .36, 1) .14s, visibility 0s; } .hero-start.is-dragging .hero-start__panel { opacity: var(--contact-drag-progress, 0); visibility: visible; pointer-events: none; transform: translate(-50%, var(--contact-panel-shift, .7rem)); } .hero-start__panel a, .hero-start__panel button { display: flex; align-items: center; justify-content: space-between; min-height: 2.15rem; padding: .25rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: transparent; color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-align: left; text-transform: uppercase; touch-action: manipulation; cursor: pointer; } .hero-start__panel a::after, .hero-start__panel button::after { content: "→"; margin-left: 1.25rem; color: #a8c7b6; } .hero-start__panel a:hover, .hero-start__panel button:hover, .hero-start__panel a:focus-visible, .hero-start__panel button:focus-visible { color: #fff; } } @keyframes contact-center-pull-hint { 0%, 56%, 100% { opacity: 0; transform: translate(-50%, .3rem); } 64% { opacity: .35; transform: translate(-50%, .2rem); } 72% { opacity: 1; transform: translate(-50%, -.18rem); } 80% { opacity: .5; transform: translate(-50%, .08rem); } 87% { opacity: 0; transform: translate(-50%, -.28rem); } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .hero-start, .hero-start::before, .hero-start__label, .hero-start__panel { transition: none !important; } .hero-start__toggle::after { opacity: .72; animation: none; } } @media (max-width: 900px) { .hero-start__label { display: none !important; } } @media (min-width: 901px) { .hero-start, .hero-start.is-open { --contact-center-folded-height: 2.75rem; --contact-center-open-height: clamp(25rem, 52vh, 30rem); position: fixed; z-index: 245; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: var(--contact-center-folded-height); overflow: hidden; border: 0; border-top: 1px solid rgba(255,255,255,.32); border-radius: 0; background: #78a18c; color: #fff; box-shadow: 0 -.35rem 1.4rem rgba(36,36,36,.12), inset 0 1px rgba(255,255,255,.14); transform: none; transition: height .58s cubic-bezier(.32, .72, .3, 1), box-shadow .35s ease; will-change: height; } .hero-start.is-open { height: var(--contact-center-open-height); box-shadow: 0 -1rem 2.8rem rgba(36,36,36,.16), inset 0 1px rgba(255,255,255,.16); } .hero-start.is-minimized { height: 5px; overflow: visible; box-shadow: 0 -.12rem .65rem rgba(36,36,36,.12), inset 0 1px rgba(255,255,255,.16); } body.menu-open .hero-start { opacity: 0; pointer-events: none; } .hero-start__toggle { position: absolute; z-index: 2; inset: 0; display: grid; width: 100%; height: 100%; place-items: start center; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; touch-action: none; user-select: none; } .hero-start__toggle:active { cursor: pointer; } .hero-start__toggle::after { content: none; } .hero-start__state-label { position: absolute; top: .7rem; left: 50%; display: grid; transform: translateX(-50%); pointer-events: none; } .hero-start__state-label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .52rem; font-size: .62rem; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: opacity .26s ease, transform .36s cubic-bezier(.22, 1, .36, 1); } .hero-start__state-label b { font-size: .88rem; font-weight: 300; } .hero-start__state-open { opacity: .86; transform: translateY(0); } .hero-start__state-close { opacity: 0; transform: translateY(.45rem); } .hero-start.is-open .hero-start__state-open { opacity: 0; transform: translateY(-.45rem); } .hero-start.is-open .hero-start__state-close { opacity: .92; transform: translateY(0); } .hero-start.is-minimized .hero-start__toggle { inset: auto clamp(1.25rem, 3vw, 3.5rem) 0 auto; width: 7.75rem; height: 2.45rem; border: 1px solid rgba(255,255,255,.32); border-bottom: 0; border-radius: 1.15rem 1.15rem 0 0; background: #78a18c; box-shadow: 0 -.38rem 1rem rgba(36,36,36,.14), inset 0 1px rgba(255,255,255,.15); transform-origin: center bottom; animation: contact-center-handle-in .46s cubic-bezier(.22, 1, .36, 1) both; } .hero-start.is-minimized .hero-start__toggle::after { top: .72rem; opacity: .92; font-size: .95rem; } .hero-start.is-minimized .hero-start__state-label { top: .78rem; } .hero-start.is-minimized .hero-start__toggle:hover { background: #86ad99; } .hero-start.is-minimized .hero-start__toggle:focus-visible { background: #86ad99; outline: 1px solid rgba(255,255,255,.88); outline-offset: -4px; } .hero-start__label { display: none !important; } .hero-start__panel { position: absolute; z-index: 3; top: 3.35rem; left: 50%; display: block; width: min(104rem, calc(100vw - 6rem)); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .7rem); transition: opacity .24s ease, transform .42s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .42s; } .hero-start.is-open .hero-start__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .28s ease .2s, transform .48s cubic-bezier(.22, 1, .36, 1) .14s, visibility 0s; } .hero-start__panel a, .hero-start__panel button { display: flex; min-height: 2.15rem; align-items: center; justify-content: space-between; padding: .25rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.9); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .hero-start__panel a::after, .hero-start__panel button::after { content: "→"; color: #b9dac8; } .hero-start.is-dragging, .hero-start.is-dragging .hero-start__panel { transition: none; } .hero-start.is-footer { bottom: 0; left: 0; width: 100%; height: 9.5rem; } .hero-start__panel-mobile { display: none; } .desktop-contact { position: relative; display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: stretch; color: #fff; } .hero-start__panel .desktop-contact__brand { position: absolute; top: -2.62rem; left: 0; display: inline-flex; min-height: 0; padding: 0; border: 0; color: #fff; font-size: 1.18rem; font-weight: 400; letter-spacing: -.063em; line-height: 1; text-transform: none; opacity: .94; transition: opacity .2s ease; } .hero-start__panel .desktop-contact__brand .site-logo__name, .hero-start__panel .desktop-contact__brand .site-logo__suffix { color: #fff; } .hero-start__panel .desktop-contact__brand:hover, .hero-start__panel .desktop-contact__brand:focus-visible { opacity: 1; } .desktop-contact__direct { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding-right: clamp(2rem, 4vw, 4.75rem); border-right: 1px solid rgba(255,255,255,.25); } .desktop-contact__eyebrow { display: block; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 600; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; } .desktop-contact__prompt { margin: .65rem 0 .2rem; color: rgba(255,255,255,.88); font-size: clamp(.92rem, 1vw, 1.05rem); } .hero-start__panel .desktop-contact__phone { display: block; min-height: 0; margin: 0; padding: 0; border: 0; color: #fff; font-family: "DM Sans", sans-serif; font-size: clamp(2.2rem, 3.25vw, 4.15rem); font-weight: 300; letter-spacing: -.055em; line-height: 1.02; text-transform: none; white-space: nowrap; } .desktop-contact__phone span { color: rgba(255,255,255,.58); } .desktop-contact__hint { margin: .7rem 0 1rem; color: rgba(255,255,255,.68); font-size: .78rem; } .hero-start__panel .desktop-contact__mail { display: flex; min-height: 3.55rem; align-items: center; justify-content: space-between; padding: .65rem 1rem .7rem 1.1rem; border: 1px solid rgba(255,255,255,.42); border-radius: .2rem; background: rgba(255,255,255,.96); color: #335345; font-size: .94rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; text-transform: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .desktop-contact__mail small { display: block; margin-bottom: .2rem; color: #6d897b; font-size: .57rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .hero-start__panel .desktop-contact__mail:hover, .hero-start__panel .desktop-contact__mail:focus-visible { background: #fff; color: #203a2f; transform: translateY(-1px); } .desktop-contact__quick { display: flex; min-width: 0; flex-direction: column; justify-content: center; } .desktop-contact__heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: .75rem; } .desktop-contact__heading h2 { margin: .2rem 0 0; color: #fff; font-family: "Poiret One", "Century Gothic", sans-serif; font-size: clamp(1.8rem, 2.5vw, 2.8rem); font-weight: 400; letter-spacing: .02em; line-height: 1; } .desktop-contact__step { padding-bottom: .15rem; color: rgba(255,255,255,.62); font-size: .66rem; letter-spacing: .08em; white-space: nowrap; } .desktop-contact__topics { min-width: 0; margin: 0 0 .7rem; padding: 0; overflow: hidden; border: 0; } .desktop-contact__topic-scroll { display: flex; gap: .45rem; padding: .1rem 1.75rem .55rem 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: rgba(255,255,255,.38) transparent; scrollbar-width: thin; scroll-snap-type: x proximity; } .desktop-contact__topic-scroll label { flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; } .desktop-contact__topic-scroll input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .desktop-contact__topic-scroll span { display: block; padding: .58rem .82rem; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: rgba(255,255,255,.82); font-size: .68rem; font-weight: 500; letter-spacing: .035em; line-height: 1; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .desktop-contact__topic-scroll label:hover span, .desktop-contact__topic-scroll input:focus-visible + span { border-color: rgba(255,255,255,.78); color: #fff; } .desktop-contact__topic-scroll input:checked + span { border-color: #fff; background: #fff; color: #335345; } .desktop-contact__message-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 6.2rem; overflow: hidden; border: 1px solid rgba(255,255,255,.46); border-radius: .2rem; background: rgba(255,255,255,.08); } .desktop-contact__message-row textarea { width: 100%; min-height: 6.2rem; resize: none; padding: 1rem 1.1rem; border: 0; outline: 0; background: transparent; color: #fff; font: 400 .9rem/1.5 "DM Sans", sans-serif; } .desktop-contact__message-row textarea::placeholder { color: rgba(255,255,255,.57); } .desktop-contact__message-row textarea:focus { box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); } .hero-start__panel .desktop-contact__message-row button { display: flex; min-width: 11.5rem; min-height: 100%; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.15rem; border: 0; border-left: 1px solid rgba(255,255,255,.3); background: #fff; color: #335345; font-size: .7rem; font-weight: 700; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; } .hero-start__panel .desktop-contact__message-row button:hover, .hero-start__panel .desktop-contact__message-row button:focus-visible { background: #e7f0eb; color: #203a2f; } .desktop-contact__note { margin: .55rem 0 0; color: rgba(255,255,255,.56); font-size: .64rem; } .hero-start__panel .desktop-contact a::after, .hero-start__panel .desktop-contact button::after { content: none; } } @keyframes contact-center-band-hint { 0%, 100% { opacity: .62; transform: translate(-50%, .12rem); } 50% { opacity: 1; transform: translate(-50%, -.2rem); } } @keyframes contact-center-handle-in { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: scaleY(1); } } @media (min-width: 901px) and (prefers-reduced-motion: reduce) { .hero-start.is-minimized .hero-start__toggle { animation: none; } .hero-start__state-label > span { transition: none; } } /* At the page end, the contact circle itself becomes the footer. */ .hero-start__footer { position: absolute; z-index: 4; top: 1.1rem; left: 50%; display: grid; width: min(22rem, 76vw); place-items: center; gap: .42rem; color: #fff; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .65rem); transition: opacity .25s ease, transform .48s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .48s; } .hero-start.is-footer { --contact-center-footer-visible: 9.5rem; left: 50%; bottom: calc(var(--contact-center-footer-visible) - var(--contact-center-open-diameter)); } .hero-start.is-footer .hero-start__toggle, .hero-start.is-footer .hero-start__panel { opacity: 0; visibility: hidden; pointer-events: none; } .hero-start.is-footer .hero-start__footer { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .3s ease .14s, transform .52s cubic-bezier(.22, 1, .36, 1) .08s, visibility 0s; } .hero-start__footer-logo { font-size: 1.35rem; } .hero-start__footer .site-logo__suffix--text { color: #b9dac8; } .hero-start__footer-links { display: flex; align-items: center; gap: .9rem; color: rgba(255,255,255,.8); font-size: .68rem; font-weight: 600; } .hero-start__footer-links a { color: inherit; touch-action: manipulation; } .hero-start__footer-links a:hover, .hero-start__footer-links a:focus-visible { color: #fff; } .hero-start__copyright { color: rgba(255,255,255,.52); font-size: .65rem; } @media (min-width: 901px) { .hero-start.is-footer { bottom: 0; left: 0; } } .modal-brand-surface { display: none; } @media (max-width: 900px) { .modal-brand-surface { --modal-brand-size: clamp(30rem, 150vw, 58rem); position: fixed; z-index: 1401; top: calc(env(safe-area-inset-top) + 5.25rem - var(--modal-brand-size)); left: calc(-1 * clamp(17rem, 85vw, 33rem)); display: block; width: var(--modal-brand-size); height: var(--modal-brand-size); overflow: hidden; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(249,248,246,.94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 .35rem 1.2rem rgba(36,36,36,.09); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-.45rem); transition: opacity .28s ease, transform .52s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .52s; } body.unified-brand-active .modal-brand-surface { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .28s ease .08s, transform .52s cubic-bezier(.22, 1, .36, 1), visibility 0s; } .modal-brand-surface__logo { position: absolute; top: calc(var(--modal-brand-size) - 4.65rem); left: calc(clamp(17rem, 85vw, 33rem) + .9rem); font-size: clamp(1.05rem, 4.2vw, 1.3rem); } .modal-brand-surface__logo .site-logo__name { color: #171717; } } /* Unified modal return state, matching the reference arc behavior. */ body.unified-return-active .hero-start, .hero-start.is-return { --contact-center-open-diameter: clamp(30rem, 132vw, 58rem); --contact-center-return-visible: 5.8rem; z-index: 1400; left: 50%; bottom: calc(var(--contact-center-return-visible) - var(--contact-center-open-diameter)); width: var(--contact-center-open-diameter); height: var(--contact-center-open-diameter); pointer-events: auto; box-shadow: 0 -1.15rem 2.6rem rgba(25,38,32,.24), inset 0 .12rem rgba(255,255,255,.18); transform: translate3d(-50%, 0, 0); animation: unified-return-enter .52s cubic-bezier(.22, 1, .36, 1) both; transition: box-shadow .25s ease, transform .22s ease; } .hero-start.is-return:active { transform: translate3d(-50%, .16rem, 0) scale(.995); } .hero-start.is-return .hero-start__toggle { display: grid; padding: 1.15rem 0 0; place-items: start center; opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; touch-action: manipulation; } .hero-start.is-return .hero-start__toggle::after { content: none; animation: none; } .hero-start.is-return .hero-start__state-label { display: none; } .hero-start.is-return .hero-start__label { position: static; display: block !important; opacity: 1; color: rgba(255,255,255,.92); font-family: "DM Sans", sans-serif; font-size: .8rem; font-weight: 600; letter-spacing: .16em; line-height: 1; text-transform: uppercase; transform: none; } @keyframes unified-return-enter { from { opacity: 0; transform: translate3d(-50%, 2.8rem, 0) scale(.97); } to { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-start.is-return { animation: none; } } .hero-start.is-return .hero-start__panel, .hero-start.is-return .hero-start__footer { display: none !important; opacity: 0; visibility: hidden; pointer-events: none; } .project-modal__close, .gallery-lightbox__close, .project-modal__web-screen-close, .contact-modal__close, .care-modal__close { display: none !important; } .contact-modal[open]:has(> .hero-start), .legal-modal[open]:has(> .hero-start), .care-modal[open]:has(> .hero-start) { overflow: visible; } .contact-modal[open]:has(> .hero-start) .contact-modal__inner, .legal-modal[open]:has(> .hero-start) .legal-modal__inner { max-height: min(90svh, 58rem); overflow: auto; border-radius: inherit; background: var(--background); } .care-modal[open]:has(> .hero-start) .care-modal__inner { overflow: hidden; border-radius: inherit; background: var(--background); } @media (max-width: 900px) { .project-modal__footer { display: none; } .project-modal__content { padding-bottom: 5.4rem; } } @media (max-width: 640px) { .contact-modal__inner, .legal-modal__inner { padding-bottom: 7rem; } } /* Large desktop composition. Standard desktop viewports through 1920px stay unchanged. */ @media (min-width: 1921px) { .nav-inner, .services-section .section-shell, .quick-contact .section-shell, .portfolio-shell, .digital-bridge__inner { width: min( calc(100% - 8rem), clamp(1400px, calc(43.75vw + 560px), 1680px) ); } .hero-content, .positioning-copy { left: max( 4rem, calc((100vw - clamp(1400px, calc(43.75vw + 560px), 1680px)) / 2) ); } .hero-location { right: max( 4rem, calc((100vw - clamp(1400px, calc(43.75vw + 560px), 1680px)) / 2) ); } .relationship-statement { padding-right: max( 4rem, calc((100vw - clamp(1400px, calc(43.75vw + 560px), 1680px)) / 2) ); padding-left: max( 4rem, calc((100vw - clamp(1400px, calc(43.75vw + 560px), 1680px)) / 2) ); } .relationship-statement__content { width: min(100%, 1680px); } .hero-start__panel { width: min( calc(100vw - 10rem), clamp(104rem, calc(20vw + 1280px), 112rem) ); } } /* Give true 21:9 screens more editorial spread without widening copy. */ @media (min-width: 2560px) and (min-aspect-ratio: 21 / 10) { .nav-inner, .services-section .section-shell, .quick-contact .section-shell, .portfolio-shell, .digital-bridge__inner { width: min( calc(100% - 10rem), clamp(1680px, calc(9.091vw + 1447.3px), 1760px) ); } .hero-content, .positioning-copy { left: max( 5rem, calc((100vw - clamp(1680px, calc(9.091vw + 1447.3px), 1760px)) / 2) ); } .hero-location { right: max( 5rem, calc((100vw - clamp(1680px, calc(9.091vw + 1447.3px), 1760px)) / 2) ); } .relationship-statement { padding-right: max( 5rem, calc((100vw - clamp(1680px, calc(9.091vw + 1447.3px), 1760px)) / 2) ); padding-left: max( 5rem, calc((100vw - clamp(1680px, calc(9.091vw + 1447.3px), 1760px)) / 2) ); } .relationship-statement__content { width: min(100%, 1760px); } } /* Avoid an almost empty 2160px-tall opening scene on unscaled 4K viewports. */ @media (min-width: 2560px) and (min-height: 1600px) { .home-hero { height: min(100svh, 1440px); } } /* Final digital composition: crisp vector field and light-to-dark transition. */ .digital-continuum { --digital-network-shift: 0px; --digital-geometry-shift: 0px; background: var(--foreground); } .digital-continuum::before { height: clamp(69rem,89vw,86rem); background: linear-gradient(180deg,#8eae9d 0%,#78a18c 37%,#557364 61%,#303a35 79%,var(--foreground) 97%); } .digital-continuum__network { top: -4rem; left: 50%; width: max(100%,100rem); height: clamp(68rem,88vw,86rem); max-width: none; opacity: .78; mix-blend-mode: screen; transform: translate3d(-50%,var(--digital-network-shift),0); transform-origin: 50% 20%; } .digital-continuum__routes path { stroke-width: 1.15; } .digital-continuum__routes path:nth-child(2n) { stroke-width: .75; opacity: .72; } .digital-continuum__fine { opacity: .75; } .digital-continuum__fine path:nth-child(3n) { opacity: .58; } .relationship-statement { min-height: 48rem; padding-top: clamp(7rem,9vw,9.5rem); padding-bottom: clamp(10rem,14vw,14rem); } .website-feature__copy { max-width: 66rem; } .website-feature__copy h2 { max-width: 64rem; } .website-feature__text-panel { max-width: 51rem; border: 1px solid rgba(235,248,241,.34); border-right-color: rgba(16,32,24,.14); border-bottom-color: rgba(16,32,24,.14); background: rgba(16,32,24,.34); box-shadow: 1.15rem 1.15rem 0 rgba(16,32,24,.09); } .digital-bridge__statement { border-top-color: rgba(216,238,227,.48); border-bottom-color: rgba(120,161,140,.55); background: linear-gradient(105deg,rgba(20,24,22,.44),rgba(20,24,22,.76)),rgba(20,24,22,.25); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } .digital-bridge__inner { display: grid; grid-template-columns: minmax(0,8fr) minmax(18rem,4fr); column-gap: clamp(3rem,8vw,8rem); align-items: end; padding-top: 2.25rem; padding-bottom: clamp(4rem,6vw,6.5rem); } .digital-bridge__inner > span { grid-column: 1 / -1; } .digital-bridge__inner > .section-display-title { grid-column: 1; margin-top: 2rem; } .digital-bridge__statement .digital-bridge__intro { grid-column: 2; max-width: 28rem; margin: 2rem 0 .1rem; color: rgba(255,255,255,.68); font-family: "DM Sans",ui-sans-serif,system-ui,sans-serif; font-size: .9rem; font-weight: 300; letter-spacing: 0; line-height: 1.75; } .website-feature__benefits { border-bottom-color: rgba(120,161,140,.56); background: rgba(20,24,22,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .website-feature__benefits article { min-height: 17rem; padding-top: 2.35rem; padding-bottom: 3rem; } .website-feature__benefits article + article { border-left-color: rgba(120,161,140,.5); } .website-feature__benefits article > span { display: inline-block; padding-bottom: .75rem; border-bottom: 1px solid rgba(120,161,140,.48); color: rgba(216,238,227,.72); } .website-feature__benefits h3 { max-width: 22rem; margin-top: 1.65rem; font-size: clamp(1.25rem,1.7vw,1.55rem); } .website-feature__benefits p { color: rgba(255,255,255,.61); font-size: .86rem; line-height: 1.72; } .portfolio-projects { padding-top: clamp(5rem,7vw,7rem); } .portfolio-heading > div > span { color: var(--primary); } @media (max-width: 900px) { .digital-continuum::before { height: 84rem; } .digital-continuum__network { top: -1rem; left: 48%; width: 94rem; height: 84rem; opacity: .7; transform: translateX(-50%); } .digital-bridge__inner { grid-template-columns: 1fr; } .digital-bridge__inner > .section-display-title, .digital-bridge__statement .digital-bridge__intro { grid-column: 1; } .digital-bridge__statement .digital-bridge__intro { margin-top: 2rem; } } @media (max-width: 767px) { .relationship-statement { padding: 5.5rem 1rem 8rem; } .website-feature__text-panel { box-shadow: .75rem .75rem 0 rgba(16,32,24,.09); } .digital-bridge__inner { padding: 1.5rem 0 4rem; } .website-feature__benefits article { min-height: 0; padding: 2.2rem 1.25rem 2.5rem; } .website-feature__benefits article + article { border-top-color: rgba(120,161,140,.5); border-left: 0; } .portfolio-projects { padding-top: 4.5rem; } } @media (prefers-reduced-motion: reduce), (hover: none) and (pointer: coarse) { .digital-continuum__network { transform: translateX(-50%); } } /* Final 2026-09-01 contact composition overrides. */ .phone-display, .desktop-contact__phone { display: inline-flex !important; align-items: baseline; justify-content: flex-start !important; gap: .17em; } .phone-prefix { color: var(--primary); } .phone-main { color: inherit; } .desktop-contact__phone .phone-prefix { color: rgba(216,238,227,.64) !important; } .desktop-contact__phone .phone-main { color: #fff !important; } .phone-inline { display: inline-flex; align-items: baseline; gap: .28em; } .phone-inline .phone-prefix { color: var(--primary); } .desktop-contact__topics { overflow: visible; } .desktop-contact__topic-scroll { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .48rem; padding: .1rem 0 .35rem; overflow: visible; overscroll-behavior: auto; scrollbar-width: none; scroll-snap-type: none; } .desktop-contact__topic-scroll label { flex: 0 1 auto; scroll-snap-align: none; } .hero-start__panel .desktop-contact__message-row button { width: 10.25rem; min-width: 8.75rem; gap: .65rem; padding-inline: .85rem; } .hero-start__panel .desktop-contact__message-row button > span:first-child { min-width: 0; white-space: normal; } @media (min-width: 901px) { .desktop-contact { grid-template-columns: minmax(18rem,.72fr) minmax(0,1.28fr); gap: clamp(1.1rem,2vw,2rem); } .desktop-contact__direct, .desktop-contact__quick { justify-content: center; padding: clamp(1.15rem,2.2vw,1.8rem); border: 1px solid rgba(255,255,255,.2); border-radius: .45rem; background: rgba(20,45,34,.13); } .desktop-contact__direct { border-right: 1px solid rgba(255,255,255,.2); } .hero-start__panel .desktop-contact__mail { width: min(100%,27rem); } } @media (max-width: 900px) { .quick-contact__phone { font-size: clamp(2rem, 9vw, 3rem); } .hero-start:not(.is-return) .hero-start__panel .hero-start__panel-mobile { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-bottom: 1.1rem; } .hero-start__panel .hero-start__quick-action { display: flex; width: auto; min-height: 3.45rem; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.5); border-radius: .35rem; background: rgba(255,255,255,.1); color: #fff; font-size: .73rem; font-weight: 650; letter-spacing: .09em; line-height: 1.1; text-transform: uppercase; box-shadow: inset 0 1px rgba(255,255,255,.08); } .hero-start__panel .hero-start__quick-action::after { content: none; } .hero-start__quick-action span { display: grid; gap: .27rem; } .hero-start__quick-action small { color: rgba(255,255,255,.6); font-size: .51rem; font-weight: 600; letter-spacing: .14em; } .hero-start__quick-action b { color: #d8eee3; font-size: 1rem; font-weight: 400; } .hero-start__panel .hero-start__quick-action:hover, .hero-start__panel .hero-start__quick-action:focus-visible { border-color: #fff; background: rgba(255,255,255,.18); outline: none; } .hero-start:not(.is-return) .desktop-contact { gap: 1rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__brand { margin: 0 0 -.05rem; font-size: 1.08rem; } .desktop-contact__direct, .desktop-contact__quick { padding: 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: .4rem; background: rgba(35,76,58,.1); } .desktop-contact__direct { border-bottom: 1px solid rgba(255,255,255,.22); } .desktop-contact__prompt { margin-top: .5rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__phone { font-size: clamp(2.15rem,10vw,3rem); } .desktop-contact__hint { margin: .55rem 0 .75rem; line-height: 1.45; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__mail { min-height: 2.95rem; padding: .48rem .72rem .52rem .78rem; font-size: .83rem; } .desktop-contact__mail small { margin-bottom: .12rem; font-size: .49rem; } .desktop-contact__heading { margin-bottom: .6rem; } .desktop-contact__heading h2 { font-size: clamp(1.75rem,8.6vw,2.35rem); } .desktop-contact__topic-scroll { gap: .42rem; padding-right: 0; } .desktop-contact__topic-scroll span { padding: .48rem .66rem; white-space: normal; font-size: .62rem; } .desktop-contact__message-row { grid-template-columns: minmax(0,1fr) 7.75rem; } .hero-start:not(.is-return) .hero-start__panel .desktop-contact__message-row button { width: auto; min-width: 0; min-height: 100%; justify-content: space-between; padding: .7rem .72rem; border-top: 0; border-left: 1px solid rgba(255,255,255,.3); font-size: .64rem; } } /* Final mobile dock overrides must follow the legacy circular contact rules. */ @media (max-width: 900px) { .hero-start:not(.is-return), .hero-start:not(.is-return).is-open { --mobile-contact-folded-height: 3rem; --mobile-contact-open-height: min(88svh, 44rem); right: 0; bottom: 0; left: 0; width: 100%; height: var(--mobile-contact-folded-height); overflow: hidden; border: 0; border-top: 1px solid rgba(255,255,255,.32); border-radius: 0; box-shadow: 0 -.35rem 1.4rem rgba(36,36,36,.12), inset 0 1px rgba(255,255,255,.14); transform: none; transform-origin: center bottom; transition: height .58s cubic-bezier(.32, .72, .3, 1), border-radius .42s ease, box-shadow .35s ease; will-change: height; } .hero-start:not(.is-return).is-open { height: var(--mobile-contact-open-height); border-radius: 1.3rem 1.3rem 0 0; box-shadow: 0 -1rem 2.8rem rgba(36,36,36,.18), inset 0 1px rgba(255,255,255,.16); touch-action: pan-y; } .hero-start:not(.is-return).is-minimized { height: 4px; overflow: visible; border-radius: 0; } .hero-start:not(.is-return) .hero-start__toggle, .hero-start:not(.is-return).is-open .hero-start__toggle { z-index: 4; inset: 0 0 auto; width: 100%; height: var(--mobile-contact-folded-height); padding: 0; place-items: center; border-radius: 0; cursor: pointer; transform: none; } .hero-start:not(.is-return).is-minimized .hero-start__toggle { inset: auto max(1rem, env(safe-area-inset-right)) 0 auto; width: 7.75rem; height: 2.45rem; border: 1px solid rgba(255,255,255,.32); border-bottom: 0; border-radius: 1.15rem 1.15rem 0 0; background: #78a18c; box-shadow: 0 -.38rem 1rem rgba(36,36,36,.14), inset 0 1px rgba(255,255,255,.15); animation: contact-center-handle-in .46s cubic-bezier(.22, 1, .36, 1) both; } .hero-start:not(.is-return) .hero-start__toggle::after { content: none; animation: none; } .hero-start:not(.is-return) .hero-start__panel { top: 3.45rem; left: 50%; display: block; width: 100%; max-height: calc(var(--mobile-contact-open-height) - 4.2rem); overflow-x: hidden; overflow-y: auto; padding: 0 max(1rem, calc((100vw - 38rem) / 2)) max(1.5rem, env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; } .hero-start:not(.is-return).is-footer { right: 0; bottom: 0; left: 0; width: 100%; height: 9.5rem; overflow: hidden; border-radius: 0; transform: none; } .hero-start:not(.is-return).is-footer .hero-start__footer { top: 1.1rem; } }