:root{
--ink: #1C1C1E;
--ink-soft: #58585D;
--paper: #FFFFFF;
--paper-dim: #F1F1F2;
--line: #E1E1E3;
--brass: #6D071A;
--brass-deep: #4A0512;
--paper-rgb: 255,255,255;
--success: #1E7A46;
--success-bg: #EAF6EF;
--serif: 'Didact Gothic', sans-serif;
--sans: 'Didact Gothic', sans-serif;
--mono: 'Didact Gothic', sans-serif;
--max: 1140px;
--gutter: clamp(24px, 5vw, 72px);
}
/* Didact Gothic has no Greek glyphs; Google Sans covers Greek. */
html[lang="el"]{
--serif: 'Google Sans', sans-serif;
--sans: 'Google Sans', sans-serif;
--mono: 'Google Sans', sans-serif;
}
/* Dark mode  toggled via [data-theme="dark"] on , persisted in localStorage */
[data-theme="dark"]{
--ink: #F2F1ED;
--ink-soft: #B6B4AE;
--paper: #121214;
--paper-dim: #1C1C1F;
--line: #2E2E32;
--brass: #D01134;
--brass-deep: #A1122C;
--paper-rgb: 18,18,20;
--success: #4ADE80;
--success-bg: #12271C;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
margin:0;
overflow-x:hidden;
max-width:100vw;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;color:var(--ink);}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.container{
max-width:var(--max);
margin:0 auto;
padding:0 var(--gutter);
}
.eyebrow{
font-family:var(--mono);
font-size:12.5px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--brass);
}
.rule{
border:none;
border-top:1px solid var(--line);
margin:0;
}
/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
outline:2px solid var(--brass);
outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
/* ============================================================
Language switcher
============================================================ */
.header-right{
display:flex;
align-items:center;
gap:20px;
}
.lang-switch{
display:flex;
align-items:center;
gap:8px;
}
.lang-switch a{
display:block;
width:30px;height:30px;
border-radius:50%;
overflow:hidden;
border:2px solid transparent;
opacity:.5;
transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
flex-shrink:0;
}
.lang-switch a svg{width:100%;height:100%;display:block;}
.lang-switch a:hover{opacity:.85;transform:translateY(-1px);}
.lang-switch a.active{opacity:1;border-color:var(--brass);}
/* ============================================================
Header / Seal mark
============================================================ */
.site-header{
position:sticky;
top:0;
z-index:250;
background:rgba(var(--paper-rgb), 0.88);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
height:84px;
}
.seal{
display:flex;
align-items:center;
gap:12px;
font-family:var(--serif);
font-size:19px;
letter-spacing:.01em;
}
.seal-mark{
width:38px;height:38px;border-radius:50%;
border:1px solid var(--ink);
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);
font-size:14px;
flex-shrink:0;
}
.seal-name-full{display:block;}
.seal-name-sub{
display:block;
font-family:var(--mono);
font-size:10.5px;
letter-spacing:.1em;
color:var(--ink-soft);
text-transform:uppercase;
margin-top:1px;
}
nav.primary-nav ul{
display:flex;
gap:clamp(18px, 3vw, 40px);
font-size:14px;
}
nav.primary-nav a{
position:relative;
padding:6px 0;
color:var(--ink-soft);
transition:color .2s ease;
}
nav.primary-nav a::after{
content:'';
position:absolute;left:0;right:0;bottom:0;
height:1px;background:var(--brass);
transform:scaleX(0);
transform-origin:right;
transition:transform .25s ease;
}
nav.primary-nav a:hover,
nav.primary-nav a.active{color:var(--ink);}
nav.primary-nav a:hover::after,
nav.primary-nav a.active::after{transform:scaleX(1);transform-origin:left;}
.nav-toggle{
display:none;
background:none;border:none;
width:32px;height:22px;position:relative;
}
.nav-toggle span{
position:absolute;left:0;right:0;height:1px;background:var(--ink);
transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:10px;}
.nav-toggle span:nth-child(3){top:20px;}
.nav-toggle.open span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:500;
padding:13px 24px;
border:1px solid var(--ink);
border-radius:2px;
color:var(--ink);
transition:background .2s ease, color .2s ease, border-color .2s ease;
white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn-solid{
background:var(--ink);
color:var(--paper);
}
.btn-solid:hover{background:var(--brass-deep);border-color:var(--brass-deep);}
/* ============================================================
Beta notice banner (homepage)
============================================================ */
.beta-banner{
background:var(--paper-dim);
border-bottom:1px solid var(--line);
}
.beta-banner .container{
display:flex;
align-items:center;
gap:14px;
padding-top:12px;
padding-bottom:12px;
flex-wrap:wrap;
}
.beta-banner-tag{
font-family:var(--mono);
font-size:11px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--paper);
background:var(--brass);
padding:4px 10px;
border-radius:999px;
flex-shrink:0;
}
.beta-banner p{
margin:0;
font-size:13.5px;
color:var(--ink-soft);
}
/* ============================================================
Hero
============================================================ */
.hero{
position:relative;
padding:104px 0 96px;
overflow:hidden;
}
.hero-glyph{
position:absolute;
right:clamp(-40px, -2vw, 20px);
top:-40px;
font-family:var(--serif);
font-size:min(46vw, 560px);
color:rgba(109,7,26,0.05);
color:color-mix(in srgb, var(--brass) 7%, transparent);
line-height:1;
user-select:none;
pointer-events:none;
will-change:transform, opacity;
}
.hero-inner{
position:relative;
max-width:760px;
}
.hero h1{
font-size: clamp(40px, 6vw, 58px);
line-height: 1.2;
margin-top: 18px;
letter-spacing: -.01em;
font-weight: 400;
}
.hero h1 em{
font-style:italic;
color:var(--brass);
}
.hero-lede{
margin-top:26px;
font-size:18px;
color:var(--ink-soft);
max-width:560px;
}
.hero-actions{
margin-top:38px;
display:flex;
gap:16px;
flex-wrap:wrap;
}
.hero-meta{
margin-top:64px;
display:flex;
gap:clamp(24px, 4vw, 56px);
flex-wrap:wrap;
padding-top:28px;
border-top:1px solid var(--line);
}
.hero-meta div dt{
font-family:var(--mono);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-soft);
margin-bottom:6px;
}
.hero-meta div dd{
margin:0;
font-family:var(--serif);
font-size:22px;
}
/* ============================================================
Section shell
============================================================ */
section{padding:88px 0;}
.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:56px;
flex-wrap:wrap;
}
.section-head h2{
font-size:clamp(28px, 3.4vw, 40px);
margin-top:14px;
max-width:560px;
}
.section-head .lede{
max-width:340px;
color:var(--ink-soft);
font-size:15px;
padding-bottom:6px;
}
/* ============================================================
About
============================================================ */
.about{background:var(--paper-dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.about-grid{
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:clamp(32px,6vw,88px);
align-items:start;
}
.about-portrait{
aspect-ratio:4/5;
position:relative;
}
.about-portrait::before,
.about-hero-portrait::before{
content:'';
position:absolute;
inset:22px -22px -22px 22px;
border:1px solid var(--brass);
z-index:0;
}
.about-portrait-frame{
position:relative;
z-index:1;
width:100%;
height:100%;
background:linear-gradient(160deg, #dcd3ba, #c9bc9c);
border-radius:2px;
overflow:hidden;
}
.about-portrait-frame img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .6s ease;
}
.about-portrait-corner{
position:absolute;
width:28px;
height:28px;
z-index:2;
transition:transform .4s ease, border-color .4s ease;
}
.about-portrait-corner--tl{
top:-12px;
left:-12px;
border-top:2px solid var(--brass);
border-left:2px solid var(--brass);
}
.about-portrait-corner--br{
bottom:-34px;
right:-34px;
border-bottom:2px solid var(--brass);
border-right:2px solid var(--brass);
}
.about-body p{margin-bottom:18px;color: var(--brass);font-size: 20px;font-weight: 500;}
.about-body p:last-child{margin-bottom:0;}
.about-title{margin-top:14px;font-size:clamp(26px,3vw,36px);}
.about-description{margin-top:24px;}
.about-description p{margin-bottom:18px;color:var(--ink-soft);font-size:16px;}
.about-description p:last-child{margin-bottom:0;}
.about-cta{margin-top:30px;}
/* Hovering the CTA nudges the portrait's corner marks open and gives the photo a soft zoom */
.about-grid:has(.about-cta:hover) .about-portrait-frame img{transform:scale(1.05);}
.about-grid:has(.about-cta:hover) .about-portrait-corner--tl{transform:translate(-8px,-8px);border-color:var(--brass-deep);}
.about-grid:has(.about-cta:hover) .about-portrait-corner--br{transform:translate(8px,8px);border-color:var(--brass-deep);}
.credentials{
margin-top:34px;
display:grid;
gap:0;
border-top:1px solid var(--line);
}
.credentials li{
display:flex;
justify-content:space-between;
gap:16px;
padding:16px 0;
border-bottom:1px solid var(--line);
font-size:14.5px;
}
.credentials li span:first-child{color:var(--ink-soft);}
.credentials li span:last-child{font-family:var(--mono);font-size:13px;text-align:right;}
/* ============================================================
Services  clause / statute list
============================================================ */
.clause-list{
border-top:1px solid var(--ink);
}
.clause{
display:grid;
grid-template-columns:110px 1fr;
gap:32px;
padding:38px 0;
border-bottom:1px solid var(--line);
transition:padding-left .25s ease;
}
.clause:hover{padding-left:8px;}
.clause-num{
font-family:var(--mono);
font-size:14px;
color:var(--brass);
padding-top:4px;
}
.clause h3{font-size:23px;margin-bottom:10px;}
.clause p{color:var(--ink-soft);font-size:15px;max-width:640px;}
/* ============================================================
Insights (articles) cards  shared by homepage module & blog index
============================================================ */
.article-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line);
}
.article-card{
background:var(--paper);
padding:32px 28px 34px;
display:flex;
flex-direction:column;
transition:background .2s ease;
}
.article-card:hover{background:var(--paper-dim);}
.article-card .eyebrow{margin-bottom:16px;}
.article-card h3{
font-size:21px;
line-height:1.25;
margin-bottom:14px;
}
.article-card p{color:var(--ink-soft);font-size:14.5px;flex-grow:1;}
.article-card .read-more{
margin-top:22px;
font-family:var(--mono);
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--ink);
display:inline-flex;
align-items:center;
gap:6px;
}
.article-card .read-more .arrow{transition:transform .2s ease;}
.article-card:hover .read-more .arrow{transform:translateX(4px);}
/* Blog index specific */
.blog-list{border-top:1px solid var(--ink);}
.blog-row{
display:grid;
grid-template-columns:130px 1fr 160px;
gap:28px;
align-items:start;
padding:34px 0;
border-bottom:1px solid var(--line);
}
.blog-row:hover .blog-row-title{color:var(--brass-deep);}
.blog-row-date{
font-family:var(--mono);
font-size:12.5px;
color:var(--ink-soft);
padding-top:6px;
}
.blog-row-title{
font-size:22px;
transition:color .2s ease;
margin-bottom:8px;
}
.blog-row-excerpt{color:var(--ink-soft);font-size:14.5px;max-width:560px;}
.blog-row-cat{
font-family:var(--mono);
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-soft);
text-align:right;
padding-top:6px;
}
/* Blog index — lead story + two-column grid */
.blog-hero{padding:72px 0 32px;}
.blog-hero h1{
font-size:clamp(34px,5vw,52px);
margin-top:16px;
max-width:640px;
}
.blog-hero p.lede{
margin-top:20px;
max-width:520px;
color:var(--ink-soft);
font-size:16px;
}
.blog-list{padding-top:24px;}
.blog-feature{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:40px;
align-items:stretch;
border-bottom:1px solid var(--ink);
padding-bottom:40px;
margin-bottom:40px;
}
.blog-feature-media{
background-size:cover;
background-position:center;
background-color:var(--paper-dim);
min-height:320px;
border:1px solid var(--line);
}
.blog-feature-body{display:flex;flex-direction:column;justify-content:center;}
.blog-feature-title{
font-size:clamp(26px,3vw,38px);
line-height:1.15;
margin:12px 0 16px;
transition:color .2s ease;
}
.blog-feature:hover .blog-feature-title{color:var(--brass-deep);}
.blog-feature-excerpt{color:var(--ink-soft);font-size:16px;max-width:520px;}
.blog-feature .read-more{margin-top:20px;}
.blog-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:var(--line);
border:1px solid var(--line);
}
.blog-grid-card{
background:var(--paper);
padding:28px 26px 30px;
display:flex;
flex-direction:column;
transition:background .2s ease;
}
.blog-grid-card:hover{background:var(--paper-dim);}
.blog-grid-card--wide{grid-column:1 / -1;}
.blog-grid-card--wide .blog-grid-title{font-size:26px;}
.blog-grid-media{
background-size:cover;
background-position:center;
background-color:var(--paper-dim);
min-height:160px;
margin-bottom:18px;
}
.blog-grid-title{
font-size:19px;
line-height:1.25;
margin-bottom:10px;
transition:color .2s ease;
}
.blog-grid-card:hover .blog-grid-title{color:var(--brass-deep);}
.blog-grid-excerpt{color:var(--ink-soft);font-size:14.5px;flex-grow:1;}
.blog-grid-card .read-more{margin-top:20px;}
.pagination{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:8px;
padding-top:32px;
}
.pagination-list{
display:flex;
align-items:center;
gap:6px;
list-style:none;
margin:0;
padding:0;
}
.pagination-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:34px;
padding:0 6px;
font-family:var(--mono);
font-size:13px;
color:var(--ink-soft);
border-radius:2px;
transition:color .2s ease, background .2s ease;
}
.pagination-link:hover{color:var(--ink);background:var(--paper-dim);}
.pagination-link.is-current{
color:var(--paper);
background:var(--ink);
}
.pagination-dots{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:34px;
font-family:var(--mono);
font-size:13px;
color:var(--ink-soft);
}
.pagination-arrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14px;
font-weight:500;
color:var(--ink);
transition:color .2s ease, opacity .2s ease;
}
.pagination-arrow:hover{color:var(--brass-deep);}
.pagination-arrow.is-disabled{
opacity:.35;
pointer-events:none;
}
.pagination-arrow .arrow{transition:transform .2s ease;}
.pagination-arrow:hover .arrow-prev{transform:translateX(-4px);}
.pagination-arrow:hover .arrow-next{transform:translateX(4px);}
@media (max-width:640px){
.pagination{flex-wrap:wrap;justify-content:center;}
.pagination-list{order:3;width:100%;justify-content:center;margin-top:8px;}
}
.filter-bar{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:44px;
}
.filter-chip{
font-family:var(--mono);
font-size:12px;
letter-spacing:.05em;
text-transform:uppercase;
padding:8px 16px;
border:1px solid var(--line);
border-radius:20px;
color:var(--ink-soft);
background:transparent;
transition:all .2s ease;
}
.filter-chip:hover{border-color:var(--ink);color:var(--ink);}
.filter-chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}
/* ============================================================
Article page
============================================================ */
.article-header{padding:72px 0 48px;border-bottom:1px solid var(--line);}
.article-header .eyebrow{margin-bottom:20px;}
.article-header h1{font-size:clamp(32px,5vw,52px);line-height:1.1;max-width:820px;font-weight: 700;}
.article-header .meta-row{
margin-top:28px;
display:flex;
gap:28px;
flex-wrap:wrap;
font-family:var(--mono);
font-size: 14px;
color: var(--brass);
text-transform:uppercase;
letter-spacing:.05em;
}
.article-tags{
margin-top:20px;
display:flex;
flex-wrap:wrap;
gap:10px;
}
.tag-chip{
font-family:var(--mono);
font-size: 14px;
letter-spacing:.03em;
color:var(--brass);
border:1px solid var(--line);
border-radius:999px;
padding:7px 16px;
transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.tag-chip:hover{background:var(--brass);border-color:var(--brass);color:var(--paper);}
.article-body{
max-width:720px;
margin:0 auto;
padding:64px var(--gutter) 40px;
}
.article-body p{margin-bottom:22px;color:var(--ink-soft);font-size:17px;line-height:1.75;}
.article-body>p:first-of-type::before,
.article-body>p:last-of-type::after{
content:'';
display:inline-block;
width:4.2em;
height:4.2em;
vertical-align:middle;
background-size:cover;
background-position:center;
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.article-body>p:first-of-type::before{
margin-right:12px;
background-image:url('../images/gaudi/i2.jpeg');
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
}
.article-body>p:last-of-type::after{
margin-left:12px;
background-image:url('../images/gaudi/i2.jpeg');
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
}
.article-body h2{font-size:26px;margin:44px 0 18px;color:var(--ink);}
.article-body blockquote{
border-left:2px solid var(--brass);
padding-left:24px;
margin:36px 0;
font-family:var(--serif);
font-size:21px;
font-style:italic;
color:var(--ink);
}
.article-footer{
max-width:720px;
margin:0 auto;
padding:0 var(--gutter) 88px;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
border-top:1px solid var(--line);
padding-top:32px;
}
/* ============================================================
Gaudàmosaic accent (reusable  desktop-only, used in hero + footer)
============================================================ */
.gaudi-mosaic{display:none;}
.mosaic-tile{
position:relative;
aspect-ratio:1;
border-radius:50%;
overflow:hidden;
border:6px solid var(--paper);
box-shadow:0 20px 44px rgba(0,0,0,.22);
}
.mosaic-tile-face{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
}
.mosaic-tile-face:first-child{opacity:1;}
/* Hero placement  right side, only once there's clear space beside the copy */
@media (min-width:1200px){
.hero-mosaic{
display:flex;
flex-direction:column;
gap:28px;
position:absolute;
right:clamp(24px, 4vw, 72px);
top:50%;
transform:translateY(-50%);
z-index:1;
}
.hero-mosaic .mosaic-tile{width:130px;}
.hero-mosaic .mosaic-tile:last-child{margin-left:56px;}
}
@media (min-width:1440px){
.hero-mosaic .mosaic-tile{width:150px;}
}
/* ============================================================
Contact / CTA band
============================================================ */
.cta-band{
position:relative;
overflow:hidden;
background:var(--ink);
color:var(--paper);
padding:96px 0;
}
@media (min-width:1200px){
.footer-mosaic{
display:flex;
align-items:center;
gap:28px;
position:absolute;
right:clamp(24px, 4vw, 72px);
top:50%;
transform:translateY(-50%);
z-index:1;
}
.footer-mosaic .mosaic-tile{width:110px;}
.footer-mosaic .mosaic-tile:last-child{margin-top:44px;}
}
@media (min-width:1440px){
.footer-mosaic .mosaic-tile{width:130px;}
}
.cta-band .eyebrow{color: var(--line);}
.cta-band h2{
color:var(--paper);
font-size:clamp(30px,4.4vw,48px);
max-width:640px;
margin-top:18px;
}
.cta-band h2::before,
.cta-band h2::after{
content:'';
display:inline-block;
width:clamp(28px, 3.4vw, 46px);
height:clamp(28px, 3.4vw, 46px);
vertical-align:middle;
background-size:cover;
background-position:center;
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
.cta-band h2::before{
margin-right:10px;
background-image:url('../images/gaudi/i2.jpeg');
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9C%3C/text%3E%3C/svg%3E");
}
.cta-band h2::after{
margin-left:10px;
background-image:url('../images/gaudi/i2.jpeg');
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='84' font-family='Georgia, serif' font-size='130' font-weight='700' text-anchor='middle' fill='white'%3E%E2%80%9D%3C/text%3E%3C/svg%3E");
}
.cta-band-row{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:32px;
flex-wrap:wrap;
}
.cta-band .btn{border-color:var(--paper);color:var(--paper);}
.cta-band .btn:hover{background:var(--paper);color:var(--ink);}
.contact-details{margin-top:44px;display:flex;gap:48px;flex-wrap:wrap;}
.contact-details div dt{
font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
color:#9AA1B8;margin-bottom:8px;
}
.contact-details div dd{margin:0;font-size:18px;}
.contact-details a:hover{color:var(--brass);}
/* ============================================================
Footer
============================================================ */
footer.site-footer{
padding:40px 0;
border-top:1px solid var(--line);
}
.footer-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
flex-wrap:wrap;
font-size: 15px;
color:var(--ink-soft);
}
.footer-row nav ul{display:flex;flex-wrap:wrap;gap:12px 24px;}
.footer-row a:hover{color:var(--brass-deep);}
.footer-credit{display:flex;flex-wrap:wrap;gap:6px;}
.footer-credit a{
text-decoration:underline;
text-decoration-color:transparent;
transition:color .2s ease, text-decoration-color .2s ease;
}
.footer-credit a:hover{text-decoration-color:currentColor;}
@media (max-width:520px){
.footer-credit{flex-direction:column;gap:2px;}
.footer-credit-sep{display:none;}
}
/* ============================================================
Contact page
============================================================ */
.contact-hero{
padding:96px 0 72px;
position:relative;
overflow:hidden;
}
.contact-hero .glyph{
position:absolute;
right:clamp(-30px,-1vw,10px);
top:-20px;
font-family:var(--serif);
font-size:min(30vw, 340px);
color:rgba(22,33,62,0.045);
line-height:1;
pointer-events:none;
}
.contact-hero h1{
font-size:clamp(38px,5.6vw,60px);
margin-top:16px;
max-width:640px;
}
.contact-hero p.lede{
margin-top:22px;
font-size:18px;
color:var(--ink-soft);
max-width:480px;
}
.contact-cards{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
}
.contact-card{
border:1px solid var(--line);
border-radius:2px;
background:var(--paper-dim);
padding:36px 30px 30px;
display:flex;
flex-direction:column;
gap:22px;
transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.contact-card:hover{
border-color:var(--brass);
background:var(--paper);
transform:translateY(-3px);
}
.contact-card .card-top{
display:flex;
align-items:center;
justify-content:space-between;
}
.contact-card .label{
font-family:var(--mono);
font-size:11.5px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--brass);
}
.contact-card .glyph-mark{
width:34px;height:34px;border-radius:50%;
border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:13px;color:var(--ink-soft);
transition:border-color .2s ease, color .2s ease;
}
.contact-card:hover .glyph-mark{border-color:var(--brass);color:var(--brass);}
.contact-card .value{
font-family:var(--serif);
font-size:clamp(19px,2vw,23px);
line-height:1.3;
word-break:break-word;
}
.contact-card .go{
margin-top:auto;
padding-top:18px;
border-top:1px solid var(--line);
font-family:var(--mono);
font-size:11.5px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--ink);
display:flex;
align-items:center;
justify-content:space-between;
}
.contact-card .go .arrow{transition:transform .2s ease;}
.contact-card:hover .go .arrow{transform:translateX(4px);}
@media (max-width:820px){
.contact-cards{grid-template-columns:1fr;}
}
.contact-cards-single{grid-template-columns:minmax(0,320px);}
.contact-note{
margin-top:56px;
padding-top:32px;
border-top:1px solid var(--line);
color:var(--ink-soft);
font-size:14.5px;
max-width:520px;
}
/* ============================================================
Contact form
============================================================ */
.contact-form-section{padding-top:0;}
.contact-form{
max-width:680px;
display:flex;
flex-direction:column;
gap:22px;
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}
.form-field{
display:flex;
flex-direction:column;
gap:8px;
}
.form-field label{
font-family:var(--mono);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-soft);
}
.form-field input,
.form-field textarea{
font-family:var(--sans);
font-size:15px;
color:var(--ink);
background:var(--paper);
border:1px solid var(--line);
border-radius:2px;
padding:12px 14px;
transition:border-color .2s ease;
}
.form-field input:focus,
.form-field textarea:focus{
outline:none;
border-color:var(--brass);
}
.form-field textarea{resize:vertical;}
.form-error{
font-size:13px;
color:var(--brass);
}
.form-success{
display:flex;
align-items:center;
gap:12px;
margin-bottom:24px;
padding:14px 18px;
border:1px solid var(--success);
border-left:4px solid var(--success);
border-radius:2px;
background:var(--success-bg);
color:var(--success);
font-size:14.5px;
}
.form-success::before{
content:"";
flex-shrink:0;
width:22px;
height:22px;
background-color:var(--success);
-webkit-mask:url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.contact-form button[type="submit"]{
align-self:flex-start;
border:1px solid var(--ink);
cursor:pointer;
font-family:inherit;
}
@media (max-width:600px){
.form-row{grid-template-columns:1fr;}
}
/* ============================================================
About page  timeline
============================================================ */
.about-hero{padding:96px 0 0;}
.about-hero-grid{
display:grid;
grid-template-columns:1fr 1.3fr;
gap:clamp(32px,6vw,80px);
align-items:end;
padding-bottom:72px;
border-bottom:1px solid var(--line);
}
.about-hero-portrait{
aspect-ratio:3/4;
position:relative;
}
.about-hero-text h1{
font-size:clamp(36px,5vw,54px);
margin-top:16px;
}
.about-hero-text p.lede{
margin-top:22px;
font-size:18px;
color:var(--ink-soft);
max-width:480px;
}
.timeline{border-top:1px solid var(--ink);}
.timeline-row{
display:grid;
grid-template-columns:130px 1fr;
gap:32px;
padding:34px 0;
border-bottom:1px solid var(--line);
}
.timeline-row .year{
font-family:var(--mono);
font-size:14px;
color:var(--brass);
padding-top:4px;
}
.timeline-row h3{font-size:20px;margin-bottom:8px;}
.timeline-row p{color:var(--ink-soft);font-size:15px;max-width:600px;}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.pill{
font-family:var(--mono);
font-size:12px;
letter-spacing:.04em;
padding:8px 16px;
border:1px solid var(--line);
border-radius:20px;
color:var(--ink-soft);
}
@media (max-width:820px){
.about-hero-grid{grid-template-columns:1fr;}
.timeline-row{grid-template-columns:1fr;gap:8px;}
}
/* ============================================================
Reveal-on-scroll
============================================================ */
.reveal{
opacity:0;
transform:translateY(18px);
transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{opacity:1;transform:translateY(0);}
/* ============================================================
Responsive
============================================================ */
@media (max-width:900px){
.about-grid{grid-template-columns:1fr;}
.article-grid{grid-template-columns:1fr 1fr;}
.blog-row{grid-template-columns:90px 1fr;}
.blog-row-cat{display:none;}
.blog-feature{grid-template-columns:1fr;gap:24px;}
.blog-feature-media{min-height:220px;}
}
@media (max-width:720px){
/* backdrop-filter on an ancestor turns position:fixed descendants (the nav
overlay below) into position:absolute in WebKit/iOS Safari, breaking the
overlay. Drop it on mobile widths where the overlay nav is in play. */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;}
nav.primary-nav{
position:fixed;
top:84px;left:0;right:0;bottom:0;
background:var(--paper);
transform:translateX(100%);
transition:transform .3s ease;
padding:32px var(--gutter);
border-top:1px solid var(--line);
overflow-y:auto;
z-index:260;
}
nav.primary-nav.open{transform:translateX(0);}
body.nav-open{overflow:hidden;}
nav.primary-nav ul{flex-direction:column;gap:22px;font-size:20px;}
.nav-toggle{display:block;}
.hero-meta{gap:28px;}
.article-grid{grid-template-columns:1fr;}
.clause{grid-template-columns:1fr;gap:10px;}
.cta-band-row{flex-direction:column;align-items:flex-start;}
.blog-grid{grid-template-columns:1fr;}
.blog-grid-card--wide{grid-column:auto;}
}
/* ============================================================
Dark mode toggle
============================================================ */
.theme-toggle{
position:fixed;
right:20px;
bottom:20px;
z-index:200;
width:52px;
height:30px;
display:flex;
align-items:center;
padding:3px;
border:1px solid var(--line);
border-radius:999px;
background:var(--paper-dim);
box-shadow:0 4px 16px rgba(0,0,0,0.12);
transition:background .2s ease, border-color .2s ease;
}
.theme-toggle:hover{border-color:var(--brass);}
.theme-toggle-track{
position:relative;
width:100%;
height:100%;
}
.theme-toggle-icon{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:12px;
line-height:1;
color:var(--ink-soft);
pointer-events:none;
}
.theme-toggle-icon-sun{left:2px;}
.theme-toggle-icon-moon{right:2px;}
.theme-toggle-thumb{
position:absolute;
top:50%;
left:2px;
transform:translate(0, -50%);
width:22px;
height:22px;
border-radius:50%;
background:var(--brass);
box-shadow:0 1px 3px rgba(0,0,0,0.3);
transition:transform .25s ease, background .2s ease;
}
[data-theme="dark"] .theme-toggle-thumb{transform:translate(22px, -50%);}
@media (max-width:640px){
.theme-toggle{right:16px;bottom:16px;}
}