/* ===== Architerra shared styles — used on all pages ===== */
:root{
  --bg:#F4F4F2;
  --ink:#0E0E10;
  --mute:#6B6B70;
  --line:#E5E4DF;
  --dark:#0B0B0D;
  --dark-mute:#9A9AA0;
  --dark-line:#1F1F22;
}
html{scroll-behavior:smooth;}
html,body{background:var(--bg); color:var(--ink); font-family:'Inter',ui-sans-serif,system-ui;-webkit-font-smoothing:antialiased;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

.serif{font-family:'Fraunces',Georgia,serif; font-feature-settings:"ss01","ss02"; letter-spacing:-0.02em;}
.label{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); font-weight:500;}
.label-dark{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--dark-mute); font-weight:500;}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:14px; padding:10px 12px 10px 18px; border-radius:999px; background:#fff; color:#0E0E10; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; font-weight:500; white-space:nowrap; transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.20);}
.btn .ico{width:30px; height:30px; border-radius:999px; background:#0E0E10; color:#fff; display:inline-flex; align-items:center; justify-content:center; flex:none; transition: transform .35s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease;}
.btn .ico svg{transition: transform .35s cubic-bezier(.22,.61,.36,1);}
.btn:hover .ico svg{transform: translate(2px, -2px);}
.btn:active{transform:translateY(0); transition-duration: .1s;}
.btn-ghost{background:transparent; border:1px solid #0E0E1015;}
.btn-dark{background:#0E0E10; color:#fff;}
.btn-dark .ico{background:#fff; color:#0E0E10;}

.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:#fff; color:#0E0E10; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;}

.link-arrow{display:inline-flex; align-items:center; gap:12px; position:relative; padding-bottom:6px;}
.link-arrow .link-text{position:relative; display:inline-block;}
.link-arrow .link-text::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .55s cubic-bezier(.65,.05,.36,1);}
.link-arrow:hover .link-text::after{transform: scaleX(1);}
.link-arrow svg{transition: transform .4s cubic-bezier(.22,.61,.36,1);}
.link-arrow:hover svg{transform: translateX(6px);}

.arrow{width:38px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff35;color:#fff; transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;}
.arrow:active{transform: scale(.96);}
.arrow-light{border-color:#0E0E1018;color:#0E0E10;}
@media (hover: hover){
  .arrow:hover{background:#fff; color:#0E0E10; border-color:#fff; transform: scale(1.06);}
  .arrow-light:hover{background:#0E0E10; color:#fff; border-color:#0E0E10;}
}

.dot{width:6px;height:6px;border-radius:999px;background:#0E0E10}
.ring-line{box-shadow:inset 0 0 0 1px var(--line)}
.img-fade{background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);}
.num{font-variant-numeric:tabular-nums;}
.dashed{background-image: linear-gradient(to right, #2a2a2e 50%, transparent 0%); background-size: 8px 1px; background-repeat: repeat-x; background-position: 0 50%; height:1px;}
.dashed-light{background-image: linear-gradient(to right, #d6d5d0 50%, transparent 0%); background-size: 8px 1px; background-repeat: repeat-x; background-position: 0 50%; height:1px;}

/* Cards (generic — project pages may extend) */
.card-img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-img{transform:scale(1.06)}
.card{display:block;}
.card .card-plus{transition: transform .35s ease, background .35s ease, color .35s ease;}
.card:hover .card-plus{transform:rotate(45deg); background:#0E0E10; color:#fff;}

/* Reveal animation */
.reveal{opacity:0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1), filter 1.2s ease;}
.revealed{opacity:1; transform: translateY(0);}

/* Brand SVG */
.brand-svg{display:inline-block; width:auto; fill:currentColor; flex:none; vertical-align:middle;}
#hero .brand-svg{height:46px;}
.topbar-brand .brand-svg{height:36px; color:#0E0E10;}
#mobileMenu .brand-svg{height:36px; color:#fff;}
#loader .brand-svg{height:64px;}
#contact .brand-svg, #contact a .brand-svg{height:30px; color:#fff;}
#footer .brand-svg{height:30px; color:#fff;}
@media (max-width: 767px){
  #hero .brand-svg{height:34px;}
  .topbar-brand .brand-svg{height:32px;}
  #mobileMenu .brand-svg{height:32px;}
  #loader .brand-svg{height:54px;}
}

/* ===== Sticky topbar (one component) ===== */
#topbar{position:fixed; top:14px; left:0; right:0; z-index:60; padding:0 16px; pointer-events:none; transform: translateY(-160%); opacity:0; transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .3s ease;}
#topbar.visible{transform: translateY(0); opacity:1; pointer-events:auto;}
@media (min-width: 768px){#topbar{padding:0 20px;}}
.topbar-inner{max-width:1440px; margin:0 auto; padding:10px 14px 10px 22px; border-radius:999px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 36px rgba(14,14,16,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}
@media (min-width: 768px){.topbar-inner{padding:10px 14px 10px 26px;}}
.topbar-brand{display:flex; flex-direction:column; color:#0E0E10; line-height:1; flex:none;}
.topbar-brand .serif{font-size:18px; letter-spacing:.04em;}
.topbar-brand .sub{font-size:8px; letter-spacing:.32em; margin-top:3px; opacity:.6;}
@media (min-width: 768px){.topbar-brand .serif{font-size:20px;} .topbar-brand .sub{font-size:9px;}}
.topbar-nav{display:none; align-items:center; gap:26px; font-size:13px; color:#0E0E10;}
@media (min-width: 1024px){.topbar-nav{display:flex;}}
.topbar-cta{display:flex; align-items:center; gap:10px; flex:none;}
.topbar-burger{width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#0E0E10; color:#fff; border:none;}
@media (min-width: 1024px){.topbar-burger{display:none;}}
.topbar-btn{display:none;}
@media (min-width: 1024px){.topbar-btn{display:inline-flex;}}

/* Topbar variants — same component, three visual states */
#topbar.topbar--white,
#topbar.topbar--black{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* topbar--white: same look as default (light glass pill, dark text) but visible from page load */
#topbar.topbar--white .topbar-inner{
  background: rgba(255,255,255,.62) !important;
}
/* topbar--black: TRANSPARENT (no bg, no border, no pill) with DARK text/logo — for light-bg pages */
#topbar.topbar--black .topbar-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#topbar.topbar--black .topbar-brand,
#topbar.topbar--black .topbar-brand .brand-svg,
#topbar.topbar--black .topbar-nav,
#topbar.topbar--black .topbar-nav a{ color: #0E0E10 !important; }
#topbar.topbar--black .topbar-btn{ background: #0E0E10 !important; color: #fff !important; }
#topbar.topbar--black .topbar-btn .ico{ background: #fff !important; color: #0E0E10 !important; }
#topbar.topbar--black .topbar-burger{ background: #0E0E10 !important; color: #fff !important; }

/* In-hero hamburger (visible only on mobile) */
.hero-burger{width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92); color:#0E0E10; border:none;}
@media (min-width: 1024px){.hero-burger{display:none;}}
.hero-toptalk{display:none;}
@media (min-width: 1024px){.hero-toptalk{display:inline-flex;}}

/* ===== Mobile fullscreen menu ===== */
#mobileMenu{position:fixed; inset:0; z-index:80; background:#0B0B0D; color:#fff; transform: translateY(-100%); transition: transform .55s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; visibility:hidden;}
#mobileMenu.open{transform: translateY(0); visibility:visible;}
#mobileMenu .mm-head{display:flex; align-items:center; justify-content:space-between; padding:22px 22px 0;}
#mobileMenu .mm-nav{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:24px; padding: 0 24px;}
#mobileMenu .mm-nav a{
  font-family:'Fraunces',serif;
  font-size:64px;
  line-height:1;
  letter-spacing:-.02em;
  color:#fff;
  opacity:0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.22,.61,.36,1);
}
@media (max-width:480px){#mobileMenu .mm-nav a{font-size:52px;}}
#mobileMenu.open .mm-nav a{opacity:.95; transform:translateY(0);}
#mobileMenu.open .mm-nav a:nth-child(1){transition-delay:.20s;}
#mobileMenu.open .mm-nav a:nth-child(2){transition-delay:.27s;}
#mobileMenu.open .mm-nav a:nth-child(3){transition-delay:.34s;}
#mobileMenu.open .mm-nav a:nth-child(4){transition-delay:.41s;}
#mobileMenu.open .mm-nav a:nth-child(5){transition-delay:.48s;}
#mobileMenu.open .mm-nav a:nth-child(6){transition-delay:.55s;}
#mobileMenu .mm-head .brand-svg{opacity:0; transform: translateY(-10px); transition: opacity .4s ease .1s, transform .55s cubic-bezier(.22,.61,.36,1) .1s;}
#mobileMenu .mm-close{opacity:0; transform: scale(.8); transition: opacity .4s ease .1s, transform .45s cubic-bezier(.34,1.56,.64,1) .15s;}
#mobileMenu.open .mm-head .brand-svg{opacity:1; transform:translateY(0);}
#mobileMenu.open .mm-close{opacity:1; transform:scale(1);}
#mobileMenu .mm-foot{padding: 0 24px 28px; opacity:0; transform: translateY(20px); transition: opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1);}
#mobileMenu.open .mm-foot{opacity:1; transform:translateY(0); transition-delay:.65s;}
#mobileMenu .mm-close{width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.10); color:#fff; display:inline-flex; align-items:center; justify-content:center; border:none;}

/* Top nav underline hover */
nav a{position:relative; padding:6px 1px; transition: opacity .25s ease;}
nav a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.65,.05,.36,1);}
nav a:hover::after{transform: scaleX(1);}
nav a{font-size: clamp(12px, 3.4vw, 14px) !important;}

/* Layout safety */
*, *::before, *::after{min-width: 0 !important;}
html, body{overflow-x: hidden !important; overflow-wrap: break-word; max-width: 100vw;}
img, video{max-width: 100%; height: auto;}
.grid > *, .flex > *{min-width: 0 !important; min-height: 0 !important;}
h1, h2, h3, p{max-width: 100%; overflow-wrap: anywhere; word-break: normal;}

/* Fluid typography */
section h2{font-size: clamp(26px, 5.6vw, 56px) !important; line-height: 1.06 !important; word-break: normal; overflow-wrap: anywhere;}
section h3{font-size: clamp(13.5px, 3.6vw, 15px) !important; overflow-wrap: anywhere;}
section p{font-size: clamp(13px, 3.4vw, 14px) !important; overflow-wrap: anywhere;}
.label, .label-dark{font-size: clamp(10px, 2.6vw, 11px) !important;}
.btn{font-size: clamp(11px, 2.8vw, 12px) !important;}
.stat-num{font-feature-settings:"ss01"; letter-spacing:-0.03em; font-size: clamp(38px, 8vw, 64px) !important;}

/* Mobile hero: 90vh / 85svh — fits visible viewport */
@media (max-width: 767px){
  #hero{height:100vh !important; height:100svh !important; min-height:0 !important;}
}

/* Mobile breakpoint: section padding override */
@media (max-width: 1023px){
  section.px-5{padding-left:20px !important; padding-right:20px !important;}
  section .max-w-\[1440px\].px-6, section .max-w-\[1440px\]{padding-left:0 !important; padding-right:0 !important; max-width:100% !important;}
  section.py-24{padding-top:56px !important; padding-bottom:56px !important;}
  section.pt-24{padding-top:56px !important;}
  section.pt-20{padding-top:44px !important;}
  section.pb-20{padding-bottom:44px !important;}
  .grid.grid-cols-12:not(.photo-strip):not([data-marquee]){display:block !important;}
  .grid.grid-cols-12:not(.photo-strip):not([data-marquee]) > *{width:100% !important; max-width:100% !important;}
  .grid.grid-cols-12:not(.photo-strip):not([data-marquee]) > * + *{margin-top:24px;}
  .label, .label-dark{font-size:11px !important; letter-spacing:0.18em !important; margin-bottom:18px !important; display:block;}
  section h2{font-size: clamp(30px, 7.8vw, 56px) !important; line-height:1.04 !important; letter-spacing:-0.01em; margin-bottom:0;}
  section h3{font-size:15px !important;}
  section p{font-size:14px !important; line-height:1.65 !important;}
  .stat-num{font-size: clamp(40px, 11vw, 64px) !important;}
  section .label + h2, section .label-dark + h2{margin-top:0;}
  section h2 + p, section h2 + div > p:first-child{margin-top:20px !important;}
  h1, h2, h3, p{width:100%; max-width:100%; word-break:normal; overflow-wrap:anywhere !important;}
}


/* Clickable footer links with hover-underline */
.footer-link{position:relative; display:inline-block; transition: color .3s ease, opacity .3s ease;}
.footer-link:hover{color:#fff;}
.footer-link::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.65,.05,.36,1);}
.footer-link:hover::after{transform: scaleX(1);}

/* ===== Lead form (shared component) ===== */
.form-field{display:block; position:relative;}
.form-label{display:block; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute); margin-bottom:10px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:8px 0; border:none; border-bottom:1px solid var(--line); background:transparent; font-family:inherit; font-size:15px; color:var(--ink); transition: border-color .25s ease;
}
.form-field input::placeholder, .form-field textarea::placeholder{color:#B6B5B0;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-bottom-color:var(--ink); outline:none;}
.form-field select{appearance:none; padding-right:24px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230E0E10' stroke-width='1.4'><path d='M1 1l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position: right 4px center;}
.form-check{appearance:none; width:16px; height:16px; border:1px solid var(--line); border-radius:3px; cursor:pointer; position:relative; flex:none; transition: background .2s, border-color .2s;}
.form-check:checked{background:var(--ink); border-color:var(--ink);}
.form-check:checked::after{content:""; position:absolute; left:4px; top:1px; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
@media (max-width: 1023px){
  #leadForm > div{padding:24px 18px !important;}
}
.form-label{font-size: clamp(10px, 2.6vw, 11px);}
.form-field input, .form-field select, .form-field textarea{font-size: clamp(14px, 3.6vw, 15px);}