/* ============================================================
   Avé Traductions — design system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --blue-1:#175178; --blue-2:#1C6FA3; --blue-3:#2193C9; --navy:#0F3A57;
  --gold:#D4AF37; --gold-warm:#D4AF37; --gold-light:#E7C868; --gold-ink:#A07E1C;
  --paper:#FAF7F1; --ink:#0F3A57; --body:#3B5266; --line:rgba(212,175,55,.78);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
.kicker{font-size:12.5px;letter-spacing:.4em;color:var(--gold-ink);text-transform:uppercase}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* buttons */
.btn{display:inline-block;background:var(--gold-warm);color:var(--navy);padding:15px 34px;font-size:13.5px;letter-spacing:.14em;font-weight:600;text-transform:uppercase;transition:.2s;border:1.5px solid var(--gold-warm)}
.btn:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn.ghost{background:transparent;border:1.5px solid var(--gold-light);color:var(--gold-light)}
.btn.ghost:hover{background:rgba(242,208,132,.12)}
.btn.ink{border-color:var(--gold-warm);color:var(--gold-ink);background:transparent}
.btn.ink:hover{background:rgba(233,190,99,.12)}

/* header */
header.site{position:absolute;top:0;left:0;right:0;z-index:20}
/* scrim so the gold logo stays legible over pale sky or hair */
header.site:before{content:"";position:absolute;inset:0 0 auto 0;height:150px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(8,32,54,.62) 0%,rgba(8,32,54,.34) 45%,rgba(8,32,54,0) 100%)}
header.site .brand span{text-shadow:0 1px 10px rgba(6,24,42,.65)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:30px 96px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:42px}
.brand span{font-size:16px;letter-spacing:.26em;font-weight:500;color:var(--gold-light)}
.menu{display:flex;gap:32px;align-items:center;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#EAF4FB}
.menu a{transition:.2s}.menu a:hover{color:var(--gold-light)}
/* language switch: a real toggle, always visible, never inside the burger */
.lang{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:26px;
  border:1px solid var(--gold-light);font-size:12px;letter-spacing:.1em;line-height:1;overflow:hidden}
.lang b,.lang a{padding:7px 11px;font-weight:500}
.lang b{background:var(--gold-light);color:var(--navy)}
.lang a{color:var(--gold-light);transition:.2s}
.lang a:hover{background:rgba(231,200,104,.22)}
.menu{margin-left:auto;order:2}
.brand{order:1}
.lang{order:3}
.burger{order:4}
.menu .cta{border:1px solid var(--gold-light);color:var(--gold-light);padding:9px 20px}
.burger{display:none}
.nav-toggle{display:none}

/* hero */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;color:#fff;
  background:
  radial-gradient(1100px 700px at 80% 18%,rgba(46,169,223,.55) 0%,transparent 60%),
  linear-gradient(118deg,var(--blue-1) 0%,var(--blue-2) 48%,var(--blue-3) 100%);}
.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:min(52%,980px);z-index:0;pointer-events:none;
  background:url('/assets/img/aideen-coast.jpg?v=20260924') 50% 45%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 46%,rgba(0,0,0,.55) 74%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 46%,rgba(0,0,0,.55) 74%,rgba(0,0,0,0) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,38,62,.34) 0%,rgba(10,44,72,.36) 28%,rgba(11,50,82,.26) 48%,rgba(11,52,86,0) 70%)}
.hero .frame{position:absolute;inset:24px;border:1.5px solid var(--line);pointer-events:none;z-index:3}
.hero .qc{position:absolute;width:50px;height:50px;background:#D4AF37;z-index:3}
.qc.tl{top:24px;left:24px;border-radius:0 0 100% 0}.qc.tr{top:24px;right:24px;border-radius:0 0 0 100%}
.qc.bl{bottom:24px;left:24px;border-radius:0 100% 0 0}.qc.br{bottom:24px;right:24px;border-radius:100% 0 0 0}
.hero-main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;position:relative;z-index:2;
  width:min(720px,54%);margin-left:auto;margin-right:clamp(24px,7vw,130px);padding:120px 0 40px}
