/* ========================================================================== Vahedna Realestate — Landing Page Styles Palette: deep navy + warm gold | Type: Plus Jakarta Sans (single family) ========================================================================== */ /* --------------------------------------------------------------- Tokens */ :root{ /* Brand */ --navy-900:#0A1A2F; --navy-800:#0F2440; --navy-700:#16324F; --navy-600:#1E4165; --gold-500:#C9A227; --gold-400:#D9B94A; --gold-300:#E8D08A; /* Neutrals */ --ink:#0C1420; --body:#41505F; --muted:#64748B; --line:#E2E8F0; --surface:#FFFFFF; --surface-alt:#F7F9FC; --surface-sand:#FAF7F0; /* Type */ /* One family across the whole page. Both tokens are kept so the ~20 existing var(--font-display) call sites stay valid; display now differs from body by weight and tracking rather than by typeface. */ --font-display:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --font-body:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; /* Space + shape */ --container:1200px; --radius-sm:6px; --radius:12px; --radius-lg:20px; --shadow-sm:0 1px 3px rgba(12,20,32,.07), 0 1px 2px rgba(12,20,32,.04); --shadow:0 10px 30px rgba(12,20,32,.09); --shadow-lg:0 24px 60px rgba(12,20,32,.16); /* Motion */ --t-fast:150ms; --t:250ms; --ease:cubic-bezier(.4,0,.2,1); /* Z-scale */ --z-header:50; --z-backtop:40; --z-overlay:60; --z-modal:70; --z-lightbox:80; } /* --------------------------------------------------------------- Reset */ *,*::before,*::after{box-sizing:border-box;} /* overflow-x is deliberately NOT set on : any overflow value other than visible on the root turns it into a scroll container, and the sticky header then has no scrollport to pin against, so it scrolls away with the page. The sideways clamp lives on alone, which holds it without that cost. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--body); background:var(--surface); overflow-x:hidden; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.16; margin:0 0 .5em; /* A serif carried the headings by contrast; a sans has to do it with weight, so 600 goes to 700 and the tracking tightens a little more. */ font-weight:700; letter-spacing:-.025em; } p{margin:0 0 1rem;} :focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:2px;} /* Screen-reader only */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:absolute;left:50%;top:-100px;transform:translateX(-50%); background:var(--navy-900);color:#fff;padding:.75rem 1.5rem; z-index:var(--z-modal);border-radius:0 0 var(--radius) var(--radius); transition:top var(--t) var(--ease); } .skip-link:focus{top:0;} /* --------------------------------------------------------------- Layout */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;} .section{padding:clamp(64px,9vw,60px) 0;} .section--alt{background:var(--surface-alt);} .section--sand{background:var(--surface-sand);} .section-head{max-width:880px;margin:0 auto clamp(40px,5vw,64px);text-align:center;} .section-head--left{margin-inline:0;text-align:left;} .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-500);margin-bottom:1rem; } .eyebrow::before{content:"";width:28px;height:1px;background:var(--gold-500);} .section-head:not(.section-head--left) .eyebrow::after{content:"";width:28px;height:1px;background:var(--gold-500);} .section-title{font-size:clamp(2rem,4.2vw,2.15rem);margin-bottom:1rem;} .section-sub{font-size:.9rem;color:var(--muted);} /* --------------------------------------------------------------- Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; min-height:32px;padding:.6rem 2rem; font-size:.95rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; border-radius:var(--radius-sm);cursor:pointer; transition:background-color var(--t) var(--ease),color var(--t) var(--ease), border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); white-space:nowrap; } .btn svg{width:18px;height:18px;flex-shrink:0;} .btn--primary{background:var(--gold-500);color:var(--navy-900);box-shadow:var(--shadow-sm);} .btn--primary:hover{background:var(--gold-400);box-shadow:var(--shadow);} .btn--dark{background:var(--navy-900);color:#fff;} .btn--dark:hover{background:var(--navy-700);} .btn--ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;} .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;} .btn--outline{border:1.5px solid var(--navy-800);color:var(--navy-800);} .btn--outline:hover{background:var(--navy-900);color:#fff;border-color:var(--navy-900);} .btn--block{width:100%;} .btn[disabled],.btn.is-loading{opacity:.65;cursor:not-allowed;pointer-events:none;} /* ========================================================================== Header ========================================================================== */ .topbar{ background:var(--navy-900);color:rgba(255,255,255,.82); font-size:.83rem;letter-spacing:.03em; } .topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;} .topbar__list{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;} .topbar__item{display:inline-flex;align-items:center;gap:.5rem;transition:color var(--t) var(--ease);} .topbar__item svg{width:15px;height:15px;color:var(--gold-400);flex-shrink:0;} a.topbar__item:hover{color:#fff;} .topbar__socials{display:flex;gap:.35rem;} .topbar__social{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:50%; transition:background-color var(--t) var(--ease),color var(--t) var(--ease); } .topbar__social svg{width:16px;height:16px;} .topbar__social:hover{background:var(--gold-500);color:var(--navy-900);} .header{ position:sticky;top:0;z-index:var(--z-header); background:rgba(255,255,255,.97); /* The bar overlaps content as it scrolls under, so it is blurred rather than left semi-transparent over moving text. */ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow var(--t) var(--ease),background-color var(--t) var(--ease); } .header.is-stuck{box-shadow:var(--shadow);background:rgba(255,255,255,.99);} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:76px;} .logo{display:inline-flex;align-items:center;gap:.75rem;} .logo img{width: 100px;} .logo__mark{ width:42px;height:42px;flex-shrink:0;border-radius:var(--radius-sm); background:var(--navy-900);color:var(--gold-400); display:grid;place-items:center; } .logo__mark svg{width:24px;height:24px;} .logo__text{display:flex;flex-direction:column;line-height:1.1;} .logo__name{font-family:var(--font-display);font-size:1.22rem;font-weight:700;color:var(--navy-900);letter-spacing:.02em;} .logo__tag{font-size:.66rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-500);font-weight:600;} .nav{display:flex;align-items:center;gap:2rem;} .nav__link{ position:relative;font-size:.93rem;font-weight:500;color:var(--navy-800); padding:.5rem 0;transition:color var(--t) var(--ease); } .nav__link::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0; background:var(--gold-500);transition:width var(--t) var(--ease); } .nav__link:hover,.nav__link.is-active{color:var(--gold-500);} .nav__link:hover::after,.nav__link.is-active::after{width:100%;} .header__cta{display:flex;align-items:center;gap:1rem;} .burger{ display:none;width:46px;height:46px;border-radius:var(--radius-sm); align-items:center;justify-content:center;flex-direction:column;gap:5px; border:1px solid var(--line); } .burger span{display:block;width:20px;height:2px;background:var(--navy-900);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);} .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.is-open span:nth-child(2){opacity:0;} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-nav{ display:none;border-top:1px solid var(--line);background:#fff; padding:1rem 0 1.5rem; /* The header is sticky, so an open menu taller than the viewport could not be scrolled to - the Call button at its foot would be unreachable on short screens. Capping it against the header height keeps the menu itself scrollable instead. 100svh accounts for mobile browser chrome. */ max-height:calc(100svh - 76px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .mobile-nav a{ display:block;padding:.85rem 0;font-size:1rem;font-weight:500; color:var(--navy-800);border-bottom:1px solid var(--line); transition:color var(--t) var(--ease); } .mobile-nav a:hover{color:var(--gold-500);} .mobile-nav .btn{margin-top:1.25rem;} /* ========================================================================== Hero ========================================================================== */ .hero{ position:relative; min-height:clamp(600px,88vh,860px); display:flex;align-items:center; color:#fff;overflow:hidden; background:var(--navy-900); } .hero__bg{position:absolute;inset:0;} .hero__bg img{width:100%;height:100%;object-fit:cover;} .hero__bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(10,26,47,.94) 0%,rgba(10,26,47,.86) 42%,rgba(10,26,47,.66) 100%); } /* Two columns: copy on the left, callback form on the right. The form column is fixed-ish so it never stretches on ultrawide screens. */ .hero__inner{ position:relative;z-index:2;padding:clamp(72px,10vw,60px) 20px;width:100%; display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px); gap:clamp(2rem,5vw,4rem);align-items:center; } .hero__content{max-width:640px;} .hero__eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-400);margin-bottom:1.5rem; } .hero__eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-400);} .hero__title{ font-size:clamp(2.4rem,6vw,3.0rem); color:#fff;line-height:1.08;margin-bottom:1.5rem;font-weight:700; } .hero__title em{font-style:normal;color:var(--gold-400);display:block;} .hero__text{ font-size:clamp(1.02rem,1.6vw,1.0rem); color:rgba(255,255,255,.86);max-width:62ch;margin-bottom:2.25rem; } .hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;} .hero__stats{display:flex;flex-wrap:wrap;gap:clamp(1.75rem,5vw,3.5rem);} .hero__stat b{ display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--gold-400);line-height:1;margin-bottom:.4rem;font-weight:700; } .hero__stat span{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);} /* --------------------------------------------------------- Hero callback form */ .hero__aside{width:100%;} .hero-form{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); padding:clamp(1.6rem,2.6vw,2.1rem); box-shadow:var(--shadow-lg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .hero-form__eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-400);margin-bottom:.6rem; } .hero-form__eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-400);} .hero-form__title{color:#fff;font-size:clamp(1.45rem,2.4vw,1.8rem);margin-bottom:.5rem;} .hero-form__sub{font-size:.92rem;color:rgba(255,255,255,.76);margin-bottom:1.5rem;} .hero-form .field{margin-bottom:1rem;} .hero-form .field label{color:rgba(255,255,255,.82);} .hero-form .field input, .hero-form .field select{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff; } .hero-form .field input::placeholder{color:rgba(255,255,255,.5);} /* The shared select chevron is dark; on this panel it needs to be light. repeat/position/size must be restated here: the base rule sets them alongside its own background-image, and overriding only the image would otherwise let the icon tile across the field. */ .hero-form .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23E8D08A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; background-size:18px; } .hero-form .field select option{background:var(--navy-800);color:#fff;} .hero-form .field input:focus, .hero-form .field select:focus{ background:rgba(255,255,255,.16); border-color:var(--gold-400); box-shadow:0 0 0 3px rgba(201,162,39,.28); } .hero-form .field.has-error input, .hero-form .field.has-error select{ border-color:#FCA5A5;background:rgba(220,38,38,.18); } .hero-form .field__error{color:#FCA5A5;} .hero-form .btn{margin-top:.4rem;} .hero-form__note{ display:flex;align-items:center;justify-content:center;gap:.45rem; font-size:.82rem;color:rgba(255,255,255,.6);margin:1.1rem 0 0; } .hero-form__note svg{width:15px;height:15px;flex-shrink:0;} /* --------------------------------------------------------- Form fields */ .field{display:flex;flex-direction:column;gap:.4rem;min-width:0;} .field label{ font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .field select,.field input{ width:100%;min-height:40px;padding:.7rem .9rem; font-family:var(--font-body);font-size:.80rem;color:var(--ink); background:var(--surface-alt);border:1.5px solid var(--line);border-radius:var(--radius-sm); transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease); appearance:none; } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8rem center;background-size:18px; padding-right:2.4rem;cursor:pointer; } .field select:focus,.field input:focus{ border-color:var(--gold-500);background:#fff; box-shadow:0 0 0 3px rgba(201,162,39,.16);outline:none; } /* ========================================================================== Property cards ========================================================================== */ /* The filter bar reads as one segmented control rather than four loose pills: a single inset track holds the buttons, so the active state looks selected out of a set instead of merely coloured in. */ /* One row always. Wrapping put a lone "Villas" on a second line inside the track, which read as a broken control rather than a set of four; the row now scrolls sideways instead. width:fit-content keeps the track hugging the pills and centred while they all fit, and max-width lets it become a scrollport once they do not. */ .filters{ display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.35rem; width:fit-content;max-width:100%;margin:0 auto 2.75rem; padding:.35rem;border-radius:999px; background:var(--surface-alt);border:1px solid var(--line); overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; } /* The track is only four short pills, so a scrollbar under them costs more than it explains; a partly-visible pill at the edge is the affordance. */ .filters::-webkit-scrollbar{display:none;} .filter{ position:relative; flex:0 0 auto;white-space:nowrap; scroll-snap-align:center; min-height:42px;padding:.55rem 1.4rem;border-radius:999px; font-size:.86rem;font-weight:600;letter-spacing:.02em; color:var(--muted);background:transparent;border:0; transition:background-color var(--t) var(--ease),color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .filter:hover{color:var(--navy-900);background:rgba(255,255,255,.75);} .filter.is-active{ background:var(--navy-900);color:#fff; box-shadow:0 4px 12px rgba(10,26,47,.22); } .grid{display:grid;gap:1.75rem;} /* min() caps the track floor at the container width: without it a 320px min track cannot shrink on a 320px-wide phone and the cards overflow the page. */ .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));} .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));} .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));} .card{ position:relative; background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); overflow:hidden;display:flex;flex-direction:column; transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease), transform var(--t) var(--ease); } /* A gold hairline draws itself across the top edge on hover — the brand cue arrives with the lift instead of the border simply vanishing. */ .card::after{ content:"";position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); transform:scaleX(0);transform-origin:left; transition:transform 400ms var(--ease); z-index:2;pointer-events:none; } .card:hover{ box-shadow:var(--shadow-lg);border-color:transparent; transform:translateY(-4px); } .card:hover::after{transform:scaleX(1);} /* Filtered-out listings. display:none keeps the grid from leaving gaps. Cards returning to view fade in; .reveal handles the initial page load. */ .card.is-hidden{display:none;} .card.is-filtered-in{animation:cardIn 300ms var(--ease) both;} @keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} .card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-alt);} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease);} .card:hover .card__media img{transform:scale(1.07);} /* Scrim: badges and the favourite button sit on photography that can be light or dark, so a gradient at each end guarantees contrast for both. */ .card__media::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, rgba(10,26,47,.42) 0%, rgba(10,26,47,0) 32%, rgba(10,26,47,0) 62%, rgba(10,26,47,.34) 100%); } .card__badges{position:absolute;top:1rem;left:1rem;z-index:1;display:flex;gap:.45rem;flex-wrap:wrap;} .badge{ padding:.38rem .8rem;border-radius:999px; font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; background:rgba(255,255,255,.92);color:var(--navy-900); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 2px 8px rgba(10,26,47,.18); } .badge--gold{background:var(--gold-500);color:var(--navy-900);} .badge--navy{background:rgba(10,26,47,.88);color:#fff;} .card__fav{ position:absolute;top:1rem;right:1rem;z-index:1; width:40px;height:40px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.9);color:var(--navy-700); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 2px 8px rgba(10,26,47,.18); transition:background-color var(--t) var(--ease),color var(--t) var(--ease), transform var(--t) var(--ease); } .card__fav svg{width:19px;height:19px;} .card__fav:hover{background:var(--gold-500);color:var(--navy-900);transform:scale(1.08);} .card__fav.is-active{background:var(--gold-500);color:var(--navy-900);} .card__fav.is-active svg{fill:currentColor;} .card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1;} /* Title above price. The name identifies the listing; the price is the figure the eye returns to, so it gets the gold rule and the weight, and sits directly above the spec row it qualifies. */ .card__title{font-size:1.15rem;margin-bottom:.35rem;letter-spacing:-.02em;} .card__title a{transition:color var(--t) var(--ease);} .card__title a:hover{color:var(--gold-500);} .card__loc{ display:flex;align-items:center;gap:.4rem; font-size:.86rem;color:var(--muted);margin-bottom:.9rem; } .card__loc svg{width:15px;height:15px;color:var(--gold-500);flex-shrink:0;} /* The price is withheld, so the slot it held now carries the label and the consult call instead. The gold rule that marked the price stays on the label: it is what the eye lands on in that position, and losing it would leave the block reading as a stray button. */ .card__consult{ position:relative; display:flex;flex-direction:column;align-items:flex-start;gap:.6rem; margin:0 0 1.1rem;padding-left:.85rem; } .card__consult::before{ content:"";position:absolute;left:0;top:.15em;bottom:0; width:3px;border-radius:2px;background:var(--gold-500); } .card__consult-label{ font-family:var(--font-display);font-size:1.05rem;font-weight:700; color:var(--navy-900);line-height:1.2;letter-spacing:-.01em; } /* Narrower than the full-width Enquire button at the card's foot: two blocks of equal weight would read as two competing primary actions in one card. */ .card__consult-btn{ align-self:stretch; min-height:42px;padding:.6rem 1.1rem; font-size:.82rem; } .card__consult-btn svg{width:15px;height:15px;transition:transform var(--t) var(--ease);} .card__consult-btn:hover svg{transform:translateX(3px);} /* Specs read as a tinted stat strip rather than three floating icons, which keeps the bed/bath/area row distinct from the tabbed detail below it. */ .card__specs{ display:flex;flex-wrap:wrap;gap:.5rem 1rem; padding:.75rem .9rem;margin-top:0; border:1px solid var(--line);border-radius:calc(var(--radius) - 2px); background:var(--surface-alt); } .card__spec{ display:inline-flex;align-items:center;gap:.45rem; font-size:.84rem;font-weight:600;color:var(--navy-800); } .card__spec svg{width:17px;height:17px;color:var(--gold-500);flex-shrink:0;} /* The spec row is the slack absorber, so its own bottom gap has to be fixed rather than inherited from a margin that auto could eat. */ .card__specs+.ptabs{margin-top:0;} .section-foot{margin-top:3rem;text-align:center;} /* Visual order inside .card__body. The markup keeps the consult block first (it holds the enquiry handler's hook, so it leads for assistive tech); flex order lifts the name above it for reading, without touching markup. */ .card__title{order:1;} .card__loc{order:2;} .card__consult{order:3;} .card__specs{order:4;} .ptabs{order:5;} .card__enquire{order:6;} /* .btn is white-space:nowrap, so a long label cannot wrap and will push past the viewport on a small phone. Allow these to shrink and wrap instead. */ /* ========================================================================== About / Why us ========================================================================== */ /* align-items:start, not center: the media column is shorter than the copy, and centring it left a large dead gap under the image. */ .about{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2.5rem,5vw,4rem);align-items:stretch; } /* The media column is a flex column so the figure can absorb whatever height the copy column sets; with align-items:start it left ~200px of dead space under the stats card at desktop widths. */ .about__media{position:relative;display:flex;flex-direction:column;} .about__figure{position:relative;flex:1;min-height:420px;} .about__media img{ border-radius:var(--radius);box-shadow:var(--shadow); width:100%;height:100%;object-fit:cover;display:block; } /* The badge previously hung off the image edge and covered the building. It now sits inside the frame, anchored to the corner. */ .about__badge{ position:absolute;left:18px;bottom:18px;right:auto;width:max-content;max-width:calc(100% - 36px); background:var(--navy-900);color:#fff; padding:1.1rem 1.35rem;border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);text-align:left; } .about__badge b{ display:block;font-family:var(--font-display);font-size:1.9rem; color:var(--gold-400);line-height:1;margin-bottom:.2rem; } .about__badge span{ font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.8); } /* The stats moved under the image: they are credentials about the firm, and they give the media column the height it was missing. */ .about__stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; margin:1.5rem 0 0;padding:1.35rem 1.25rem; background:#fff;border:1px solid var(--line);border-radius:var(--radius); } .about__stats div{text-align:left;min-width:0;} .about__stats dt{ font-size:.68rem;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin-bottom:.3rem;line-height:1.3; } .about__stats dd{ margin:0;font-family:var(--font-display);font-size:1.5rem; font-weight:700;color:var(--navy-900);line-height:1; } .about__content .section-title{font-size:clamp(1.5rem,2.6vw,2rem);} .about__intro{margin-bottom:0;} /* Mission and vision: side by side so they read as a matched pair rather than two more paragraphs of the same grey body copy. */ .about__pillars{ display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.75rem; } .pillar{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.35rem 1.25rem; border-top:3px solid var(--gold-500); } .pillar__icon{ display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:var(--surface-sand);color:var(--gold-500);margin-bottom:.8rem; } .pillar__icon svg{width:19px;height:19px;} .pillar h3{font-size:1rem;margin-bottom:.4rem;} .pillar p{font-size:.88rem;line-height:1.6;color:var(--muted);margin:0;} .feature-list{ list-style:none;padding:0; display:grid;gap:1.15rem;margin:1.75rem 0 0; } .feature{display:flex;gap:1rem;} .feature__icon{ flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-sm); display:grid;place-items:center; background:var(--surface-sand);color:var(--gold-500); border:1px solid rgba(201,162,39,.24); } .feature__icon svg{width:21px;height:21px;} .feature h3{font-size:1.02rem;margin-bottom:.25rem;} .feature p{font-size:.92rem;line-height:1.6;color:var(--muted);margin:0;} .about__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem;} /* The two-column split stops earning its keep once the copy column is narrow enough that the pillars would sit one per line anyway. */ @media (max-width:980px){ .about{grid-template-columns:1fr;gap:2.5rem;} .about__media{max-width:560px;} .about__figure{flex:none;min-height:0;align-self:start;} .about__media img{aspect-ratio:4/5;height:auto;} } @media (max-width:560px){ .about__pillars{grid-template-columns:1fr;} .about__stats{grid-template-columns:1fr;gap:.9rem;text-align:left;} .about__actions .btn{width:100%;justify-content:center;} } /* ========================================================================== Services ========================================================================== */ /* A 2x2 bento: the lead service spans both columns on its row so the four offerings read as one primary plus three supporting, not four equals. */ .services-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; } .service--wide{grid-column:span 3;} .service{ display:flex;gap:1.25rem; background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.75rem;color:inherit;text-decoration:none; transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease), transform var(--t) var(--ease); } .service:hover{box-shadow:var(--shadow);border-color:var(--gold-300);} .service:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;} .service__body{min-width:0;flex:1;display:flex;flex-direction:column;} .service__icon{ width:52px;height:52px;border-radius:var(--radius-sm);flex-shrink:0; display:grid;place-items:center; background:var(--navy-900);color:var(--gold-400); transition:background-color var(--t) var(--ease),color var(--t) var(--ease); } .service__icon svg{width:26px;height:26px;} .service:hover .service__icon{background:var(--gold-500);color:var(--navy-900);} .service h3{font-size:1.12rem;margin-bottom:.45rem;} .service p{font-size:.94rem;color:var(--muted);margin:0;line-height:1.6;} .service__list{ list-style:none;margin:.9rem 0 0;padding:0;flex:none; display:flex;flex-wrap:wrap;gap:.45rem .5rem; } .service__list li{ font-size:.8rem;color:var(--body); background:var(--surface-sand);border:1px solid var(--line); border-radius:999px;padding:.32rem .7rem; } /* The CTA is a hover affordance, not a second link: the whole card is the anchor, so this only has to signal that the card is clickable. */ .service__cta{ display:inline-flex;align-items:center;gap:.4rem; margin-top:auto;padding-top:.9rem; font-size:.85rem;font-weight:600;color:var(--navy-600); } .service__go{width:15px;height:15px;transition:transform var(--t) var(--ease);} .service:hover .service__go{transform:translateX(4px);} /* The lead card gets a wider measure; its text would otherwise run the full three-column width and break the 65-75 character line-length guideline. */ .service--wide .service__body{max-width:62ch;} /* Three fixed columns squeeze the body copy into ribbons below ~900px, so the grid steps down to two and then one. The wide card always spans the full row, whatever the column count is. */ @media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} .service--wide{grid-column:span 2;} } @media (max-width:600px){ .services-grid{grid-template-columns:1fr;} .service--wide{grid-column:span 1;} /* Side-by-side icon and text leaves too little measure on a phone. */ .service{flex-direction:column;gap:1rem;} } /* ========================================================================== Team ========================================================================== */ .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:2rem;} .member{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;text-align:center; transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease); } .member:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-4px);} .member__photo{position:relative;overflow:hidden;background:var(--surface-alt);} .member__photo img{ display:block;width:100%;aspect-ratio:1/1;object-fit:cover; transition:transform 600ms var(--ease); } .member:hover .member__photo img{transform:scale(1.05);} .member__body{padding:1.25rem 1.25rem 1.5rem;} .member__body h3{font-size:1.12rem;margin-bottom:.25rem;} .member__role{ display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold-500);margin-bottom:0; } /* ========================================================================== Developer partners ========================================================================== */ .developers{padding:clamp(56px,7vw,80px) 0;background:var(--surface-sand);border-block:1px solid var(--line);} .developers__head{text-align:center;margin-bottom:clamp(28px,4vw,40px);} .developers__head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:.5rem;} .developers__head p{font-size:.95rem;color:var(--muted);margin:0 auto;max-width:560px;} /* Nine logos: a fixed 3-column grid divides evenly and avoids the ragged part-empty final row that auto-fit produces at wide viewports. */ .logo-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; } .logo-cell{ background:#fff;display:grid;place-items:center; padding:1.75rem 1.25rem;min-height:110px; transition:background-color var(--t) var(--ease); } .logo-cell:hover{background:var(--surface-alt);} .logo-cell img{ max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain; /* Logos arrive in mixed weights; desaturating unifies them and full colour on hover keeps each brand recognisable. */ filter:grayscale(1);opacity:.62; transition:filter var(--t) var(--ease),opacity var(--t) var(--ease); } .logo-cell:hover img{filter:none;opacity:1;} /* Two of the supplied logos are light artwork baked onto their own black background. Rather than invert the whole cell (which left a black box floating on navy), the artwork is inverted to black-on-white so it matches the other seven marks and sits flush in a white cell. */ .logo-cell--dark img{ filter:invert(1) grayscale(1) contrast(1.15); opacity:.68; } .logo-cell--dark:hover img{filter:invert(1) contrast(1.05);opacity:1;} /* Square logos read far smaller than wordmarks at the same max-height, so they are allowed extra height to sit at a comparable optical size. The BNW artwork also carries heavy internal padding, hence the scale bump. */ .logo-cell--square img{max-height:96px;transform:scale(1.28);} .logo-cell--square{overflow:hidden;} @media (hover:none){ .logo-cell img{filter:none;opacity:1;} .logo-cell--dark img{filter:invert(1) contrast(1.05);opacity:1;} } /* ========================================================================== Process ========================================================================== */ /*

and .quote__text a

; both carry default UA margins that would break the flex column, hence the explicit reset. */ .quote{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.5rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.9rem;height:100%; margin:0; } /* Identity row: avatar + name/meta take the free space, the rating is pinned right. align-items:start keeps the rating level with the name rather than centring against a two-line identity block. */ .quote__head{display:flex;align-items:flex-start;gap:.65rem;} .quote__id{min-width:0;flex:1;} .quote__avatar{ width:44px;height:44px;border-radius:50%;flex-shrink:0; background:var(--navy-900);color:var(--gold-400); display:grid;place-items:center; font-family:var(--font-display);font-weight:700;font-size:.95rem; } .quote__name{ display:flex;align-items:center;gap:.3rem; font-weight:600;color:var(--ink);font-size:1rem;line-height:1.3; } .quote__verified{width:15px;height:15px;color:var(--gold-500);flex-shrink:0;} .quote__meta{display:block;font-size:.76rem;color:var(--muted);margin-top:.12rem;white-space:nowrap;} /* The rating column never wraps: it is the one element whose width must stay predictable so the identity block gets whatever is left. */ .quote__rating{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;flex-shrink:0;} .quote__stars{display:flex;gap:.12rem;color:var(--gold-500);} .quote__stars svg{width:15px;height:15px;fill:currentColor;} .quote__score{font-size:.72rem;font-weight:600;color:var(--ink);white-space:nowrap;} .quote__pill{ margin:0;align-self:flex-start;max-width:100%; background:var(--surface-sand);border:1px solid var(--line);border-radius:999px; padding:.4rem .85rem;font-size:.76rem;color:var(--body);line-height:1.35; white-space:nowrap; } .quote__pill span{font-weight:600;color:var(--ink);} /* flex:1 lets the quote absorb the height difference between cards so the role line stays pinned to the bottom edge across a row. */ .quote__text{font-size:.95rem;line-height:1.6;color:var(--body);margin:0;} .quote__more{ align-self:flex-start;background:none;border:0;padding:0; font:inherit;font-size:.86rem;font-weight:600;color:var(--navy-600); cursor:pointer;text-decoration:underline;text-underline-offset:2px; } .quote__more:hover{color:var(--navy-900);} /* The link sits inline, so padding it would move the text. A pseudo-element grows the tap target to 44px without affecting layout. */ .quote__more{position:relative;} .quote__more::after{ content:"";position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%); } .quote__more:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px;} .quote__role{ display:block;font-size:.82rem;color:var(--muted); margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line); } /* ========================================================================== Gallery ========================================================================== */ .gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:1rem; } /* Feature tiles span two columns to break up the uniform grid. */ .gallery__item--wide{grid-column:span 2;} .gallery__item{ position:relative;overflow:hidden; padding:0;border:0;border-radius:var(--radius); background:var(--surface-alt);cursor:pointer; transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease); } .gallery__item:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);} .gallery__item img{ display:block;width:100%;height:100%;object-fit:cover; transition:transform 600ms var(--ease); } .gallery__item:hover img{transform:scale(1.07);} .gallery__overlay{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:flex-end; padding:1.25rem;text-align:left; background:linear-gradient(to top,rgba(10,26,47,.88) 0%,rgba(10,26,47,.25) 55%,transparent 100%); opacity:0;transition:opacity var(--t) var(--ease); } .gallery__item:hover .gallery__overlay, .gallery__item:focus-visible .gallery__overlay{opacity:1;} .gallery__cat{ font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-400);margin-bottom:.3rem; } .gallery__title{ font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:#fff;line-height:1.3; } .gallery__zoom{ position:absolute;top:1rem;right:1rem; width:38px;height:38px;border-radius:50%; display:grid;place-items:center; background:var(--gold-500);color:var(--navy-900); } .gallery__zoom svg{width:18px;height:18px;} .gallery__item:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;} /* Filtered-out tiles, matching the property grid's approach. */ .gallery__item.is-hidden{display:none;} /* ========================================================================== Lightbox ========================================================================== */ .lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);display:grid;place-items:center;} .lightbox[hidden]{display:none;} .lightbox__backdrop{position:absolute;inset:0;background:rgba(6,14,26,.92);} .lightbox__panel{ position:relative;z-index:1; width:min(1100px,92vw); display:flex;align-items:center;gap:1rem; } .lightbox__figure{ flex:1;margin:0;min-width:0; display:flex;flex-direction:column;align-items:center;gap:.9rem; } .lightbox__figure img{ display:block;max-width:100%;max-height:74vh; width:auto;height:auto;object-fit:contain; border-radius:var(--radius);box-shadow:var(--shadow-lg); background:var(--navy-800); } .lightbox__caption{ display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center; text-align:center; } .lightbox__title{ font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:#fff; } .lightbox__count{font-size:.85rem;color:rgba(255,255,255,.62);letter-spacing:.06em;} .lightbox__close{ position:absolute;top:-52px;right:0; width:44px;height:44px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.12);color:#fff; transition:background-color var(--t) var(--ease),color var(--t) var(--ease); } .lightbox__close svg{width:22px;height:22px;} .lightbox__close:hover{background:var(--gold-500);color:var(--navy-900);} .lightbox__nav{ flex-shrink:0;width:48px;height:48px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.12);color:#fff; transition:background-color var(--t) var(--ease),color var(--t) var(--ease); } .lightbox__nav svg{width:22px;height:22px;} .lightbox__nav:hover{background:var(--gold-500);color:var(--navy-900);} /* Scroll lock while the lightbox is open. */ body.has-lightbox{overflow:hidden;} @media (max-width:1100px){ .gallery{grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;} } @media (max-width:760px){ .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:.75rem;} /* Overlays are hover-driven; on touch there is no hover, so show them. */ .gallery__overlay{opacity:1;background:linear-gradient(to top,rgba(10,26,47,.85) 0%,transparent 60%);} .gallery__zoom{width:32px;height:32px;top:.6rem;right:.6rem;} .gallery__zoom svg{width:15px;height:15px;} .gallery__title{font-size:.92rem;} /* Arrows move below the image so the picture keeps the full width. */ .lightbox__panel{flex-direction:column;gap:.75rem;} .lightbox__panel .lightbox__nav{position:absolute;bottom:-4px;} .lightbox__nav--prev{left:18%;} .lightbox__nav--next{right:18%;} .lightbox__figure{padding-bottom:3.5rem;} .lightbox__figure img{max-height:62vh;} .lightbox__close{top:-46px;right:auto;left:50%;transform:translateX(-50%);} } @media (max-width:460px){ .gallery{grid-template-columns:1fr;grid-auto-rows:210px;} /* A full-width column makes the wide modifier meaningless. */ .gallery__item--wide{grid-column:span 1;} } @media (hover:none){ .gallery__overlay{opacity:1;} } /* ========================================================================== Testimonial slider ========================================================================== */ .slider{position:relative;} /* Focusable so arrow keys can drive it; the ring sits clear of the cards. */ .slider:focus-visible{outline:2px solid var(--gold-500);outline-offset:6px;border-radius:var(--radius);} /* The viewport clips the track; padding-block leaves room for the cards' hover lift and shadow, which would otherwise be cut off by overflow. */ .slider__viewport{overflow:hidden;padding:4px 0 8px;} .slider__track{ display:flex; transition:transform 500ms var(--ease); will-change:transform; } /* Width is set per-slide by JS from the visible-count, so the track can hold any number of cards without hardcoding a breakpoint-by-breakpoint width. */ .slider__slide{flex:0 0 auto;padding:0 .875rem;box-sizing:border-box;} .slider__slide .quote{height:100%;} /* Grab cursor hints that the track can be dragged. */ .slider__viewport{cursor:grab;} .slider__viewport.is-dragging{cursor:grabbing;} .slider__viewport.is-dragging .slider__track{transition:none;} .slider__controls{ display:flex;align-items:center;justify-content:center; gap:1.25rem;margin-top:2.25rem; } .slider__arrow{ width:48px;height:48px;border-radius:50%;flex-shrink:0; display:grid;place-items:center; background:#fff;color:var(--navy-900); border:1.5px solid var(--line); transition:background-color var(--t) var(--ease),color var(--t) var(--ease), border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .slider__arrow svg{width:20px;height:20px;} .slider__arrow:hover{background:var(--navy-900);color:#fff;border-color:var(--navy-900);box-shadow:var(--shadow-sm);} .slider__arrow[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;} .slider__dots{display:flex;align-items:center;gap:.5rem;} .slider__dot{ width:10px;height:10px;border-radius:50%;padding:0; background:var(--line);border:0; transition:background-color var(--t) var(--ease),width var(--t) var(--ease); } .slider__dot:hover{background:var(--gold-300);} .slider__dot.is-active{background:var(--gold-500);width:28px;border-radius:999px;} /* Dots are 10px, well under the 44px touch minimum, so each carries an invisible tap target that meets it without changing the visual size. */ .slider__dot{position:relative;} .slider__dot::after{ content:"";position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%); } @media (max-width:640px){ .slider__slide{padding:0 .5rem;} .slider__controls{gap:1rem;margin-top:1.75rem;} .slider__arrow{width:44px;height:44px;} .topbar{display: none;} } @media (prefers-reduced-motion:reduce){ .slider__track{transition:none;} } /* ========================================================================== CTA banner ========================================================================== */ .cta-band{ position:relative;background:var(--navy-900);color:#fff;overflow:hidden; padding:clamp(56px,7vw,88px) 0; } .cta-band::before{ content:"";position:absolute;top:-120px;right:-80px; width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.18) 0%,transparent 70%); } .cta-band__inner{ position:relative;display:flex;align-items:center;justify-content:space-between; gap:2rem;flex-wrap:wrap; } .cta-band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.5rem;} .cta-band p{color:rgba(255,255,255,.8);margin:0;max-width:55ch;} .cta-band__actions{display:flex;gap:1rem;flex-wrap:wrap;} /* ========================================================================== Contact ========================================================================== */ .contact__head{margin-bottom:1.75rem;} /* Call / WhatsApp / email are the highest-intent actions in this section, so they sit above the fold of the block as tappable cards rather than as text inside the detail list. */ .contact__actions{ display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem; } .action{ display:flex;align-items:center;gap:.9rem; background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.1rem 1.25rem;text-decoration:none;color:inherit;min-width:0; transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .action:hover{border-color:var(--gold-300);box-shadow:var(--shadow-sm);} .action:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;} .action__icon{ flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-sm); display:grid;place-items:center; background:var(--navy-900);color:var(--gold-400); } .action__icon svg{width:21px;height:21px;} .action__icon--wa{background:#25D366;color:#fff;} .action__body{min-width:0;flex:1;} .action__label{ display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);font-weight:600;margin-bottom:.15rem; } /* The email address is the one value long enough to overflow its card. It wraps rather than ellipsing: truncating hides the address the card exists to show. */ .action__value{ display:block;font-size:.95rem;font-weight:600;color:var(--ink); line-height:1.35;overflow-wrap:anywhere; } .action__go{ width:16px;height:16px;flex-shrink:0;color:var(--navy-600); transition:transform var(--t) var(--ease); } .action:hover .action__go{transform:translateX(4px);} .contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,5vw,4rem);align-items:stretch;} .contact__side{display:flex;flex-direction:column;} .info-list{display:grid;gap:1.25rem;margin:0 0 1.5rem;} .info{display:flex;gap:1.15rem;align-items:flex-start;} .info__icon{ flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-sm); display:grid;place-items:center; background:var(--navy-900);color:var(--gold-400); } .info__icon svg{width:21px;height:21px;} .info h3{ font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted); margin-bottom:.3rem;font-family:var(--font-body);font-weight:600; } .info p,.info a{font-size:1rem;color:var(--ink);margin:0;line-height:1.55;} .info__note{font-size:.88rem!important;color:var(--muted)!important;margin-top:.2rem!important;} .info a{transition:color var(--t) var(--ease);} .info a:hover{color:var(--gold-500);} .map{ border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);box-shadow:var(--shadow-sm); /* flex:1 lets the map absorb the height difference against the form column instead of leaving dead space beneath it. */ flex:1;min-height:240px; } .map iframe{display:block;width:100%;height:100%;min-height:240px;border:0;} .map__link{ display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start; margin-top:.9rem;font-size:.88rem;font-weight:600; color:var(--navy-600);text-decoration:none; } .map__link svg{width:15px;height:15px;} .map__link:hover{color:var(--gold-500);text-decoration:underline;} .form-card__head{margin-bottom:1.6rem;} .form-card__head h3{font-size:1.35rem;margin-bottom:.35rem;} .form-card__head p{color:var(--muted);font-size:.94rem;margin:0;line-height:1.6;} .form-note{ font-size:.82rem;color:var(--muted);text-align:center;margin:.9rem 0 0;line-height:1.5; } @media (max-width:900px){ .contact__actions{grid-template-columns:1fr;gap:.75rem;} .map{flex:none;} } .form-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.75rem,3.5vw,2.5rem);box-shadow:var(--shadow); } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;margin-bottom:1.15rem;} .field--full{grid-column:1/-1;} .field textarea{ width:100%;min-height:130px;resize:vertical;padding:.8rem .9rem; font-family:var(--font-body);font-size:.97rem;color:var(--ink); background:var(--surface-alt);border:1.5px solid var(--line);border-radius:var(--radius-sm); transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background-color var(--t) var(--ease); } .field textarea:focus{ border-color:var(--gold-500);background:#fff; box-shadow:0 0 0 3px rgba(201,162,39,.16);outline:none; } .field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#DC2626;background:#FEF2F2; } .field__error{ display:none;align-items:center;gap:.35rem; font-size:.82rem;color:#DC2626;font-weight:500; } .field__error svg{width:14px;height:14px;flex-shrink:0;} .field.has-error .field__error{display:flex;} .form-note{font-size:.85rem;color:var(--muted);margin:1rem 0 0;text-align:center;} .form-status{ display:none;align-items:flex-start;gap:.7rem; padding:1rem 1.15rem;border-radius:var(--radius-sm);margin-bottom:1.25rem; font-size:.94rem;line-height:1.5; } .form-status svg{width:20px;height:20px;flex-shrink:0;margin-top:1px;} .form-status.is-visible{display:flex;} .form-status--ok{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;} .form-status--err{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;} /* ========================================================================== Footer ========================================================================== */ .footer{ background:var(--navy-900);color:rgba(255,255,255,.72); padding:0 0 0; /* A hairline of gold across the very top separates the footer from whatever section precedes it without needing a heavy border. */ border-top:3px solid var(--gold-500); } /* ---- Closing call to action ---- */ .footer__cta{ background:linear-gradient(135deg,rgba(201,162,39,.14),rgba(201,162,39,.04)); border-bottom:1px solid rgba(255,255,255,.1); padding:clamp(2rem,4vw,3rem) 0; } .footer__cta-inner{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:1.5rem 2rem; } .footer__cta h2{ color:#fff;font-size:clamp(1.25rem,2.2vw,1.65rem);margin:0 0 .35rem; } .footer__cta p{margin:0;font-size:.95rem;color:rgba(255,255,255,.7);max-width:52ch;} .footer__cta-actions{display:flex;flex-wrap:wrap;gap:.75rem;} /* ---- Main grid ---- */ .footer__grid{ display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:2.5rem; padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(2rem,3vw,2.5rem); } .footer h4{ font-size:.8rem;letter-spacing:.14em;text-transform:uppercase; color:#fff;margin-bottom:1.25rem;font-family:var(--font-body);font-weight:600; } .footer .logo__name{color:#fff;} .flogo{display:inline-block;} .flogo img{width:150px;background:#fff;padding:10px;border-radius:10px;display:block;} .footer__about{font-size:.93rem;line-height:1.7;margin:1.35rem 0 1.5rem;max-width:38ch;} .footer__links{list-style:none;margin:0;padding:0;} .footer__links li{margin-bottom:.65rem;} .footer__links a{ font-size:.93rem;text-decoration:none;color:inherit; transition:color var(--t) var(--ease),padding-left var(--t) var(--ease); } .footer__links a:hover{color:var(--gold-400);padding-left:6px;} .footer__contact{list-style:none;margin:0;padding:0;} .footer__contact li{ display:flex;gap:.75rem;margin-bottom:1rem;font-size:.93rem;line-height:1.6; } .footer__contact svg{width:17px;height:17px;color:var(--gold-400);flex-shrink:0;margin-top:3px;} .footer__contact a{color:inherit;text-decoration:none;transition:color var(--t) var(--ease);} .footer__contact a:hover{color:var(--gold-400);} /* Secondary detail on its own line, dimmer than the value it qualifies. */ .footer__hint{display:block;font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.15rem;} .footer__socials{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem;} .footer__social{ width:40px;height:40px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.08);color:#fff; border:1px solid rgba(255,255,255,.12); transition:background-color var(--t) var(--ease),color var(--t) var(--ease), transform var(--t) var(--ease); } .footer__social svg{width:17px;height:17px;} .footer__social:hover{background:var(--gold-500);color:var(--navy-900);transform:translateY(-2px);} .footer__social:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;} /* ---- Bottom bar ---- */ .footer__bottom{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:.75rem 1.5rem; padding:1.35rem 0 1.5rem; border-top:1px solid rgba(255,255,255,.1); font-size:.86rem; } .footer__bottom p{margin:0;} .footer__legal{ list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem; } .footer__legal a{color:inherit;text-decoration:none;transition:color var(--t) var(--ease);} .footer__bottom a:hover{color:var(--gold-400);} @media (max-width:900px){ /* Three columns keeps Company, Communities and Contact on one row; at two columns Contact was pushed onto a row of its own with the right half empty. */ .footer__grid{grid-template-columns:repeat(3,1fr);gap:2rem;} /* The brand block reads as an intro, so it spans rather than sitting in a narrow column beside a link list. */ .footer__brand{grid-column:1 / -1;} .footer__about{max-width:60ch;} } @media (max-width:700px){ .footer__grid{grid-template-columns:1fr 1fr;} .footer__col:last-child{grid-column:1 / -1;} } @media (max-width:560px){ .footer__grid{grid-template-columns:1fr;} .footer__cta-inner{flex-direction:column;align-items:flex-start;} .footer__cta-actions{width:100%;} .footer__cta-actions .btn{width:100%;justify-content:center;} .footer__bottom{flex-direction:column;align-items:flex-start;} } /* ========================================================================== Floating actions ========================================================================== */ .back-to-top{ position:fixed;right:24px;bottom:24px;z-index:var(--z-backtop); width:48px;height:48px;border-radius:50%; display:grid;place-items:center; background:var(--navy-900);color:#fff;box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity var(--t) var(--ease),visibility var(--t) var(--ease), transform var(--t) var(--ease),background-color var(--t) var(--ease); } .back-to-top svg{width:20px;height:20px;} .back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .back-to-top:hover{background:var(--gold-500);color:var(--navy-900);} .whatsapp-fab{ position:fixed;left:24px;bottom:24px;z-index:var(--z-backtop); width:54px;height:54px;border-radius:50%; display:grid;place-items:center; background:#25D366;color:#fff;box-shadow:var(--shadow); transition:background-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .whatsapp-fab svg{width:28px;height:28px;} .whatsapp-fab:hover{background:#1DA851;box-shadow:var(--shadow-lg);} /* ========================================================================== Reveal animation ========================================================================== */ .reveal{opacity:0;transform:translateY(24px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);} .reveal.is-in{opacity:1;transform:none;} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1100px){ .hero__inner{grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:2.5rem;} /* The header needs logo(144) + nav(668) + CTA(180) + 48 padding + 48 gaps = ~1088px. Collapsing to the burger at 900px left the CTA overflowing the viewport everywhere from ~901px to ~1090px, so the switch happens here. */ .nav,.header__cta .btn{display:none;} .burger{display:flex;} } @media (max-width:900px){ .about{grid-template-columns:1fr;} /* Stack the hero: copy first, callback form beneath it. */ .hero__inner{grid-template-columns:1fr;gap:2.5rem;} .hero__content{max-width:none;} .hero__aside{max-width:520px;} .team-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));} .about__media{max-width:520px;} .about__badge{right:16px;} .contact{grid-template-columns:1fr;} .topbar__item--hide{display:none;} } @media (max-width:640px){ .topbar__inner{justify-content:center;min-height:auto;padding:.6rem 0;} .topbar__list{justify-content:center;gap:1rem;font-size:.8rem;} .topbar__socials{display:none;} .hero{min-height:auto;} .hero__actions .btn{width:100%;} .hero__aside{max-width:none;} .hero-form{padding:1.4rem;} .form-grid{grid-template-columns:1fr;} .logo-grid{grid-template-columns:repeat(2,1fr);} .footer__bottom{justify-content:center;text-align:center;} .cta-band__inner{flex-direction:column;align-items:flex-start;} .cta-band__actions .btn{width:100%;} .whatsapp-fab{left:16px;bottom:16px;width:50px;height:50px;} .back-to-top{right:16px;bottom:16px;} .team-grid{grid-template-columns:1fr;} } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } .reveal{opacity:1;transform:none;} .card:hover .card__media img{transform:none;} } /* ========================================================================== Print ========================================================================== */ @media print{ .header,.topbar,.back-to-top,.whatsapp-fab,.filters,.cta-band,.hero__aside{display:none;} body{color:#000;} .hero{min-height:auto;color:#000;background:none;} .hero__bg{display:none;} } /* ========================================================================== Property card tabs ========================================================================== */ /* Pushed to the bottom of the card body so tab strips line up across a row even when titles or locations wrap to different heights. */ /* The slack in a card of unequal title/location height is absorbed ABOVE the spec row, not here: with margin-top:auto on .ptabs the tab strips drifted to different heights across a row. Pinning the spec row down instead means the strip, panel and button all start on the same baseline in every card. */ .ptabs{padding-top:1.1rem;} /* Underline tabs rather than a pill track. Four labels in a 1/4 column are too cramped for a pill to sit comfortably inside, and the active pill's drop shadow made the row look lopsided; a rule under the active tab aligns to the same baseline in all four columns whatever the label length. */ .ptabs__list-wrap{ display:grid;grid-template-columns:repeat(4,1fr); gap:0;margin-bottom:1rem; background:transparent;border:0; border-bottom:1px solid var(--line); border-radius:0;padding:0; } .ptabs__tab{ position:relative; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.3rem; min-height:52px;padding:.4rem .15rem .6rem; border:0;border-radius:0; background:transparent;color:var(--muted);cursor:pointer; font-family:var(--font-body);font-size:.68rem;font-weight:600; letter-spacing:.02em;line-height:1.2;text-align:center; transition:color var(--t) var(--ease); } /* The indicator sits on the shared bottom rule, so it reads as one continuous strip instead of four separate boxes. */ .ptabs__tab::after{ content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:2px; background:var(--gold-500);border-radius:2px; transform:scaleX(0);transform-origin:center; transition:transform 260ms var(--ease); } .ptabs__tab svg{width:17px;height:17px;flex-shrink:0;transition:color var(--t) var(--ease);} .ptabs__tab:hover{color:var(--navy-900);} .ptabs__tab:hover svg{color:var(--navy-700);} .ptabs__tab.is-active{background:transparent;color:var(--navy-900);font-weight:700;box-shadow:none;} .ptabs__tab.is-active svg{color:var(--gold-500);} .ptabs__tab.is-active::after{transform:scaleX(1);} .ptabs__tab:focus-visible{outline:2px solid var(--gold-500);outline-offset:-3px;border-radius:4px;} /* The panel is an inset well, so the switched content reads as a drawer belonging to the strip above it rather than as loose text in the card. */ .ptabs__panel{ min-height:156px; padding:.95rem 1rem; background:var(--surface-alt); border:1px solid var(--line); border-radius:calc(var(--radius) - 2px); } .ptabs__panel[hidden]{display:none;} .ptabs__panel.is-active{animation:tabIn 260ms var(--ease) both;} @keyframes tabIn{ from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} } .ptabs__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;} .ptabs__list li{ display:grid;grid-template-columns:16px 1fr;gap:.55rem;align-items:start; font-size:.82rem;line-height:1.5;color:var(--body); } .ptabs__list svg{width:14px;height:14px;color:var(--gold-500);margin-top:.28rem;} /* Amenities are short fragments, so two columns read better than one list. */ .ptabs__list--grid{grid-template-columns:1fr 1fr;gap:.55rem .85rem;} /* Amenity icons are pictorial rather than a repeated tick, so they carry more detail: slightly larger, and navy so six of them in a grid read as a list instead of a block of gold. The gold is kept for the tick lists, where it is a single repeated mark. */ .ptabs__list--grid svg{ width:16px;height:16px; color:var(--navy-600); margin-top:.18rem; } .ptabs__list--grid li{grid-template-columns:18px 1fr;} .ptabs__plan{margin:0;display:grid;gap:.45rem;} .ptabs__row{ display:flex;justify-content:space-between;align-items:baseline;gap:.75rem; padding-bottom:.45rem;border-bottom:1px dashed rgba(100,116,139,.32); } .ptabs__row:last-child{border-bottom:0;padding-bottom:0;} .ptabs__row dt{font-size:.78rem;color:var(--muted);letter-spacing:.02em;} .ptabs__row dd{ margin:0;font-size:.82rem;font-weight:700;color:var(--navy-900); text-align:right;line-height:1.4; } .card__enquire{margin-top:1.15rem;justify-content:center;} .card__enquire svg{width:16px;height:16px;transition:transform var(--t) var(--ease);} .card__enquire:hover svg{transform:translateX(3px);} /* ========================================================================== Enquiry modal ========================================================================== */ .modal{position:fixed;inset:0;z-index:var(--z-lightbox);display:grid;place-items:center;padding:1.25rem;} .modal[hidden]{display:none;} .modal__backdrop{position:absolute;inset:0;background:rgba(6,14,26,.72);backdrop-filter:blur(3px);} .modal__panel{ position:relative;z-index:1; width:min(520px,100%);max-height:calc(100vh - 2.5rem);overflow-y:auto; padding:clamp(1.5rem,4vw,2.25rem); background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg); animation:modalIn 300ms var(--ease) both; } @keyframes modalIn{ from{opacity:0;transform:translateY(12px) scale(.98);} to{opacity:1;transform:none;} } .modal__close{ position:absolute;top:.85rem;right:.85rem; width:40px;height:40px;border-radius:50%; display:grid;place-items:center; background:var(--surface-alt);color:var(--navy-900); transition:background-color var(--t) var(--ease),color var(--t) var(--ease); } .modal__close svg{width:20px;height:20px;} .modal__close:hover{background:var(--navy-900);color:#fff;} .modal__head{margin-bottom:1.35rem;padding-right:2.5rem;} .modal__eyebrow{ font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-500);margin-bottom:.4rem; } .modal__title{font-size:1.35rem;margin-bottom:.5rem;line-height:1.25;} .modal__property{ display:inline-flex;align-items:center;gap:.45rem;margin:0; padding:.35rem .7rem;border-radius:999px; background:var(--surface-alt); font-size:.85rem;font-weight:600;color:var(--navy-900); } .modal__note{ margin:1rem 0 0;text-align:center; font-size:.82rem;color:var(--muted);line-height:1.55; } .modal__note a{color:var(--navy-900);font-weight:600;} .modal__note a:hover{color:var(--gold-500);} /* Scroll lock, matching the lightbox. */ body.has-modal{overflow:hidden;} @media (max-width:1100px){ /* Three cards become two, so each card is wider — labels fit beside icons. */ .ptabs__tab{font-size:.68rem;} } @media (max-width:640px){ .ptabs__list--grid{grid-template-columns:1fr;} .ptabs__panel{min-height:0;padding:.85rem .9rem;} /* The track stays a pill now that it scrolls rather than wrapping. */ .filters{margin-bottom:2rem;} .ptabs__tab{font-size:.64rem;min-height:50px;} .ptabs__tab svg{width:16px;height:16px;} /* Labels wrap to two lines on a phone rather than shrinking illegibly. */ .ptabs__tab::after{left:8%;right:8%;} .modal{padding:.75rem;} .modal__panel{padding:1.35rem 1.15rem;max-height:calc(100vh - 1.5rem);} .modal__title{font-size:1.2rem;} } /* ========================================================================== Narrow phones (<=400px) A 24px gutter on each side costs 48px of a 320px screen. These rules pull the page in rather than letting fixed paddings and nowrap labels push content past the viewport edge. ========================================================================== */ @media (max-width:400px){ .container{padding-inline:16px;} /* Long unbroken strings (email, URLs) have no wrap opportunity and would spill past a narrow column; allow them to break mid-word. */ .info p,.info a,.footer a{overflow-wrap:anywhere;} /* .btn is white-space:nowrap, so long labels cannot wrap and overflow. */ .section-foot .btn, .contact .btn, .modal .btn{ width:100%;white-space:normal;padding-inline:1rem; line-height:1.3;min-height:56px; } .hero-form{padding:1.15rem;} .card__body{padding:1.15rem;} .ptabs__tab{font-size:.6rem;padding-inline:.05rem;} .ptabs__panel{padding:.8rem;} .card__specs{padding:.65rem .75rem;gap:.45rem .8rem;} .filter{padding-inline:1rem;} .gallery{gap:.5rem;} } /* ========================================================================== Developers - alternative design (.dev2) A split layout: copy and proof points on the left, logo panel on the right. Namespaced away from .developers/.logo-cell so both designs can coexist. ========================================================================== */ .dev2{ padding:clamp(56px,7vw,88px) 0; background:var(--navy-900); border-block:1px solid var(--navy-600); } .dev2__inner{ display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,3.5rem);align-items:center; } .dev2__intro .eyebrow{color:var(--gold-400);} .dev2__intro .eyebrow::before, .dev2__intro .eyebrow::after{background:var(--gold-400);} .dev2__intro .section-title{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);} .dev2__lead{ font-size:.97rem;line-height:1.7;margin:0; color:rgba(255,255,255,.72);max-width:46ch; } /* Proof points sit between the claim and the logos so the numbers read as evidence for the sentence above them. */ .dev2__stats{ display:grid;grid-template-columns:repeat(3,auto);justify-content:start; gap:1.5rem;margin:1.75rem 0 0; } .dev2__stat dt{ font-size:.74rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:rgba(255,255,255,.55);margin-bottom:.3rem; } .dev2__stat dd{ margin:0;font-family:var(--font-display);font-size:1.6rem; font-weight:700;color:var(--gold-400);line-height:1; } .dev2__cta{margin-top:2rem;} /* The panel is a light card on the dark section: the logos are dark artwork, so they need a light ground to sit on rather than being inverted. */ .dev2__panel{ background:#fff;border-radius:var(--radius); padding:clamp(1.25rem,2.5vw,1.9rem); box-shadow:0 18px 50px rgba(0,0,0,.28); } .dev2__grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.4vw,1rem); } .dev2__tile{ display:grid;place-items:center; min-height:84px;padding:1rem .75rem; border:1px solid var(--line);border-radius:var(--radius-sm); background:#fff;overflow:hidden; transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease); } .dev2__tile:hover{border-color:var(--gold-300);box-shadow:var(--shadow-sm);} .dev2__tile img{ max-width:100%;max-height:38px;width:auto;height:auto;object-fit:contain; filter:grayscale(1);opacity:.65; transition:filter var(--t) var(--ease),opacity var(--t) var(--ease); } .dev2__tile:hover img{filter:none;opacity:1;} /* Same two exceptions as the original grid: light artwork on a baked-in black ground, inverted to sit on the white tile. */ .dev2__tile--dark img{filter:invert(1) grayscale(1) contrast(1.15);opacity:.7;} .dev2__tile--dark:hover img{filter:invert(1) contrast(1.05);opacity:1;} .dev2__tile--square img{max-height:80px;transform:scale(1.85);} .dev2__note{ margin:1.1rem 0 0;font-size:.78rem;color:var(--muted);text-align:center; } @media (hover:none){ .dev2__tile img{filter:none;opacity:1;} .dev2__tile--dark img{filter:invert(1) contrast(1.05);opacity:1;} } /* The two-column split stops working once the logo tiles drop under ~90px wide, so the layout stacks before the tiles are squeezed. */ @media (max-width:900px){ .dev2__inner{grid-template-columns:1fr;gap:2.25rem;} .dev2__lead{max-width:none;} .dev2__cta{margin-top:1.5rem;} } @media (max-width:520px){ .dev2__grid{grid-template-columns:repeat(2,1fr);} .dev2__stats{grid-template-columns:repeat(2,auto);gap:1.1rem 1.5rem;} .dev2__cta{width:100%;text-align:center;justify-content:center;} } /* ============================================================ HERO - ALTERNATIVE DESIGN (.hero2) Same content as .hero, different composition: the copy sits on a dark gradient panel rather than directly on the photo, and the stats become a bordered strip along the bottom of that panel. Appended, so no existing rule is modified. ============================================================ */ .hero2{ position:relative; background:var(--navy-900); padding:clamp(5rem,11vw,8rem) 0 clamp(3.5rem,7vw,5.5rem); overflow:hidden; color:#fff; } /* The photo is atmosphere here, not the subject, so it is pushed well back and the gradient keeps the copy side readable. */ .hero2__bg{position:absolute;inset:0;} .hero2__bg img{width:100%;height:100%;object-fit:cover;opacity:.28;} .hero2__bg::after{ content:"";position:absolute;inset:0; background: radial-gradient(1100px 600px at 82% 12%, rgba(201,162,39,.20), transparent 62%), linear-gradient(105deg, var(--navy-900) 30%, rgba(10,26,47,.88) 58%, rgba(10,26,47,.62) 100%); } .hero2__inner{ position:relative;z-index:1; display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:center; } .hero2__eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--gold-300); background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.3); border-radius:999px;padding:.45rem 1rem;margin-bottom:1.5rem; } .hero2__ping{ width:7px;height:7px;border-radius:50%;background:var(--gold-400); box-shadow:0 0 0 0 rgba(217,185,74,.6); animation:hero2Ping 2.4s var(--ease) infinite; } @keyframes hero2Ping{ 70%{box-shadow:0 0 0 9px rgba(217,185,74,0);} 100%{box-shadow:0 0 0 0 rgba(217,185,74,0);} } @media (prefers-reduced-motion:reduce){ .hero2__ping{animation:none;} } .hero2__title{ font-size:clamp(2.25rem,5.2vw,3.85rem); line-height:1.07;letter-spacing:-.025em;font-weight:700; color:#fff;margin:0 0 1.15rem;max-width:16ch; } .hero2__title em{ font-style:normal;display:block; /* Gradient text keeps the gold accent from flattening into a single flat swatch at large display sizes. */ background:linear-gradient(95deg,var(--gold-300),var(--gold-500)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--gold-400); } .hero2__text{ font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.75; color:rgba(255,255,255,.78);max-width:56ch;margin:0 0 1.5rem; } .hero2__points{ list-style:none;margin:0 0 2rem;padding:0; display:flex;flex-wrap:wrap;gap:.6rem 1.5rem; } .hero2__points li{ display:flex;align-items:center;gap:.5rem; font-size:.92rem;font-weight:600;color:rgba(255,255,255,.88); } .hero2__points svg{width:16px;height:16px;color:var(--gold-400);flex-shrink:0;} .hero2__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem;} /* A ruled strip rather than free-floating figures: it anchors the bottom of the copy column and reads as evidence, not decoration. */ .hero2__stats{ display:grid;grid-template-columns:repeat(3,1fr); gap:1rem;margin:0; border-top:1px solid rgba(255,255,255,.14); padding-top:1.65rem; } /* column-reverse puts the number above its label visually while the dl keeps term-before-definition order in the markup. */ .hero2__stat{ display:flex;flex-direction:column-reverse; gap:.3rem;min-width:0; } .hero2__stat dd{margin:0;} .hero2__stat b{ font-size:clamp(1.85rem,3.4vw,2.5rem);font-weight:700; line-height:1;color:var(--gold-400);display:block; font-variant-numeric:tabular-nums; } .hero2__stat dt{ font-size:.76rem;letter-spacing:.11em;text-transform:uppercase; color:rgba(255,255,255,.6);font-weight:600;line-height:1.35; } /* ---- Callback card ---- */ .hero2__aside{width:100%;min-width:0;} .hero2-form{ position:relative; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:clamp(1.5rem,2.6vw,2.15rem); box-shadow:var(--shadow-lg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } /* Gold hairline along the top edge ties the card to the brand without adding another filled block of colour. */ .hero2-form::before{ content:"";position:absolute;left:clamp(1.5rem,2.6vw,2.15rem); right:clamp(1.5rem,2.6vw,2.15rem);top:-1px;height:2px; background:linear-gradient(90deg,transparent,var(--gold-500),transparent); } .hero2-form__tag{ display:inline-block;font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;font-weight:700;color:var(--navy-900); background:var(--gold-400);border-radius:999px; padding:.3rem .7rem;margin-bottom:.9rem; } .hero2-form__title{color:#fff;font-size:clamp(1.4rem,2.3vw,1.75rem);margin:0 0 .45rem;} .hero2-form__sub{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 1.4rem;} .hero2-form .field{margin-bottom:1rem;} .hero2-form .field label{color:rgba(255,255,255,.82);} .hero2-form .field input, .hero2-form .field select{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff; } .hero2-form .field input::placeholder{color:rgba(255,255,255,.5);} .hero2-form .field select{ /* The native arrow is invisible on a dark field, so it is redrawn. */ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B94A' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .9rem center;background-size:17px; padding-right:2.6rem; } .hero2-form .field select option{background:var(--navy-800);color:#fff;} .hero2-form .field input:focus, .hero2-form .field select:focus{ border-color:var(--gold-400); box-shadow:0 0 0 3px rgba(201,162,39,.25); background:rgba(255,255,255,.1); } .hero2-form .field.has-error input, .hero2-form .field.has-error select{border-color:#F87171;} .hero2-form .field__error{color:#FCA5A5;} .hero2-form .btn{margin-top:.4rem;} .hero2-form__note{ display:flex;align-items:center;gap:.5rem;justify-content:center; font-size:.8rem;color:rgba(255,255,255,.6);margin:1rem 0 0; } .hero2-form__note svg{width:15px;height:15px;flex-shrink:0;color:var(--gold-400);} @media (max-width:1024px){ .hero2__inner{grid-template-columns:minmax(0,1fr) minmax(300px,355px);gap:2.5rem;} .hero2__title{max-width:none;} } @media (max-width:880px){ /* Copy first, then the form - same reading order as the original hero. */ .hero2__inner{grid-template-columns:1fr;gap:2.5rem;} .hero2__aside{max-width:520px;} } @media (max-width:560px){ .hero2__stats{grid-template-columns:1fr;gap:1.15rem;} .hero2__stat{flex-direction:row-reverse;align-items:baseline;justify-content:flex-end;gap:.75rem;} .hero2__stat b{font-size:1.75rem;} .hero2__stat dt{font-size:.74rem;} .hero2__actions .btn{width:100%;} .hero2__aside{max-width:none;} .hero2__points{gap:.5rem 1rem;} } @media print{ .hero2{background:none;color:#000;padding:1rem 0;} .hero2__bg,.hero2__aside{display:none;} }