:root {
    --ink:var(--kiray-ink);
    --green:var(--kiray-green);
    --muted:var(--kiray-muted);
    --paper:var(--kiray-paper);
    --line:var(--kiray-line);
    --lime:var(--kiray-lime);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:30px;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Poppins,'Noto Sans Ethiopic',sans-serif;
    font-size:14px;
    line-height:1.7;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select {
    font:inherit;
}

button,a,input,select,summary {
    -webkit-tap-highlight-color:transparent;
}

button {
    cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid #aa6d28;
    outline-offset:5px;
}

img {
    max-width:100%;
    display:block;
}

.wrap {
    width:min(1280px,calc(100% - 112px));
    margin-inline:auto;
}

.icon {
    width:22px;
    height:22px;
    flex-shrink:0;
}

.skip-link {
    position:fixed;
    top:-80px;
    left:20px;
    z-index:10;
    padding:12px 20px;
    background:#fff;
    border:2px solid var(--green);
}

.skip-link:focus {
    top:12px;
}

.site-header {
    height:110px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-bottom:1px solid var(--line);
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:25px;
    font-weight:700;
    letter-spacing:-1px;
    white-space:nowrap;
}

.brand-suffix {
    font-weight:400;
    color:var(--muted);
}

.main-nav {
    display:flex;
    gap:30px;
    font-size:13px;
}

.main-nav a:hover,.site-footer a:hover {
    color:#047456;
    text-decoration:underline;
    text-underline-offset:5px;
}

.header-actions {
    display:flex;
    align-items:center;
    gap:22px;
}

.language {
    border:0;
    padding:9px 0;
    background:transparent;
    color:var(--ink);
    font-family:Poppins,'Noto Sans Ethiopic',sans-serif;
    font-size:13px;
    min-height:44px;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    min-height:54px;
    padding:14px 23px;
    border:1px solid transparent;
    border-radius:6px;
    font-size:13px;
    font-weight:700;
    line-height:1.5;
    transition:background .18s,color .18s;
}

.button-primary {
    background:var(--green);
    color:#fff;
}

.button-primary:hover {
    background:#0c3529;
}

.button-outline {
    border-color:#b9c6bb;
    background:transparent;
}

.button-outline:hover {
    background:#e9eee4;
}

.button-small {
    min-height:43px;
    padding:10px 15px;
    gap:12px;
}

.button-small .icon {
    width:17px;
    height:17px;
}

.hero {
    display:grid;
    grid-template-columns:1fr 1.14fr;
    gap:54px;
    align-items:center;
    padding-top:48px;
    padding-bottom:45px;
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 19px;
    color:var(--green);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.9px;
    font-weight:700;
}

.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5d7d31;
}

.hero h1 {
    font-family:Georgia,'Noto Sans Ethiopic',serif;
    font-weight:400;
    font-size:clamp(52px,5.7vw,80px);
    line-height:1.08;
    letter-spacing:-3.4px;
    margin:0 0 24px;
}

.hero h1 em {
    font-weight:400;
    color:#517451;
}

.hero-intro {
    max-width:450px;
    color:var(--muted);
    font-size:15px;
    line-height:1.9;
    margin:0 0 28px;
}

.browse-note {
    display:flex;
    align-items:flex-start;
    gap:7px;
    max-width:365px;
    margin:18px 0 0;
    font-size:10px;
    color:var(--muted);
}

.browse-note .icon {
    width:15px;
    height:17px;
}

.hero-image {
    position:relative;
    margin:0;
    align-self:stretch;
    min-height:450px;
}

.hero-image>img {
    height:100%;
    width:100%;
    object-fit:cover;
    object-position:48% 50%;
    border-radius:140px 8px 8px 8px;
}

.hero-image figcaption {
    position:absolute;
    bottom:14px;
    left:18px;
    color:#fff;
    background:#182b22d9;
    padding:5px 10px;
    border-radius:4px;
    font-size:9px;
}

.image-corner {
    position:absolute;
    right:24px;
    top:24px;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    background:#f9f6ecee;
    border-radius:50%;
}

.search-panel {
    padding:25px 28px 28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:0 10px 30px #1b38200a;
}

.search-panel h2 {
    font-size:17px;
    font-weight:700;
    margin:0 0 20px;
    line-height:1.4;
}

.rental-search {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr auto;
    align-items:end;
    gap:25px;
}

.search-field {
    min-width:0;
}

.search-field label {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:700;
    margin-bottom:7px;
}

.search-field .icon {
    width:15px;
    height:15px;
}