.hero h1{font-size:clamp(28px,3.2vw,48px);font-weight:500;line-height:1.14;text-shadow:0 3px 26px rgba(8,32,54,.5)}
.hero h1 .l1{white-space:nowrap}
.hero h1 em{color:var(--gold-light);font-style:italic}
.hero .rule{display:flex;align-items:center;margin:34px 0}
.hero .rule i{width:11px;height:11px;border:1.5px solid var(--gold-light);border-radius:50%;transform:scaleX(1.6)}
.hero .rule span{width:150px;height:1.5px;background:var(--gold-light)}
.hero p.sub{max-width:640px;font-size:18px;font-weight:300;line-height:1.7;color:#F2F8FC}
.hero .btns{display:flex;gap:20px;margin-top:42px;flex-wrap:wrap;justify-content:flex-start}
@media(max-width:900px){
  /* start the photo below the header, so the logo, language toggle and burger
     sit on plain navy instead of across her face */
  .hero{min-height:auto;--hdr:84px}
  .hero::before{top:var(--hdr);bottom:auto;height:44vh;width:100%;background-position:50% 24%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.45) 84%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.45) 84%,rgba(0,0,0,0) 100%)}
  .hero::after{background:linear-gradient(180deg,rgba(9,38,62,.12) 0%,rgba(10,46,76,.28) 30%,rgba(11,52,86,.88) 46%,rgba(11,52,86,.99) 62%,rgba(11,52,86,1) 100%)}
  .hero-main{width:auto;margin:0;padding:calc(44vh + var(--hdr) + 26px) 22px 34px;justify-content:flex-start}
  .hero h1{font-size:clamp(29px,8.4vw,38px);line-height:1.18}
  .hero h1 .l1{white-space:normal}
  .hero .rule{margin:24px 0}
  .hero .rule span{width:96px}
  .hero p.sub{font-size:16px;line-height:1.65}
  .hero .btns{gap:12px;margin-top:30px}
  .hero .btns .btn{width:100%;text-align:center}
  .hero .frame{inset:12px}
  .hero .qc{display:none}
  .creds{padding:16px 20px;gap:14px;font-size:11px}
}
.creds{position:relative;z-index:2;border-top:1px solid rgba(242,208,132,.25);padding:20px 24px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:12px;letter-spacing:.09em;color:#D6EAF6;text-transform:uppercase}
.creds i{color:var(--gold-light)}

/* generic section */
section.band{padding:104px 0}
.paper{background:var(--paper)}
.center{text-align:center}
h2.h{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:44px;line-height:1.15;color:var(--ink)}
.lead{max-width:620px;margin:18px auto 0;font-size:16.5px;font-weight:300;line-height:1.75;color:var(--body)}

/* about teaser */
.about-teaser{display:flex;align-items:center;gap:80px;justify-content:center;flex-wrap:wrap}
.oval-wrap{position:relative;flex:0 0 auto}
.oval-wrap .oval{width:320px;height:410px;border-radius:50%;overflow:hidden}
.oval-wrap .oval img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.oval-wrap .r1{position:absolute;inset:-14px;border:1.5px solid var(--gold-warm);border-radius:50%}
.oval-wrap .r2{position:absolute;inset:-26px;border:1px solid rgba(233,190,99,.45);border-radius:50%}
.about-teaser .txt{max-width:720px}
.about-teaser h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:44px;line-height:1.15;margin:16px 0 22px}
.about-teaser p{font-size:17px;font-weight:300;line-height:1.8;color:var(--body)}
.link-gold{display:inline-block;margin-top:28px;color:var(--gold-ink);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1.5px solid var(--gold-warm);padding-bottom:5px}

