@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* The expressive, human side of Ivara paired with a precise sans-serif. */
:root{--display:'Cormorant Garamond',Georgia,serif;--ink:#f7f3ed;--paper:#332e29;--muted:#65584c}
body{font-size:1rem;line-height:1.7}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.045em}
em{font-family:var(--display);font-weight:400}
h2{font-size:clamp(2.8rem,4.8vw,4.8rem);line-height:1.03}
.header{height:104px;margin:0;padding:0 5.5%;border-bottom:1px solid var(--line);background:rgba(247,243,237,.96);backdrop-filter:blur(16px);gap:24px}
.brand-logo{width:96px;height:74px}
.header nav{gap:clamp(16px,2vw,32px);font-size:.875rem}
.header nav a{transition:color .2s}
.header nav a:last-child{border:1px solid var(--line);padding:9px 18px}
.header nav a:last-child:hover{background:#ece3d8}
.eyebrow{font-size:.8125rem;letter-spacing:.14em}
.hero{min-height:760px;padding:62px 5.5% 108px;display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center}
.hero-content{max-width:none;min-width:0}
.hero h1{font-size:clamp(4rem,7.4vw,7.2rem);line-height:.97;letter-spacing:-.055em;margin:0 0 30px;font-weight:500}
.hero h1 em{font-weight:400;color:#83705c}
.hero-description{font-size:1.0625rem;line-height:1.75;max-width:440px}
.hero-art.has-image{position:relative;grid-column:2;grid-row:1;right:auto;top:auto;width:100%;height:550px;opacity:1;z-index:0;mask-image:none;background-image:url('/assets/ivara-sculpture.png');background-size:cover;background-position:55% center;border-radius:46% 46% 1px 1px;border:1px solid #d4c8b9;animation:none;transform:translate3d(var(--hero-x,0px),var(--hero-y,0px),0);transition:transform .8s ease;will-change:auto}
.hero-content{grid-column:1;grid-row:1}
.hero-art:after{content:'';position:absolute;inset:13px;border:1px solid rgba(101,88,76,.17);border-radius:inherit;pointer-events:none}
.hero-note{right:5.5%;bottom:30px;font-size:.875rem;align-items:center;gap:20px}
.hero-note br{display:none}.hero-note>span:last-child{max-width:270px}
.note-number{padding:0;border:0;font-size:.8125rem}
.scroll-note{left:5.5%;bottom:31px;letter-spacing:.12em}
.button{min-height:56px;padding:14px 22px;gap:25px;font-size:.9375rem}
.hero-contact{font-size:.9375rem;margin-left:22px}
.expertise{padding:94px 5.5% 100px;background:#e9e0d5}
.section-heading{grid-template-columns:1.2fr 1fr;gap:22px 10%;margin-bottom:50px}
.section-heading>p:last-child{font-size:1.0625rem;line-height:1.8}
.service-tabs{border-color:#b6a592}
.service-tab{font-size:1rem;display:flex;gap:15px;align-items:center;min-height:86px;padding:20px 16px 20px 0}
.tab-number{font-size:.8125rem;letter-spacing:.05em;margin:0;opacity:.8}
.service-tab:after{height:2px;right:24px}
.service-tab:hover{background:transparent}
.service-panel{grid-template-columns:1.03fr 1fr;gap:6%;padding-top:38px;min-height:545px;align-items:center}
.service-visual{margin:0;position:relative;height:480px;overflow:hidden;background:#d4c8ba}
.service-visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.65,.3,1)}
.service-visual:hover img{transform:scale(1.04)}
.service-visual figcaption{position:absolute;left:18px;bottom:18px;background:#f7f3edee;color:#39342f;padding:6px 12px;font-size:.8125rem;letter-spacing:.04em}
.service-statement{padding:0;isolation:auto}
.service-statement .eyebrow{font-size:.8125rem;margin-bottom:18px;letter-spacing:.13em}
.service-statement h3{font-family:var(--display);font-style:normal;font-size:clamp(2.9rem,4.8vw,4.6rem);font-weight:500;line-height:1;letter-spacing:-.045em;margin-bottom:18px;max-width:100%}
.service-line{font-size:1.125rem;max-width:none;margin-bottom:18px}
.service-overview{padding:0;display:block}
.service-overview>p{font-size:1rem;line-height:1.75;max-width:none;margin-bottom:18px}
.service-overview ul{margin:0 0 25px}
.service-overview li{font-size:.9375rem;padding:8px 0}
.service-overview .button{margin:0}
.detail-hero{padding:32px 5.5% 74px}
.detail-grid{grid-template-columns:1.15fr 1fr;gap:7%;align-items:center}
.detail-hero h1{font-size:clamp(3.3rem,5.5vw,5.8rem);line-height:1.04;letter-spacing:-.045em}
.detail-hero .intro{font-size:1.0625rem;line-height:1.8}
.discipline-card{min-height:420px}
.discipline-card.picture-card{padding:0;position:relative;overflow:hidden;border:0;display:block;height:490px}
.picture-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s ease}
.picture-card:hover img{transform:scale(1.035)}
.picture-card .discipline-label{position:absolute;bottom:20px;left:20px;background:#f7f3edeb;color:#39342f;padding:10px 14px;letter-spacing:.06em;font-size:.8125rem}
.picture-card.security-image img{object-position:72% center;transform:scale(1.12)}
.picture-card.security-image:hover img{transform:scale(1.16)}
.calligraphy-card{border:0;background:#e9e0d5;min-height:0}
.detail-section{padding:78px 5.5%;background:#e9e0d5}
.offer h3{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.offer span,.step>span{font-size:.875rem}
.process-section{padding:85px 5.5%;gap:8%}
.process-section h2{font-size:clamp(2.8rem,4.4vw,4rem)}
.step h3{font-size:1.15rem;letter-spacing:-.02em}
.contact-invite{padding:66px 5.5%;background:#39342f;color:#f7f3ed}
.contact-invite h2{font-size:clamp(2.8rem,4.5vw,4rem)}
.contact-invite .button{background:#dfd0be;color:#39342f}
.contact-invite .button:hover{background:#f7f3ed}
.related{padding:35px 5.5%}
.contact-hero{padding:65px 5.5% 75px}
.contact-hero h1{font-size:clamp(3.5rem,7.3vw,7rem);line-height:1.02;max-width:1100px}
.contact-body{padding:75px 5.5%;gap:8%}
.contact-label{font-size:.875rem}
footer{padding:50px 5.5% 108px;background:#f7f3ed;border-top:1px solid var(--line)}
.copyright{font-size:.8125rem}
html{scroll-padding-top:124px}
@media(min-width:1600px){.hero{min-height:830px}.hero-art.has-image{height:620px}.hero-content{max-width:690px}.hero h1{font-size:7.6rem}}
@media(max-width:1100px){.header nav{gap:16px}.hero{gap:3%;min-height:720px}.hero-art.has-image{height:510px}.hero-contact{display:inline-flex;margin:12px 0 0 0;align-items:center}.hero h1{font-size:clamp(3.8rem,7.5vw,6rem)}.service-visual{height:490px}.service-panel{gap:5%}.detail-grid{gap:5%}.discipline-card.picture-card{height:450px}}
@media(max-width:900px){.header nav{font-size:.875rem;gap:12px}.header{padding:0 4%;gap:16px}.brand-logo{width:80px}.header nav a:last-child{padding:9px 12px}}
@media(max-width:780px){
 .header{height:88px;padding:0 6%;gap:20px}.brand-logo{width:82px;height:65px}.header nav{top:87px;left:0;right:0;padding:18px 6% 24px;font-size:1rem}.header nav a:last-child{border:0;padding:10px 0}.menu-toggle{min-height:44px}
 .hero{display:flex;flex-direction:column;gap:32px;padding:42px 6% 75px;min-height:0;align-items:stretch}
 .hero-content{order:0}.hero-art.has-image{order:1;height:370px;width:100%;border-radius:44% 44% 0 0;background-position:center;transform:none}
 .hero h1{font-size:clamp(3.5rem,12vw,5.8rem);line-height:.99;letter-spacing:-.05em}
 .hero .eyebrow{font-size:.75rem;letter-spacing:.12em;gap:10px;margin-bottom:24px}.hero .short-line{width:22px}
 .hero-description{font-size:1rem;max-width:none;margin-bottom:23px}.hero-contact{display:inline-flex;margin:10px 0 0 16px;font-size:.875rem}.button{font-size:.875rem;gap:18px;padding:13px 18px}
 .hero-note{position:static;order:2;gap:20px;justify-content:space-between;margin-top:-16px}.hero-note>span:last-child{max-width:210px;font-size:.8125rem;text-align:right}.scroll-note{bottom:18px;left:6%;font-size:.75rem}
 .expertise{padding:62px 6%}.section-heading{margin-bottom:30px}.section-heading h2{font-size:clamp(2.6rem,9vw,3.8rem);letter-spacing:-.04em}.section-heading>p:last-child{font-size:1rem}
 .service-tabs{gap:0 18px}.service-tab{font-size:.9375rem;gap:10px;min-height:73px;padding:16px 0}.service-tab:after{right:0}.tab-number{font-size:.75rem}
 .service-panel{grid-template-columns:1fr;gap:28px;padding-top:25px;min-height:0;align-items:start}.service-visual{height:auto;aspect-ratio:4/3}.service-statement h3{font-size:3.25rem;max-width:none}.service-statement .eyebrow{font-size:.75rem}.service-line{font-size:1.0625rem;max-width:none}.service-overview>p{font-size:1rem}
 .detail-hero{padding:25px 6% 55px}.detail-grid{grid-template-columns:1fr;gap:32px}.detail-hero h1{font-size:clamp(3rem,10vw,4.4rem);letter-spacing:-.04em}.detail-hero .intro{font-size:1rem}.discipline-card.picture-card{height:340px;min-height:0}.discipline-card{min-height:0}.calligraphy-card{max-width:none}
 .detail-section{padding:58px 6%}.detail-section>h2{font-size:2.85rem}.process-section{padding:58px 6%;gap:32px}.process-section h2{font-size:2.85rem}.contact-invite{padding:48px 6%;align-items:flex-start}.contact-invite h2{font-size:2.8rem}.related{padding:30px 6%}
 .contact-hero{padding:48px 6%}.contact-hero h1{font-size:clamp(3rem,11vw,4.5rem);letter-spacing:-.04em}.contact-body{padding:55px 6%}.contact-body h2{font-size:3rem}.contact-hero>p:last-child{font-size:1.0625rem}.contact-value{font-size:1.4rem}
 footer{padding:40px 6% 100px}.footer-brand .brand-logo{width:90px}html{scroll-padding-top:108px}
}
@media(prefers-reduced-motion:reduce){.hero-art.has-image,.service-visual:hover img,.picture-card:hover img{transform:none;transition:none}.reveal{opacity:1;transform:none}}

/* Keep the two primary actions separated, including when they wrap. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;column-gap:40px;row-gap:24px}
.hero-actions .hero-contact{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:8px 0}
.hero-actions .button{margin:0}
@media(max-width:780px){.hero-actions{column-gap:32px;row-gap:24px}}
.picture-card.security-image img{object-position:center;transform:none}.picture-card.security-image:hover img{transform:scale(1.035)}.service-visual img[src="/assets/ivara-cybersecurity.png"]{object-position:center!important}

/* Compact line icons follow the same weight and colour as the type. */
.small-icon{display:inline-block;width:22px;height:22px;flex:0 0 22px;vertical-align:middle;color:currentColor}
.service-tab .small-icon{color:#756451}
.service-tab[aria-selected=true] .small-icon{color:#39342f}
.detail-hero .eyebrow .small-icon{width:20px;height:20px;flex-basis:20px}
.offer-meta{display:flex;align-items:center;justify-content:space-between;color:#65584c}
.offer-meta .small-icon{width:26px;height:26px;flex-basis:26px}
.contact-label{display:flex;align-items:center;gap:12px}
@media(max-width:780px){.service-tab .small-icon{width:20px;height:20px;flex-basis:20px}.service-tab{gap:10px}}