.search-field input,.search-field select {
    width:100%;
    min-width:0;
    height:46px;
    color:var(--ink);
    background:#f8f9f5;
    border:1px solid #e1e5dc;
    border-radius:5px;
    padding:0 12px;
    font-size:12px;
}

.search-field input::placeholder {
    color:#707970;
    opacity:1;
}

.rental-search .button {
    min-height:46px;
    padding-inline:24px;
}

.search-hint {
    font-size:10px;
    color:var(--muted);
    margin:12px 2px 0;
}

.section {
    padding-top:90px;
    padding-bottom:90px;
}

h2 {
    font-family:Georgia,'Noto Sans Ethiopic',serif;
    font-size:38px;
    font-weight:400;
    line-height:1.22;
    letter-spacing:-1.1px;
    margin:0;
}

h3 {
    line-height:1.45;
}

.search-panel h2,.owner-banner h2 {
    font-family:Poppins,'Noto Sans Ethiopic',sans-serif;
    letter-spacing:0;
}

.section-intro {
    color:var(--muted);
    font-size:13px;
    margin:14px 0 0;
    line-height:1.9;
}

.section-header {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:30px;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:15px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    border-bottom:1px solid #93a892;
    padding:4px 0;
}

.text-link:hover {
    color:#047456;
}

.text-link .icon {
    width:18px;
    height:18px;
}

.space-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.space-card {
    display:flex;
    flex-direction:column;
    padding:27px;
    border:1px solid var(--line);
    border-radius:8px;
    transition:background .18s,border-color .18s;
}

.space-card:hover {
    background:#f1f3e9;
    border-color:#9cba9c;
}

.space-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.space-icon {
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    background:#e8ecdc;
    border-radius:50%;
}

.space-office .space-icon {
    background:#ede5d8;
}

.space-shop .space-icon {
    background:#e5e9ed;
}

.space-studio .space-icon { background:#eee4db; }
.space-healthcare .space-icon { background:#dfece8; }
.space-education .space-icon { background:#e8e3ef; }

.space-searches {
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    margin-top:auto;
}

.space-searches a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:4px;
}

.space-searches .icon { width:16px; height:16px; }
.spaces-note { color:var(--muted); font-size:12px; max-width:760px; margin:24px 0 0; }

.space-icon .icon {
    width:27px;
    height:27px;
}

.space-number {
    font-size:12px;
    color:#6d7c70;
}

.space-card h3 {
    font-family:Georgia,'Noto Sans Ethiopic',serif;
    font-size:27px;
    font-weight:400;
    margin:22px 0 8px;
}

.space-card p {
    font-size:12px;
    color:var(--muted);
    margin:0 0 24px;
    max-width:280px;
}

.space-link {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    font-weight:700;
    margin-top:auto;
}

.space-link .icon {
    width:18px;
    height:18px;
}

.how-section {
    background:var(--green);
    color:#f5f4e9;
}

.how-section .eyebrow {
    color:var(--lime);
}

.how-header {
    max-width:600px;
}

.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:52px;
    list-style:none;
    margin:38px 0 0;
    padding:0;
}

.steps li {
    border-top:1px solid #668676;
    padding-top:22px;
}

.step-number {
    font-family:Georgia,serif;
    color:var(--lime);
    font-size:32px;
}

.steps h3 {
    font-size:16px;
    font-weight:400;
    margin:16px 0 10px;
}

.steps p {
    font-size:12px;
    color:#d4dfd5;
    line-height:1.9;
    margin:0;
}

.portal-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.portal-visual {
    background:#e9eddf;
    padding:40px 32px;
    border-radius:8px;
    position:relative;
}

.portal-preview {
    background:#fff;
    border:1px solid #d8ddcf;
    border-radius:10px;
    box-shadow:0 15px 35px #233a2510;
    padding:30px 25px;
}

.preview-header {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

.portal-preview h3 {
    font-family:Georgia,'Noto Sans Ethiopic',serif;
    font-size:27px;
    font-weight:400;
    margin:25px 0;
}

.preview-row {
    display:flex;
    align-items:center;
    gap:13px;
    padding:19px 0;
    border-top:1px solid #eceee6;
}

.preview-icon {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:8px;
    background:#f0f3eb;
    flex-shrink:0;
}

.preview-row div {
    flex:1;
}

.preview-row strong {
    display:block;
    font-size:12px;
    font-weight:700;
}

.preview-row div span {
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:3px;
}

.preview-row>.icon {
    width:15px;
}

.preview-caption {
    font-size:9px;
    color:var(--muted);
    margin:15px 0 0;
}

.portal-benefits {
    list-style:none;
    padding:0;
    margin:25px 0;
}

.portal-benefits li {
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.portal-benefits .icon {
    width:18px;
    height:18px;
    color:#64804b;
    margin-top:3px;
}

.portal-benefits h3 {
    margin:0;
    font-size:13px;
}

.portal-benefits p {
    margin:4px 0 0;
    color:var(--muted);
    font-size:11px;
}

.owner-banner {
    display:flex;
    align-items:center;
    gap:25px;
    background:#eeeede;
    border-radius:8px;
    padding:30px;
}

.owner-icon {
    display:grid;
    place-items:center;
    border:1px solid #c3ccb6;
    border-radius:50%;
    width:56px;
    height:56px;
    flex-shrink:0;
}

.owner-icon .icon {
    width:27px;
    height:27px;
}

.owner-banner h2 {
    font-size:18px;
    line-height:1.5;
}

.owner-banner p {
    max-width:600px;
    font-size:11px;
    color:#52604e;
    margin:7px 0 0;
}

.owner-banner>.button {
    margin-left:auto;
    flex-shrink:0;
    font-size:11px;
}

.faq-section {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:90px;
}

.faq-section h2 {
    max-width:310px;
}

.faq-list details {
    border-bottom:1px solid var(--line);
}

.faq-list details:first-child {
    border-top:1px solid var(--line);
}

summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    cursor:pointer;
    list-style:none;
    padding:21px 0;
    font-size:13px;
}

summary::-webkit-details-marker {
    display:none;
}

summary span {
    font-size:24px;
    font-weight:400;
    line-height:1;
}

details[open] summary span {
    transform:rotate(45deg);
}

details p {
    margin:0 32px 22px 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
}

.closing-section {
    padding:72px 0;
    background:#e9eddf;
    text-align:center;
}

.closing-section .eyebrow {
    justify-content:center;
}

.closing-section h2 {
    max-width:650px;
    margin:auto;
    font-size:43px;
}

.closing-section p:not(.eyebrow) {
    font-size:13px;
    color:var(--muted);
    margin:20px 0 27px;
}

.site-footer {
    padding-top:42px;
    padding-bottom:25px;
}

.footer-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-bottom:35px;
}

.footer-top p {
    font-size:11px;
    color:var(--muted);
    margin:10px 0 0;
}

.footer-top nav {
    display:flex;
    gap:25px;
    font-size:12px;
}

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:22px;
    font-size:9px;
    color:var(--muted);
}