/* services */
.svc-grid{display:flex;gap:30px;justify-content:center;margin-top:60px;text-align:left;flex-wrap:wrap}
.card{background:#fff;border-top:3px solid var(--gold-warm);box-shadow:0 10px 34px rgba(23,60,90,.08);padding:40px 34px;max-width:352px;flex:1 1 300px}
.card .no{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--gold-ink)}
.card h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;margin:8px 0 14px}
.card p{font-size:15px;font-weight:300;line-height:1.75;color:var(--body)}
.card .eg{font-size:13px;font-weight:300;line-height:1.55;color:#7A8FA3;margin:-6px 0 14px}

/* why band */
.why{background:linear-gradient(115deg,#14486C 0%,#1B6395 60%,#1F82B5 100%);color:#fff;text-align:center}
.why h2{color:#fff}
.why .cols{display:flex;justify-content:center;gap:60px;max-width:1050px;margin:52px auto 0;flex-wrap:wrap}
.why .col{max-width:250px}
.why .col b{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:500;color:var(--gold-light);display:block}
.why .col p{font-size:14.5px;font-weight:300;line-height:1.7;color:#DCEBF5;margin-top:12px}

/* testimonials */
.quotes{display:flex;gap:38px;justify-content:center;margin-top:54px;text-align:left;flex-wrap:wrap}
.quote{max-width:340px;flex:1 1 280px}
.quote .mark{font-family:'Cormorant Garamond',serif;font-size:60px;color:var(--gold-warm);line-height:.5;margin-bottom:16px}
.quote p{font-family:'Cormorant Garamond',serif;font-size:19px;font-style:italic;line-height:1.55;color:#28425A}
.quote .who{margin-top:16px;font-size:12.5px;letter-spacing:.1em;color:#7A8FA3;text-transform:uppercase}
.quote .who b{color:var(--gold-ink);font-weight:500}
.foot-note{margin-top:44px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--body)}

/* final cta */
.cta-band{color:#fff;text-align:center;position:relative;
  background:radial-gradient(1100px 700px at 80% 18%,rgba(46,169,223,.5) 0%,transparent 60%),
  linear-gradient(118deg,var(--blue-1) 0%,var(--blue-2) 48%,var(--blue-3) 100%);}
.cta-band img{height:60px;margin:0 auto 24px;opacity:.95}
.cta-band h2{color:#fff;font-size:46px}
.cta-band p{font-size:17px;font-weight:300;color:#E8F3FA;max-width:520px;margin:14px auto 0}

/* footer */
footer.site{background:var(--navy);color:#B9CFDF;padding:60px 0 42px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-grid .brand span{color:var(--gold-light);font-size:14px}
.foot-col h4{color:var(--gold-light);letter-spacing:.2em;font-size:11.5px;text-transform:uppercase;margin-bottom:10px}
.foot-col{font-size:13.5px;line-height:2;font-weight:300}
.foot-about{max-width:280px;font-size:13.5px;font-weight:300;line-height:1.7;margin-top:14px}
.foot-bottom{border-top:1px solid rgba(242,208,132,.22);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#7FA0B8}

/* responsive */

/* nav collapses earlier than the rest: the full menu needs ~1100px to clear the logo */
@media(max-width:1200px){
  .hero .qc{display:none}
  /* keep the credentials strip on one line rather than orphaning the last item */
  .creds{gap:18px;padding-left:18px;padding-right:18px;font-size:11px;letter-spacing:.07em}
  .lang{order:2;margin-left:auto;margin-right:18px}
  .burger{order:3}
  .brand{order:1}
  .nav{padding:22px 26px;flex-wrap:nowrap;gap:14px;position:relative}
  .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;z-index:30}
  .burger span{display:block;width:26px;height:2px;background:var(--gold-light);border-radius:2px}
  .menu{
    display:none;position:absolute;top:100%;right:26px;left:auto;min-width:240px;
    flex-direction:column;align-items:flex-start;gap:20px;font-size:13px;
    background:var(--navy);padding:24px 26px;border:1px solid rgba(212,175,55,.45);
    box-shadow:0 18px 40px rgba(6,26,42,.45);z-index:20
  }
  .nav-toggle:checked ~ .menu{display:flex}
  .menu .cta{padding:8px 18px}
}

/* phones: tighten the header so the wordmark, the language toggle and the
   burger all fit on one row (needs 340px, so there is room at 360 and 375) */
@media(max-width:560px){
  .nav{gap:9px;padding-left:17px;padding-right:17px}
  .brand{gap:8px}
  .brand img{height:33px}
  .brand span{font-size:12px;letter-spacing:.11em}
  .lang{margin-left:9px;font-size:11px}
  .lang b,.lang a{padding:6px 8px}
}
/* narrower than any phone still in use: drop the wordmark rather than crowd it */
@media(max-width:345px){
  .brand span{display:none}
}
@media(max-width:820px){
  .wrap{padding:0 22px}
  .nav{padding:20px 22px;flex-wrap:nowrap;gap:14px;position:relative}
  .burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px;z-index:30}
  .burger span{display:block;width:26px;height:2px;background:var(--gold-light);border-radius:2px}
  .menu{
    display:none;position:absolute;top:100%;right:22px;left:22px;
    flex-direction:column;align-items:flex-start;gap:20px;font-size:13px;
    background:var(--navy);padding:24px 26px;border:1px solid rgba(212,175,55,.45);
    box-shadow:0 18px 40px rgba(6,26,42,.45)
  }
  .nav-toggle:checked ~ .menu{display:flex}
  .menu .cta{padding:8px 18px}
  .hero .kicker{white-space:normal;letter-spacing:.22em;font-size:11px;line-height:2}
  h2.h,.about-teaser h2,.cta-band h2{font-size:34px}
  .inner-hero p.tag{font-size:16px}
  section.band{padding:70px 0}
  .about-teaser{gap:40px}
  .creds{gap:16px}
}

/* ============ inner pages ============ */
.inner-hero{position:relative;color:#fff;padding:170px 0 80px;text-align:center;
  background:radial-gradient(900px 500px at 80% 10%,rgba(46,169,223,.5) 0%,transparent 60%),
  linear-gradient(118deg,var(--blue-1) 0%,var(--blue-2) 55%,var(--blue-3) 100%);}
.inner-hero .kicker{color:var(--gold-light)}
.inner-hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:58px;line-height:1.1;margin-top:14px}
.inner-hero p.tag{max-width:600px;margin:16px auto 0;font-size:17px;font-weight:300;color:#EAF4FB}
.prose{max-width:760px;margin:0 auto}
.prose p{font-size:17px;font-weight:300;line-height:1.85;color:var(--body);margin-bottom:20px}
.prose h3{font-family:'Cormorant Garamond',serif;font-size:27px;color:var(--ink);margin:34px 0 6px}
.prose .lede{font-size:19px;color:var(--ink);font-weight:400}
/* about banner */
.about-banner{width:100%;max-height:420px;object-fit:cover;object-position:50% 42%}
/* qualifications */
.quals{max-width:820px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.quals div{font-size:15px;font-weight:300;color:var(--body);padding-left:20px;position:relative;line-height:1.5}
.quals div:before{content:"◆";color:var(--gold-warm);position:absolute;left:0;font-size:10px;top:4px}
/* service detail */
.svc-detail{max-width:820px;margin:0 auto}
.svc-detail .block{border-top:3px solid var(--gold-warm);background:#fff;box-shadow:0 10px 30px rgba(23,60,90,.07);padding:36px 40px;margin-bottom:26px}
.svc-detail .block h3{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ink)}
.svc-detail .block .sub{color:var(--gold-ink);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 16px}
.svc-detail .block p{font-size:16px;font-weight:300;line-height:1.8;color:var(--body);margin-bottom:12px}
.svc-detail .price{font-size:14.5px;color:var(--ink);border-top:1px solid #eee;padding-top:14px;margin-top:16px}
.svc-detail .price b{color:var(--gold-ink)}
/* case studies */
.cases{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.case{background:#fff;box-shadow:0 10px 30px rgba(23,60,90,.07);border-left:4px solid var(--gold-warm);padding:34px 38px}
.case h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--ink);margin-bottom:6px}
.case .client{color:var(--gold-ink);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.case p{font-size:15.5px;font-weight:300;line-height:1.75;color:var(--body)}
.case .cq{margin-top:20px;padding:16px 22px;background:var(--paper);border-left:3px solid var(--gold);font-style:italic;font-size:15px;font-weight:300;line-height:1.72;color:var(--ink)}
.case .cq .who{display:block;margin-top:10px;font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.case .cq.ph{background:transparent;border-left:3px dashed var(--line);color:var(--gold-ink);font-style:normal;font-size:13.5px}
/* contact + form */
.contact-grid{display:flex;gap:60px;max-width:1000px;margin:0 auto;flex-wrap:wrap}
.contact-info{flex:1 1 280px;font-size:16px;font-weight:300;line-height:2;color:var(--body)}
.contact-info h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--ink);margin-bottom:12px}
.contact-info a{color:var(--gold-ink)}
form.cf{flex:1 1 420px;display:flex;flex-direction:column;gap:14px}
form.cf label{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#7A8FA3;margin-bottom:-6px}
form.cf input,form.cf select,form.cf textarea{font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid #d8e0e8;background:#fff;color:var(--ink);width:100%}
form.cf textarea{min-height:120px;resize:vertical}
form.cf button{align-self:flex-start;margin-top:8px}
/* faq */
.faq{max-width:760px;margin:50px auto 0;text-align:left}
.faq details{border-bottom:1px solid #e6ded0;padding:18px 0}
.faq summary{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--gold-ink);margin-right:12px;font-family:'Jost'}
.faq details[open] summary:before{content:"–"}
.faq p{font-size:15.5px;font-weight:300;line-height:1.75;color:var(--body);padding:12px 0 2px 24px}
.about-figure{margin:0}
.about-figure figcaption{max-width:1160px;margin:0 auto;padding:12px 2px 0;font-size:13.5px;font-weight:300;color:var(--body);line-height:1.6;position:relative;z-index:5}
@media(max-width:820px){.about-figure figcaption{padding:10px 16px 0}}

/* shelf feature band */
.shelf-band{background:var(--paper);padding:0 40px 54px}
.shelf-band.inline{padding:6px 40px 26px}
.shelf-band.inline + section.band{padding-top:26px}
.shelf-band.inline + section.band .prose > h3:first-child{margin-top:0}
section.band:has(+ .shelf-band.inline){padding-bottom:30px}
.shelf-band.inline .shelf-figure{max-width:840px}
.shelf-band.inline .shelf-figure img{box-shadow:0 12px 30px rgba(15,45,70,.14)}
.shelf-figure{max-width:1160px;margin:0 auto}
.shelf-figure img{display:block;width:100%;height:auto;box-shadow:0 18px 44px rgba(15,45,70,.18)}
.shelf-figure figcaption{font-size:13.5px;font-weight:300;color:var(--body);line-height:1.6;padding:16px 4px 0;text-align:center}
@media(max-width:820px){.shelf-band{padding:0 16px 36px}}

/* legal */
.legal{max-width:760px;margin:0 auto;font-size:15px;font-weight:300;line-height:1.75;color:var(--body)}
.legal h3{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ink);margin:28px 0 8px}
.legal h4{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--ink);margin:20px 0 6px}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin:0 0 7px}
.legal .todo{background:#fdf3d8;color:#8a6a1f;border-bottom:1px dashed #c9a94a;padding:0 4px;font-style:italic}
@media(max-width:820px){.inner-hero h1{font-size:40px}.quals{grid-template-columns:1fr}.inner-hero{padding:130px 0 60px}}

/* about feature image (contained, no stretch) */
.feature-band{background:var(--paper);padding:0 40px 0}
.about-feature{display:block;width:100%;max-width:1160px;margin:-60px auto 0;position:relative;z-index:5;box-shadow:0 22px 55px rgba(15,45,70,.20)}
@media(max-width:820px){.feature-band{padding:0 16px}.about-feature{margin:-30px auto 0}}