html[lang=am] h1,html[lang=am] h2,html[lang=am] h3 {
    font-family:'Noto Sans Ethiopic',sans-serif;
    letter-spacing:0;
}

html[lang=am] .hero h1 {
    font-size:clamp(40px,4.4vw,62px);
    line-height:1.35;
}

html[lang=am] .eyebrow {
    letter-spacing:0;
}

html[lang=am] .hero h1 em {
    font-style:normal;
}

@media(min-width:1600px) {
    .hero {
        gap:70px;
    }
    .hero-image {
        min-height:480px;
    }
}

@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 64px);
    }
    .main-nav {
        gap:20px;
    }
    .main-nav a:last-child {
        display:none;
    }
    .hero {
        gap:30px;
    }
    .hero h1 {
        font-size:60px;
        letter-spacing:-2px;
    }
    .hero-image {
        min-height:420px;
    }
    .rental-search {
        gap:15px;
        grid-template-columns:1.2fr 1fr 1fr;
    }
    .rental-search .button {
        grid-column:1/-1;
    }
    .section {
        padding-top:65px;
        padding-bottom:65px;
    }
    .portal-section,.faq-section {
        gap:40px;
    }
    .owner-banner {
        flex-wrap:wrap;
    }
    .owner-banner>div {
        flex:1;
    }
    .owner-banner>.button {
        margin-left:81px;
    }
    .hero-intro {
        font-size:13px;
    }
    .steps {
        gap:30px;
    }
}

@media(max-width:760px) {
    .wrap {
        width:calc(100% - 40px);
    }
    .site-header {
        height:84px;
        gap:15px;
    }
    .brand {
        font-size:23px;
    }
    .brand img {
        width:30px;
        height:30px;
    }
    .main-nav {
        display:none;
    }
    .header-actions {
        gap:15px;
    }
    .button-small {
        padding:10px 12px;
    }
    .button-small .icon {
        display:none;
    }
    .hero {
        grid-template-columns:1fr;
        gap:28px;
        padding-top:34px;
        padding-bottom:25px;
    }
    .hero-copy {
        max-width:540px;
    }
    .eyebrow {
        font-size:10px;
        letter-spacing:1.5px;
        margin-bottom:16px;
    }
    .hero h1 {
        font-size:60px;
        line-height:1.06;
        letter-spacing:-2px;
        margin-bottom:20px;
    }
    .hero-intro {
        font-size:13px;
        line-height:1.8;
        margin-bottom:22px;
    }
    .browse-note {
        font-size:10px;
        max-width:none;
    }
    .hero-image {
        min-height:0;
        height:290px;
    }
    .hero-image>img {
        border-top-left-radius:75px;
        object-position:center 58%;
    }
    .hero-image figcaption {
        font-size:8px;
        left:12px;
        bottom:12px;
    }
    .image-corner {
        width:38px;
        height:38px;
        right:18px;
        top:18px;
    }
    .search-panel {
        padding:22px 18px;
    }
    .search-panel h2 {
        font-size:16px;
    }
    .rental-search {
        grid-template-columns:1fr 1fr;
        gap:16px 12px;
    }
    .search-field:first-child {
        grid-column:1/-1;
    }
    .search-field label {
        font-size:10px;
    }
    .search-field .icon {
        width:13px;
        height:13px;
    }
    .search-hint {
        font-size:9px;
        line-height:1.8;
    }
    .section {
        padding-top:55px;
        padding-bottom:55px;
    }
    h2 {
        font-size:32px;
        letter-spacing:-.7px;
    }
    .section-header {
        display:block;
    }
    .section-header .text-link {
        margin-top:20px;
    }
    .section-intro {
        font-size:12px;
    }
    .space-grid {
        grid-template-columns:1fr;
        gap:13px;
    }
    .space-card {
        padding:22px;
        position:relative;
    }
    .space-card h3 {
        font-size:25px;
        margin-top:17px;
    }
    .space-card p {
        max-width:none;
        margin-bottom:15px;
    }
    .space-icon {
        width:44px;
        height:44px;
    }
    .space-icon .icon {
        width:23px;
        height:23px;
    }
    .steps {
        grid-template-columns:1fr;
        gap:25px;
        margin-top:30px;
    }
    .steps li {
        padding-top:20px;
    }
    .steps h3 {
        margin:10px 0;
        font-size:17px;
    }
    .step-number {
        font-size:26px;
    }
    .portal-section {
        grid-template-columns:1fr;
        gap:32px;
    }
    .portal-copy {
        grid-row:1;
    }
    .portal-visual {
        padding:25px 20px;
    }
    .portal-preview {
        padding:24px 20px;
    }
    .portal-preview h3 {
        font-size:26px;
    }
    .portal-benefits p {
        font-size:12px;
    }
    .owner-banner {
        padding:25px 22px;
        gap:18px;
    }
    .owner-banner>div {
        flex-basis:100%;
    }
    .owner-banner>.button {
        margin:0;
        flex-shrink:1;
        width:100%;
    }
    .owner-banner h2 {
        font-size:19px;
    }
    .owner-banner p {
        font-size:12px;
    }
    .owner-icon {
        width:45px;
        height:45px;
    }
    .faq-section {
        grid-template-columns:1fr;
        gap:26px;
    }
    .faq-section h2 {
        max-width:none;
    }
    summary {
        font-size:12px;
        gap:18px;
    }
    .closing-section {
        padding:50px 0;
    }
    .closing-section h2 {
        font-size:35px;
    }
    .closing-section .button {
        font-size:12px;
    }
    .footer-top {
        align-items:flex-start;
        flex-direction:column;
        gap:25px;
    }
    .footer-top nav {
        flex-wrap:wrap;
        gap:15px 22px;
        font-size:11px;
    }
    .footer-bottom {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
        font-size:9px;
    }
    html[lang=am] .hero h1 {
        font-size:44px;
    }
    html[lang=am] h2 {
        font-size:28px;
    }
}

@media(max-width:360px) {
    .wrap {
        width:calc(100% - 32px);
    }
    .hero h1 {
        font-size:50px;
    }
    .header-actions {
        gap:10px;
    }
    .brand {
        font-size:20px;
    }
    .rental-search {
        grid-template-columns:1fr;
    }
    .search-field {
        grid-column:1/-1;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none!important;
    }
}

/* Give renters and individual landlords a clear starting point. */
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.landlord-intro { margin:16px 0 0; max-width:460px; font-size:13px; color:var(--green); }
.owner-banner .eyebrow { margin:0 0 8px; color:var(--green); }
.owner-team-note { margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.owner-team-note .text-link { margin-left:8px; }
@media(max-width:760px) {
    .hero-actions .button { width:100%; }
    .owner-team-note .text-link { display:inline-flex; margin-left:0; }
}
