:root { --ahtapot-cyan:#00b8c5; --ahtapot-cyan-deep:#00aebc; --ahtapot-dark:#001d31; --ahtapot-cream:#f8edda; --ahtapot-text:#00acba; --ahtapot-container:82.5%; --ahtapot-section-spacing:7.3vw; --ahtapot-font:"Figtree", Arial, Helvetica, sans-serif; --ahtapot-work-cover-ratio:1200 / 464; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ahtapot-cream); color:var(--ahtapot-text); font-family:var(--ahtapot-font); font-weight:400; font-synthesis:none; } a { color:inherit; } .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .ahtapot-container { width:var(--ahtapot-container); max-width:2465px; margin:auto; }
.site-header { position:absolute; z-index:3; width:100%; top:0; left:0; color:var(--ahtapot-cyan); } .site-header__inner { display:flex; align-items:center; justify-content:space-between; width:95%; margin:0 auto; padding:3.25vw 0; } .site-logo { display:block; width:17.5vw; max-width:204px; min-width:126px; text-decoration:none; } .site-logo img { display:block; width:100%; height:auto; } .menu-toggle { position:relative; z-index:12; display:flex; flex-direction:column; align-items:stretch; gap:5px; width:38px; padding:0; border:0; background:none; cursor:pointer; } .menu-toggle span:not(.screen-reader-text) { display:block; height:3px; background:var(--ahtapot-cyan); transform-origin:center; transition:transform .2s ease, opacity .2s ease, background-color .2s ease; } .site-navigation { position:fixed; z-index:10; inset:0; display:block; overflow-y:auto; padding:15.5vw 3.8vw 5vw; background:var(--ahtapot-cyan); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s; } .site-navigation.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .24s ease, transform .24s ease, visibility 0s; } .overlay-menu { margin:0; padding:0; list-style:none; } .overlay-menu a { display:inline-block; color:var(--ahtapot-cream); font-size:clamp(3.6rem,6.6vw,12.4rem); font-weight:400; letter-spacing:-.045em; line-height:1.08; text-decoration:none; transition:opacity .18s ease, transform .18s ease; } .overlay-menu a:hover, .overlay-menu a:focus-visible, .overlay-menu .current-menu-item > a { opacity:.72; transform:translateX(.18em); } body.menu-open { overflow:hidden; } body.menu-open .site-header { z-index:11; } body.menu-open .site-logo:not(.site-logo--light) img { filter:brightness(0) saturate(100%) invert(95%) sepia(30%) saturate(360%) hue-rotate(334deg) brightness(104%) contrast(95%); } body.menu-open .menu-toggle span:not(.screen-reader-text) { background:var(--ahtapot-cream); } body.menu-open .menu-toggle span:nth-child(2) { transform:translateY(8px) rotate(45deg); } body.menu-open .menu-toggle span:nth-child(3) { opacity:0; } body.menu-open .menu-toggle span:nth-child(4) { transform:translateY(-8px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .site-navigation, .menu-toggle span:not(.screen-reader-text), .overlay-menu a { transition:none; } }
.hero { height:55.8vw; min-height:540px; max-height:1670px; position:relative; overflow:hidden; background:#22313a; } .hero__slides { position:relative; width:100%; height:100%; } .hero__slide { position:absolute; inset:0; width:100%; height:100%; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease, visibility .45s ease; } .hero__slide.is-active { opacity:1; visibility:visible; pointer-events:auto; } .hero__slide-link, .hero__image, .hero__video { display:block; width:100%; height:100%; } .hero__image, .hero__video { object-fit:cover; object-position:center center; } .asset-placeholder { border:1px solid currentColor; display:grid; place-items:center; color:rgba(0,77,86,.38); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(7px,.64vw,11px); } .hero__pagination { position:absolute; z-index:1; display:flex; gap:7px; bottom:5.2%; left:50%; transform:translateX(-50%); width:55.5%; } .hero__pagination button { display:block; height:5px; flex:1; padding:0; border:0; border-radius:5px; background:rgba(248,237,218,.68); cursor:pointer; } .hero__pagination .is-active { background:var(--ahtapot-cyan); } @media (prefers-reduced-motion: reduce) { .hero__slide { transition:none; } }
.manifesto { min-height:50.8vw; display:flex; align-items:center; padding:6vw 0; background:var(--ahtapot-cyan) url('../images/home/bg-manifesto.webp') center center / cover no-repeat; color:var(--ahtapot-cream); } .manifesto h1 { margin:0; max-width:20ch; font-size:clamp(3.15rem,6.65vw,12.5rem); font-weight:400; letter-spacing:-.04em; line-height:1.12; }
.section-cream { background:var(--ahtapot-cream); } .brands { padding:6.3vw 0 2.7vw; } .eyebrow { margin:0; color:var(--ahtapot-cyan); font-size:clamp(11px,1.05vw,20px); font-weight:400; letter-spacing:.035em; line-height:1.25; text-transform:uppercase; } .brand-grid { display:grid; grid-template-columns:repeat(4,1fr); column-gap:10%; row-gap:3.1vw; margin:9.3vw 0 7vw; } .brand-item { display:flex; align-items:center; justify-content:center; height:3.5vw; min-height:28px; border-color:rgba(0,87,97,.1); } .brand-item__image { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; } .text-link { display:block; width:max-content; margin:0 auto; font-size:clamp(12px,1.08vw,20px); font-weight:400; letter-spacing:-.015em; line-height:1.3; text-decoration:none; }
.partners { min-height:20.1vw; padding:4.5vw 0 3vw; background:var(--ahtapot-cyan) url('../images/home/bg-partners.webp') center center / cover no-repeat; color:var(--ahtapot-cream); } .eyebrow--muted { color:rgba(0,101,115,.16); } .partner-grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:14%; width:78%; margin:3.8vw auto 0; } .partner-logo { display:flex; align-items:center; justify-content:center; height:4.5vw; min-height:36px; color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.35); } .partner-logo__image { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; }
.featured { position:relative; overflow:hidden; padding:4.5vw 0 5.3vw; } .featured-carousel { display:grid; grid-template-columns:10% 1fr 10%; align-items:center; gap:4%; margin:4.3vw 0 3.2vw; } .featured-carousel:not(.featured-carousel--has-slides) { grid-template-columns:1fr; } .featured-carousel__viewport { position:relative; width:96%; justify-self:center; aspect-ratio:var(--ahtapot-work-cover-ratio); overflow:hidden; } .featured-card, .work-cover { display:block; width:100%; height:100%; overflow:hidden; } .featured-card { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease; background:#e6d9c5; } .featured-card.asset-placeholder { display:grid; place-items:center; } .featured-card.is-active, .featured-carousel:not(.featured-carousel--has-slides) .featured-card { opacity:1; pointer-events:auto; } .work-cover__image { display:block; width:100%; height:100%; object-fit:cover; } .carousel-arrow { position:relative; width:4.1vw; height:4.1vw; min-width:30px; min-height:30px; padding:0; border:solid var(--ahtapot-cyan); border-width:0 0 2px 2px; background:none; cursor:pointer; transform:rotate(45deg); } .carousel-arrow--next { justify-self:end; transform:rotate(225deg); } .tentacle-artwork { position:absolute; z-index:0; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; max-width:none; transform:none; pointer-events:none; } .featured .text-link, .featured-carousel, .featured .eyebrow { position:relative; z-index:1; }
.contact { min-height:51vw; padding:7.5vw 0 4.5vw; background:var(--ahtapot-dark) url('../images/home/bg-footer.webp') center center / cover no-repeat; color:var(--ahtapot-cyan); } .contact__details { display:flex; flex-direction:column; align-items:flex-start; gap:.35vw; font-size:clamp(1.2rem,2.6vw,4.8rem); font-weight:400; letter-spacing:-.025em; line-height:1.17; } .contact__details a { text-decoration:none; border-bottom:1px solid transparent; } .contact__details a:hover { border-color:currentColor; } .contact address { margin:2.8vw 0 0; font-style:normal; } .membership-logos { display:flex; flex-wrap:wrap; align-items:center; gap:1.3vw; margin-top:4.3vw; } .membership-logo { display:flex; align-items:center; justify-content:center; width:4.3vw; min-width:35px; height:2.7vw; min-height:22px; border-color:rgba(0,184,197,.4); color:var(--ahtapot-cyan); } .membership-logo__image { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; } .membership-note { margin:1.1vw 0 2.4vw; font-size:clamp(10px,1vw,18px); letter-spacing:-.01em; line-height:1.35; } .social-links { display:flex; gap:.8vw; margin:0; padding:0; list-style:none; } .social-links a { display:grid; width:2.35vw; min-width:27px; height:2.35vw; min-height:27px; place-items:center; border:1px solid var(--ahtapot-cyan); border-radius:50%; text-decoration:none; font-size:clamp(11px,1.15vw,19px); font-weight:400; }
.brands-page { overflow:hidden; background:var(--ahtapot-cream); } .brands-page__content { position:relative; overflow:hidden; padding:15.3vw 0 11vw; } .brands-page__intro { display:flex; align-items:center; gap:1.3vw; } .brands-page__intro > p:last-child { margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.015em; line-height:1.35; } .brands-page__divider { display:block; width:3vw; height:1px; background:#929292; } .brand-grid--directory { margin:7.2vw 0 0; row-gap:7vw; } .brand-grid--directory .brand-item { height:4.4vw; min-height:44px; } .brand-grid--directory .brand-item__image { filter:grayscale(1); transition:filter .25s ease, opacity .25s ease; } .brand-grid--directory .brand-item:hover .brand-item__image, .brand-grid--directory .brand-item:focus-within .brand-item__image { filter:grayscale(0); } .brand-directory--references { margin-top:12vw; } .brand-directory__empty { grid-column:1/-1; margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); line-height:1.35; } .brands-page__tentacle { position:absolute; z-index:0; left:-5vw; bottom:-24.7vw; width:24vw; height:auto; transform:none; pointer-events:none; } .brand-directory, .brands-page__intro { position:relative; z-index:1; } .fallback-content { min-height:65vh; padding:12rem 0 6rem; } .fallback-content h1 { color:var(--ahtapot-dark); }
.team-page { overflow:hidden; background:var(--ahtapot-cream); } .team-page__content { position:relative; overflow:hidden; padding:15.3vw 0 18.1vw; } .team-page__intro { display:flex; align-items:center; gap:1.3vw; } .team-page__intro > p:last-child { margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.015em; line-height:1.35; } .team-page__divider { display:block; width:3vw; height:1px; background:#929292; } .team-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5.8vw 5%; margin:7vw auto 0; } .team-card { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; } .team-card__portrait { position:relative; width:min(100%,12.5vw); min-width:148px; aspect-ratio:1 / 1; flex:none; } .team-card__photo-shell { position:absolute; z-index:0; top:4%; left:9%; width:82%; aspect-ratio:1 / 1; } .team-card__photo { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; filter:grayscale(100%); } .team-card__frame { position:absolute; z-index:1; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--ahtapot-cyan); stroke-linecap:round; stroke-width:3; pointer-events:none; } .team-card__name { display:block; position:static; z-index:auto; margin:1.25vw 0 .2vw; color:var(--ahtapot-cyan); font-size:clamp(15px,1.35vw,26px); font-weight:400; letter-spacing:-.035em; line-height:1.1; text-transform:uppercase; } .team-card__title { display:block; position:static; z-index:auto; margin:0; color:var(--ahtapot-dark); font-size:clamp(12px,1.03vw,19px); font-weight:400; letter-spacing:-.025em; line-height:1.2; } .team-page__empty { grid-column:1/-1; margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); line-height:1.35; } .team-page__tentacle { position:absolute; z-index:0; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; max-width:none; transform:none; pointer-events:none; }
.services-360-page { overflow:hidden; background:var(--ahtapot-cream); } .services-360-hero { min-height:42.8vw; display:flex; align-items:flex-end; padding:9.3vw 0 3.3vw; background:var(--ahtapot-cyan) url('../images/home/bg-manifesto.webp') center center / cover no-repeat; color:var(--ahtapot-cream); text-align:center; } .services-360-hero__content { max-width:92%; } .services-360-hero h1 { margin:0 0 2.5vw; font-size:clamp(5rem,9.4vw,17.6rem); font-weight:400; letter-spacing:-.055em; line-height:.8; } .services-360-hero p { max-width:86%; margin:0 auto; font-size:clamp(12px,1.05vw,20px); letter-spacing:-.02em; line-height:1.25; } .services-360-hero p + p { margin-top:1.4vw; } .services-360-content { position:relative; overflow:hidden; padding:5.5vw 0 18.1vw; } .services-360-list { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8.2vw; } .service-360-item { width:100%; text-align:center; } .service-360-item__icon-circle { display:grid; width:5.7vw; min-width:72px; aspect-ratio:1 / 1; margin:0 auto 1.7vw; place-items:center; border:2px solid var(--ahtapot-cyan); border-radius:50%; } .service-360-item__icon { display:block; width:58%; height:58%; object-fit:contain; } .service-360-item__title { margin:0; color:var(--ahtapot-cyan); font-size:clamp(1.45rem,2vw,3.8rem); font-weight:400; letter-spacing:-.04em; line-height:1.1; } .service-360-item__description { max-width:88%; margin:1.4vw auto 0; color:#626262; font-size:clamp(12px,1.04vw,20px); font-weight:400; letter-spacing:-.02em; line-height:1.25; } .services-360-empty { margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); } .services-360-tentacle { position:absolute; z-index:0; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; max-width:none; transform:none; pointer-events:none; }
.eyebrow, .team-card__name, .service-360-item__title, .work-single__brand { font-weight:500; }
body.elementor-page .elementor-widget, body.elementor-page .elementor-widget-heading .elementor-heading-title, body.elementor-page .elementor-widget-text-editor, body.elementor-page .elementor-widget-button .elementor-button { font-family:var(--ahtapot-font) !important; }
.site-header--light .menu-toggle span:not(.screen-reader-text) { background:var(--ahtapot-cream); }
.ai-tapot-page { overflow:hidden; background:#1d5eb7; } .ai-tapot-hero__fallback { width:100%; height:100%; background:#183d72; } .ai-tapot-content { position:relative; min-height:47vw; overflow:hidden; padding:5.8vw 0 6vw; background:#1d5eb7; color:var(--ahtapot-cream); } .ai-tapot-content__inner { position:relative; z-index:1; } .ai-tapot-content__logo { display:block; width:17.5vw; max-width:330px; min-width:180px; height:auto; } .ai-tapot-content__copy { width:60%; margin-top:6.6vw; font-size:clamp(1.25rem,2vw,3.75rem); font-weight:400; letter-spacing:-.035em; line-height:1.1; } .ai-tapot-content__copy p { margin:0; } .ai-tapot-content__copy p + p { margin-top:4vw; } .ai-tapot-content__artwork { position:absolute; z-index:0; top:-1.5vw; right:-2.5vw; bottom:auto; width:27.5vw; max-width:none; height:auto; pointer-events:none; }
.work-single { background:var(--ahtapot-cyan); color:var(--ahtapot-cream); } .work-single__hero { height:55.8vw; min-height:540px; max-height:1670px; background:var(--ahtapot-dark); } .work-single__hero-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .work-single__surface { position:relative; overflow:hidden; padding:3.5vw 0 12vw; } .work-single__info-shell { width:95%; margin:0 auto; } .work-single__info { display:flex; justify-content:space-between; align-items:flex-start; gap:4vw; } .work-single__meta p { margin:0; } .work-single__description { font-size:clamp(1.1rem,1.25vw,2.35rem); letter-spacing:-.025em; line-height:1.2; } .work-single__brand { margin-top:.35em !important; font-size:clamp(1rem,1.25vw,2.3rem); letter-spacing:.035em; text-transform:uppercase; } .work-share { display:inline-flex; align-items:center; gap:.5em; padding:0; border:0; background:none; color:var(--ahtapot-cream); cursor:pointer; font:inherit; font-size:clamp(12px,1.1vw,20px); letter-spacing:.025em; } .work-share span:first-child { font-size:1.3em; } .work-share.is-copied span:last-child { font-size:0; } .work-share.is-copied span:last-child::after { content:'Link copied'; font-size:clamp(12px,1.1vw,20px); } .work-single__content { position:relative; z-index:1; width:100%; margin:8vw auto 0; } .work-single__content > * { margin:0 0 4.4vw; } .work-single__content p { max-width:28ch; color:var(--ahtapot-cream); font-size:clamp(1.35rem,2.1vw,3.95rem); letter-spacing:-.025em; line-height:1.25; } .work-single__content figure { width:100%; } .work-single__content img { display:block; max-width:100%; height:auto; } .work-single__content .wp-block-image img, .work-single__content .wp-block-video video, .work-single__content .wp-block-embed iframe { display:block; width:100%; height:auto; } .work-single__content .wp-block-gallery, .work-single__content .wp-block-columns { gap:1.35vw; } .work-single__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image), .work-single__content .wp-block-column { margin:0; } .work-single__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width:100%; height:auto; object-fit:contain; } .work-single__tentacle { position:absolute; z-index:0; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; pointer-events:none; } .work-archive { min-height:70vh; padding:15.3vw 0 11vw; background:var(--ahtapot-cream); } .work-archive__title { margin:0; color:var(--ahtapot-cyan); font-size:clamp(2.5rem,5vw,9rem); font-weight:400; letter-spacing:-.04em; line-height:1; text-transform:uppercase; } .work-archive__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5vw 4vw; margin-top:7vw; } .work-card__link { display:block; text-decoration:none; } .work-card .work-cover { aspect-ratio:var(--ahtapot-work-cover-ratio); background:#e6d9c5; } .work-card__copy { display:flex; justify-content:space-between; align-items:baseline; gap:2vw; margin-top:1.1vw; color:var(--ahtapot-cyan); } .work-card__copy h2, .work-card__copy p { margin:0; } .work-card__copy h2 { font-size:clamp(1.35rem,2vw,3.6rem); font-weight:400; letter-spacing:-.03em; line-height:1.1; } .work-card__copy p { font-size:clamp(11px,1vw,18px); letter-spacing:.035em; text-transform:uppercase; } .work-archive__empty { margin:7vw 0 0; color:var(--ahtapot-cyan); font-size:clamp(1.2rem,1.6vw,2.8rem); } .work-archive .navigation.pagination { margin-top:6vw; } .work-archive .nav-links { display:flex; gap:1em; } .work-archive .page-numbers { color:var(--ahtapot-cyan); text-decoration:none; }
@media (min-width:701px) and (max-width:1024px) { .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9vw 12%; } .team-card__portrait { width:min(100%,26vw); } .team-card__name { margin-top:2.5vw; } }
@media (max-width: 700px) { :root { --ahtapot-container:86%; } .site-header__inner { padding:24px 0; } .site-logo { width:110px; } .menu-toggle { width:27px; gap:4px; } .hero { height:83vw; min-height:430px; } .hero__pagination { width:68%; } .manifesto { min-height:70vw; padding:18vw 0; background-position:center center; } .manifesto h1 { font-size:clamp(2.6rem,10.7vw,5.1rem); } .brands { padding:15vw 0 9vw; } .brand-grid { grid-template-columns:repeat(2,1fr); gap:10vw 12%; margin:17vw 0 13vw; } .brand-item { height:8vw; } .partners { min-height:42vw; padding:9vw 0; } .partner-grid { width:92%; gap:8%; margin-top:9vw; } .partner-logo { height:9vw; } .featured { padding:12vw 0 16vw; } .featured-carousel { grid-template-columns:10% 1fr 10%; gap:3%; margin:12vw 0 8vw; } .featured-carousel__viewport { aspect-ratio:var(--ahtapot-work-cover-ratio); } .carousel-arrow { width:7vw; height:7vw; } .tentacle-artwork { width:48vw; bottom:-49.4vw; left:-10vw; transform:none; } .brands-page__content { padding:32vw 0 22vw; } .brands-page__intro { display:grid; grid-template-columns:auto 1fr; gap:4vw; } .brands-page__intro > p:last-child { grid-column:1/-1; line-height:1.5; } .brands-page__divider { width:100%; } .brand-grid--directory { margin-top:15vw; row-gap:14vw; } .brand-grid--directory .brand-item { height:11vw; min-height:38px; } .brand-directory--references { margin-top:23vw; } .brands-page__tentacle { width:48vw; bottom:-49.4vw; left:-10vw; transform:none; } .team-page__content { padding:32vw 0 36.2vw; } .team-page__intro { display:grid; grid-template-columns:auto 1fr; gap:4vw; } .team-page__intro > p:last-child { grid-column:1/-1; line-height:1.5; } .team-page__divider { width:100%; } .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14vw 10%; margin-top:16vw; } .team-card__portrait { width:min(100%,34vw); min-width:0; } .team-card__name { margin-top:4vw; font-size:clamp(15px,4.8vw,22px); } .team-card__title { font-size:clamp(12px,3.6vw,17px); } .team-page__tentacle { width:48vw; bottom:-49.4vw; left:-10vw; transform:none; } .services-360-hero { min-height:72vw; padding:26vw 0 8vw; background-position:center center; } .services-360-hero__content { max-width:100%; } .services-360-hero h1 { margin-bottom:7vw; font-size:clamp(4.6rem,21vw,8rem); } .services-360-hero p { max-width:100%; font-size:clamp(12px,3.25vw,16px); line-height:1.3; } .services-360-hero p + p { margin-top:4vw; } .services-360-content { padding:14vw 0 36.2vw; } .services-360-list { gap:17vw; } .service-360-item__icon-circle { width:18vw; min-width:68px; margin-bottom:5vw; } .service-360-item__title { font-size:clamp(1.4rem,6.2vw,2rem); } .service-360-item__description { max-width:100%; margin-top:5vw; font-size:clamp(12px,3.3vw,16px); line-height:1.3; } .services-360-tentacle { width:48vw; bottom:-49.4vw; left:-10vw; transform:none; } .ai-tapot-content { min-height:126vw; padding:17vw 0 13vw; } .ai-tapot-content__logo { width:42vw; min-width:0; } .ai-tapot-content__copy { position:relative; z-index:1; width:100%; margin-top:17vw; font-size:clamp(1.15rem,5.5vw,1.75rem); line-height:1.14; } .ai-tapot-content__copy p + p { margin-top:13vw; } .ai-tapot-content__copy p + p + p { margin-top:7vw; } .ai-tapot-content__artwork { right:-24vw; bottom:-7vw; width:95vw; } .work-single__hero { height:83vw; min-height:430px; } .work-single__surface { padding:16vw 0 24vw; } .work-single__info { display:block; } .work-single__description { font-size:clamp(1rem,4.5vw,1.45rem); } .work-single__brand { font-size:clamp(.9rem,4vw,1.3rem); } .work-share { margin-top:8vw; } .work-single__content { width:100%; margin-top:16vw; } .work-single__content > * { margin-bottom:10vw; } .work-single__content p { max-width:30ch; font-size:clamp(1.25rem,6vw,2rem); line-height:1.3; } .work-single__content .wp-block-gallery, .work-single__content .wp-block-columns { display:block; } .work-single__content .wp-block-gallery figure.wp-block-image, .work-single__content .wp-block-column { margin:0 0 5vw; } .work-single__tentacle { width:48vw; left:-10vw; bottom:-49.4vw; } .work-archive { padding:32vw 0 20vw; } .work-archive__grid { grid-template-columns:1fr; gap:12vw; margin-top:15vw; } .work-card__copy { margin-top:3vw; } .work-card__copy h2 { font-size:clamp(1.4rem,6vw,2rem); } .work-card__copy p { font-size:12px; } .contact { padding:16vw 0 11vw; background-position:center center; } .contact__details { gap:3px; font-size:clamp(1.15rem,5.2vw,2.1rem); } .contact address { margin-top:9vw; } .membership-logos { margin-top:10vw; gap:3vw; } .membership-note { margin:4vw 0 7vw; font-size:12px; line-height:1.45; } .social-links { gap:2vw; } .social-links a { width:31px; height:31px; } }
@media (max-width:700px) { .ai-tapot-content__copy { width:72%; } .ai-tapot-content__artwork { z-index:0; top:auto; right:-42vw; bottom:-5vw; width:66vw; transform:none; } }
.ahtapottan-page { background:var(--ahtapot-cream); } .ahtapottan-page__content { min-height:66vh; padding:15.3vw 0 5.7vw; } .ahtapottan-page__intro { display:flex; align-items:center; gap:1.3vw; } .ahtapottan-page__intro h1 { flex:none; } .ahtapottan-page__intro p { margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.015em; line-height:1.35; } .ahtapottan-page__divider { display:block; width:3vw; height:1px; flex:none; background:#929292; } .ahtapottan-list { margin-top:4.9vw; } .ahtapottan-card { position:relative; display:grid; grid-template-columns:30.5% minmax(0,1fr); gap:2.4vw; min-height:16.7vw; padding:0 0 3.2vw; border-bottom:2px solid var(--ahtapot-cyan); } .ahtapottan-card + .ahtapottan-card { margin-top:3.2vw; } .ahtapottan-card__media { display:block; align-self:start; aspect-ratio:1.53 / 1; overflow:hidden; background:rgba(255,255,255,.58); } .ahtapottan-card__image, .ahtapottan-card__placeholder { display:block; width:100%; height:100%; } .ahtapottan-card__image { object-fit:cover; } .ahtapottan-card__placeholder { background:rgba(255,255,255,.58); } .ahtapottan-card__body { min-width:0; padding-top:.2vw; } .ahtapottan-card__title { margin:0 0 2.3vw; color:var(--ahtapot-cyan); font-size:clamp(1.35rem,1.65vw,3.1rem); font-weight:400; letter-spacing:-.04em; line-height:1.08; } .ahtapottan-card__title a { text-decoration:none; } .ahtapottan-card__title a:hover, .ahtapottan-card__title a:focus-visible { text-decoration:underline; } .ahtapottan-card__date { display:block; margin-bottom:.35vw; color:var(--ahtapot-cyan); font-size:clamp(11px,.95vw,18px); letter-spacing:-.025em; line-height:1.2; } .ahtapottan-card__excerpt { max-width:100%; color:#626262; font-size:clamp(11px,.92vw,17px); letter-spacing:-.025em; line-height:1.25; } .ahtapottan-card__excerpt p { margin:0; } .ahtapottan-card__read-more { position:absolute; right:0; bottom:-2px; padding:.36em .8em .42em; background:var(--ahtapot-cyan); color:var(--ahtapot-cream); font-size:clamp(11px,.95vw,18px); letter-spacing:-.02em; line-height:1.1; text-decoration:none; } .ahtapottan-card__read-more:hover, .ahtapottan-card__read-more:focus-visible { background:var(--ahtapot-cyan-deep); } .ahtapottan-page .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:2em; margin:3vw .25em 0 0; color:var(--ahtapot-cyan); font-size:clamp(12px,1vw,19px); text-decoration:none; } .ahtapottan-page .page-numbers.current { color:#626262; } .ahtapottan-page__empty { margin:7vw 0; color:#626262; font-size:clamp(1rem,1.3vw,1.8rem); }
@media (max-width:700px) { .ahtapottan-page__content { padding:32vw 0 16vw; } .ahtapottan-page__intro { display:grid; grid-template-columns:auto 1fr; gap:4vw; } .ahtapottan-page__intro p { grid-column:1 / -1; line-height:1.5; } .ahtapottan-page__divider { width:100%; } .ahtapottan-list { margin-top:15vw; } .ahtapottan-card { display:block; min-height:0; padding-bottom:12vw; border-bottom-width:1px; } .ahtapottan-card + .ahtapottan-card { margin-top:12vw; } .ahtapottan-card__media { width:100%; } .ahtapottan-card__body { padding-top:6vw; } .ahtapottan-card__title { margin-bottom:5vw; font-size:clamp(1.45rem,6vw,2.15rem); } .ahtapottan-card__date { margin-bottom:2vw; font-size:clamp(12px,3.6vw,16px); } .ahtapottan-card__excerpt { font-size:clamp(12px,3.7vw,16px); line-height:1.38; } .ahtapottan-card__read-more { right:0; bottom:-1px; font-size:clamp(12px,3.6vw,16px); } .ahtapottan-page .page-numbers { margin-top:9vw; } }
.post-single { overflow:hidden; background:var(--ahtapot-cream); } .post-single__article { position:relative; overflow:hidden; padding:7.7vw 0 11vw; } .post-single__shell { position:relative; z-index:1; width:63.5%; max-width:1900px; margin:0 auto; } .post-single__intro { display:flex; align-items:center; gap:1.3vw; } .post-single__intro > p:last-child { margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.015em; line-height:1.35; } .post-single__divider { display:block; width:3vw; height:1px; flex:none; background:#929292; } .post-single__title { max-width:24ch; margin:2.65vw 0 1.35vw; color:var(--ahtapot-cyan); font-size:clamp(2.25rem,3.5vw,6.6rem); font-weight:400; letter-spacing:-.055em; line-height:1.07; } .post-single__date { display:block; margin:0; color:var(--ahtapot-cyan); font-size:clamp(11px,.95vw,18px); font-weight:500; letter-spacing:-.025em; line-height:1.2; } .post-single__excerpt { max-width:88%; margin-top:1.35vw; color:#626262; font-size:clamp(12px,1vw,19px); letter-spacing:-.025em; line-height:1.35; } .post-single__excerpt p { margin:0; } .post-single__featured-image { margin-top:2.35vw; overflow:hidden; border-radius:6px; } .post-single__featured-image-file { display:block; width:100%; height:auto; } .post-single__content { margin-top:2.4vw; color:#626262; font-size:clamp(13px,1vw,19px); letter-spacing:-.025em; line-height:1.43; } .post-single__content > * { margin:0 0 2vw; } .post-single__content p { max-width:100%; } .post-single__content h2, .post-single__content h3, .post-single__content h4 { margin-top:3.1vw; color:var(--ahtapot-cyan); font-weight:400; letter-spacing:-.04em; line-height:1.12; } .post-single__content h2 { font-size:clamp(1.65rem,1.65vw,3.1rem); } .post-single__content h3 { font-size:clamp(1.35rem,1.3vw,2.45rem); } .post-single__content a { color:var(--ahtapot-cyan); } .post-single__content figure { margin-right:0; margin-left:0; } .post-single__content img { display:block; max-width:100%; height:auto; } .post-single__content .wp-block-image img, .post-single__content .wp-block-video video, .post-single__content .wp-block-embed iframe { display:block; width:100%; max-width:100%; height:auto; } .post-single__content .wp-block-gallery, .post-single__content .wp-block-columns { gap:1.35vw; } .post-single__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image), .post-single__content .wp-block-column { margin:0; } .post-single__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width:100%; height:auto; object-fit:cover; } .post-single__content blockquote { position:relative; max-width:86%; margin:3.6vw 0; padding:.25vw 0 .25vw 4.5vw; border-left:2px solid var(--ahtapot-cyan); color:var(--ahtapot-cyan); font-size:clamp(1.15rem,1.3vw,2.45rem); font-style:italic; line-height:1.2; } .post-single__content blockquote::before { content:'“'; position:absolute; top:-.4em; left:.45vw; color:var(--ahtapot-cyan); font-size:4em; font-style:normal; line-height:1; } .post-single__content blockquote p { margin:0; } .post-single__content ul, .post-single__content ol { padding-left:1.3em; } .post-single__content li + li { margin-top:.45em; } .post-single__related { margin-top:4.4vw; padding-top:1.1vw; border-top:2px solid var(--ahtapot-cyan); } .post-single__related-heading { margin:0 0 1.7vw; color:var(--ahtapot-cyan); font-size:clamp(11px,.9vw,17px); font-weight:500; letter-spacing:.02em; line-height:1.2; text-transform:uppercase; } .post-single__related-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4vw; } .post-single__related-card { min-width:0; } .post-single__related-card + .post-single__related-card { border-left:1px solid var(--ahtapot-cyan); padding-left:2.4vw; } .post-single__related-card a { display:grid; grid-template-columns:29% minmax(0,1fr); align-items:start; gap:.8vw; color:inherit; text-decoration:none; } .post-single__related-image, .post-single__related-placeholder { display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; } .post-single__related-placeholder { background:rgba(255,255,255,.58); } .post-single__related-copy { display:flex; flex-direction:column; gap:.7vw; min-width:0; } .post-single__related-title { color:#626262; font-size:clamp(10px,.78vw,15px); font-weight:500; letter-spacing:-.025em; line-height:1.18; } .post-single__related-copy time { color:var(--ahtapot-cyan); font-size:clamp(9px,.7vw,13px); letter-spacing:-.02em; line-height:1.15; } .post-single__related-card a:hover .post-single__related-title, .post-single__related-card a:focus-visible .post-single__related-title { color:var(--ahtapot-cyan); } .post-single__tentacle { position:absolute; z-index:0; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; max-width:none; pointer-events:none; }
@media (max-width:700px) { .post-single__article { padding:25vw 0 22vw; } .post-single__shell { width:86%; } .post-single__intro { display:grid; grid-template-columns:auto 1fr; gap:4vw; } .post-single__intro > p:last-child { grid-column:1 / -1; line-height:1.5; } .post-single__divider { width:100%; } .post-single__title { margin-top:9vw; margin-bottom:5vw; font-size:clamp(2.2rem,9.2vw,3.5rem); } .post-single__date { font-size:clamp(12px,3.6vw,16px); } .post-single__excerpt { max-width:100%; margin-top:5vw; font-size:clamp(13px,3.9vw,17px); line-height:1.42; } .post-single__featured-image { margin-top:7vw; } .post-single__content { margin-top:7vw; font-size:clamp(13px,3.8vw,17px); line-height:1.48; } .post-single__content > * { margin-bottom:7vw; } .post-single__content h2, .post-single__content h3, .post-single__content h4 { margin-top:11vw; } .post-single__content h2 { font-size:clamp(1.6rem,6.4vw,2.25rem); } .post-single__content h3 { font-size:clamp(1.35rem,5.4vw,1.9rem); } .post-single__content .wp-block-columns { display:block; } .post-single__content .wp-block-column { margin-bottom:6vw; } .post-single__content blockquote { max-width:100%; margin:11vw 0; padding-left:14vw; font-size:clamp(1.2rem,5vw,1.8rem); } .post-single__content blockquote::before { left:1vw; } .post-single__related { margin-top:14vw; padding-top:4vw; } .post-single__related-heading { margin-bottom:6vw; } .post-single__related-list { grid-template-columns:1fr; gap:5vw; } .post-single__related-card + .post-single__related-card { border-top:1px solid rgba(0,184,197,.5); border-left:0; padding:5vw 0 0; } .post-single__related-card a { grid-template-columns:24vw minmax(0,1fr); gap:4vw; } .post-single__related-copy { gap:2vw; } .post-single__related-title { font-size:clamp(13px,3.8vw,16px); } .post-single__related-copy time { font-size:clamp(11px,3.2vw,14px); } .post-single__tentacle { width:48vw; bottom:-49.4vw; left:-10vw; } }
.site-header__inner { position:relative; z-index:11; } .site-navigation { isolation:isolate; padding:10.8vw 3.8vw 5vw; overflow:hidden auto; transform:none; clip-path:ellipse(5% 8% at calc(100% - 5.7vw) 6.1vw); transition:clip-path .7s cubic-bezier(.65,0,.35,1), opacity .18s ease, visibility 0s linear .7s; } .site-navigation::before { content:''; position:absolute; z-index:0; top:-20vmax; right:-20vmax; width:40vmax; aspect-ratio:1; border:1px solid rgba(248,237,218,.34); border-radius:44% 56% 52% 48% / 51% 44% 56% 49%; opacity:0; pointer-events:none; transform:scale(.2) rotate(-12deg); transform-origin:65% 35%; transition:opacity .2s ease, transform .7s cubic-bezier(.65,0,.35,1); } .site-navigation.is-open { transform:none; clip-path:ellipse(155% 145% at calc(100% - 5.7vw) 6.1vw); transition:clip-path .7s cubic-bezier(.65,0,.35,1), opacity .18s ease, visibility 0s; } .site-navigation.is-open::before { opacity:.34; transform:scale(1) rotate(0); } .overlay-menu { position:relative; z-index:1; } .overlay-menu a { font-size:clamp(2.35rem,5vw,9.4rem); line-height:1.13; } @media (prefers-reduced-motion:reduce) { .site-navigation { clip-path:none; transition:opacity .01ms linear, visibility 0s linear .01ms; } .site-navigation::before { display:none; } .site-navigation.is-open { transition:opacity .01ms linear, visibility 0s; } }
@media (max-width:700px) { .site-navigation { padding:31vw 7vw 10vw; clip-path:ellipse(9% 6% at calc(100% - 10.5vw) 7.8vw); } .site-navigation.is-open { clip-path:ellipse(165% 150% at calc(100% - 10.5vw) 7.8vw); } .overlay-menu a { font-size:clamp(2.4rem,11.5vw,4.3rem); line-height:1.12; } }

/* Blog listing media retains each source image's complete composition. */
.ahtapottan-card__image { object-fit:contain; object-position:center; }
.post-single__related-media, .post-single__related-placeholder { display:block; width:100%; aspect-ratio:1 / 1; overflow:hidden; background:rgba(255,255,255,.58); }
.post-single__related-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }

/* Brand hover uses a separately uploaded logo, never CSS colorization. */
.brand-grid .brand-item__image { filter:none; }
.brand-grid .brand-item__media { position:relative; display:block; width:100%; height:100%; }
.brand-grid .brand-item__image--default,
.brand-grid .brand-item__image--hover { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; transition:opacity .25s ease; }
.brand-grid .brand-item__image--default { opacity:1; }
.brand-grid .brand-item__image--hover { opacity:0; }
.brand-grid .brand-item:hover .brand-item__image--default,
.brand-grid .brand-item:focus-within .brand-item__image--default { opacity:0; }
.brand-grid .brand-item:hover .brand-item__image--hover,
.brand-grid .brand-item:focus-within .brand-item__image--hover { opacity:1; }

/* Homepage awards heading requires contrast over the water background. */
.partners .eyebrow--muted { color:#fff; }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Requested content-type scale adjustment: retain each responsive scale and add 5px. */
.services-360-hero p { font-size:clamp(17px,calc(1.05vw + 5px),25px); }
.service-360-item__description { font-size:clamp(17px,calc(1.04vw + 5px),25px); }

.ahtapottan-page__intro p { font-size:clamp(17px,calc(1.08vw + 5px),25px); }
.ahtapottan-card__excerpt { font-size:clamp(16px,calc(.92vw + 5px),22px); }

.post-single__excerpt { font-size:clamp(17px,calc(1vw + 5px),24px); }
.post-single__content { font-size:clamp(18px,calc(1vw + 5px),24px); }
.post-single__content blockquote { font-size:clamp(calc(1.15rem + 5px),calc(1.3vw + 5px),calc(2.45rem + 5px)); }
.post-single__related-heading { font-size:clamp(16px,calc(.9vw + 5px),22px); }
.post-single__related-title { font-size:clamp(15px,calc(.78vw + 5px),20px); }
.post-single__related-copy time { font-size:clamp(14px,calc(.7vw + 5px),18px); }

@media (max-width:700px) {
	.services-360-hero p { font-size:clamp(17px,calc(3.25vw + 5px),21px); }
	.service-360-item__description { font-size:clamp(17px,calc(3.3vw + 5px),21px); }
	.ahtapottan-card__excerpt { font-size:clamp(17px,calc(3.7vw + 5px),21px); }
	.post-single__excerpt { font-size:clamp(18px,calc(3.9vw + 5px),22px); }
	.post-single__content { font-size:clamp(18px,calc(3.8vw + 5px),22px); }
	.post-single__content blockquote { font-size:clamp(calc(1.2rem + 5px),calc(5vw + 5px),calc(1.8rem + 5px)); }
	.post-single__related-title { font-size:clamp(18px,calc(3.8vw + 5px),21px); }
	.post-single__related-copy time { font-size:clamp(16px,calc(3.2vw + 5px),19px); }
}

@media (min-width:701px) {
	.services-360-list {
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:8.2vw 6vw;
	}
}

/* Homepage editorial block, deliberately replacing the former manifesto. */
.homepage-news { padding:6.6vw 0 7.1vw; background:var(--ahtapot-cyan) url('../images/home/bg-manifesto.webp') center center / cover no-repeat; color:var(--ahtapot-cream); }
.homepage-news .eyebrow--muted { color:#fff; }
.homepage-news__grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:start; gap:3.6vw; margin-top:4.8vw; }
.homepage-news__card { min-width:0; align-self:start; }
.homepage-news__card > a { display:block; color:inherit; text-decoration:none; }
.homepage-news__secondary-list { display:flex; flex-direction:column; }
.homepage-news__secondary-list .homepage-news__card + .homepage-news__card { margin-top:2.6vw; padding-top:2.6vw; border-top:1px solid rgba(248,237,218,.48); }
.homepage-news__card--secondary > a { display:grid; grid-template-columns:minmax(0,60%) minmax(0,40%); align-items:center; gap:1.4vw; }
.homepage-news__card--secondary .homepage-news__copy { margin-top:0; }
.homepage-news__media { display:block; background:rgba(0,29,49,.24); }
.homepage-news__image { display:block; width:100%; height:auto; }
.homepage-news__placeholder { display:block; width:100%; min-height:16vw; background:rgba(248,237,218,.16); }
.homepage-news__copy { display:block; margin-top:.75vw; }
.homepage-news__title { display:block; max-width:26ch; font-size:clamp(1.2rem,1.4vw,2.6rem); font-weight:400; letter-spacing:-.035em; line-height:1.15; }
.homepage-news__card--primary .homepage-news__title { max-width:25ch; font-size:clamp(1.35rem,1.85vw,3.45rem); line-height:1.11; }
.homepage-news__cue { display:flex; align-items:center; gap:.75em; margin-top:1.55vw; color:rgba(248,237,218,.9); font-size:clamp(.9rem,1vw,1.8rem); line-height:1; transition:gap .25s ease; }
.homepage-news__cue span { display:block; width:2.2em; height:1px; background:currentColor; }
.homepage-news__card--secondary .homepage-news__title { max-width:13ch; font-size:clamp(1rem,1.05vw,1.9rem); line-height:1.12; }
.homepage-news__card--secondary .homepage-news__cue { margin-top:.9vw; font-size:clamp(.75rem,.75vw,1.35rem); }
.homepage-news__card > a:hover .homepage-news__cue, .homepage-news__card > a:focus-visible .homepage-news__cue { gap:1.15em; }
.homepage-news__card > a:focus-visible { outline:2px solid var(--ahtapot-cream); outline-offset:5px; }
.homepage-news__empty { margin:4vw 0 0; font-size:clamp(1rem,1.2vw,1.8rem); }

@media (min-width:900px) and (max-width:1024px) { .homepage-news__grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:3vw; } .homepage-news__card--primary .homepage-news__title { font-size:clamp(1.3rem,2.2vw,2.3rem); } .homepage-news__card--secondary > a { gap:1vw; } .homepage-news__card--secondary .homepage-news__title { font-size:clamp(.9rem,1.1vw,1.1rem); } }
@media (min-width:701px) and (max-width:899px) { .homepage-news__grid { grid-template-columns:1fr; gap:5vw; } .homepage-news__secondary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4vw; } .homepage-news__secondary-list .homepage-news__card + .homepage-news__card { margin:0; padding:0; border:0; } .homepage-news__card--secondary > a { display:block; } .homepage-news__card--secondary .homepage-news__copy { margin-top:1vw; } .homepage-news__card--secondary .homepage-news__title { max-width:100%; } .homepage-news__card--secondary .homepage-news__cue { display:none; } }
@media (max-width:700px) { .homepage-news { padding:17vw 0 18vw; } .homepage-news__grid { grid-template-columns:1fr; gap:11vw; margin-top:11vw; } .homepage-news__secondary-list { display:block; } .homepage-news__secondary-list .homepage-news__card + .homepage-news__card { margin-top:11vw; padding:0; border:0; } .homepage-news__card--secondary > a { display:block; } .homepage-news__copy, .homepage-news__card--secondary .homepage-news__copy { margin-top:3vw; } .homepage-news__title, .homepage-news__card--primary .homepage-news__title, .homepage-news__card--secondary .homepage-news__title { max-width:100%; font-size:clamp(1.35rem,5.6vw,2rem); } .homepage-news__cue, .homepage-news__card--secondary .homepage-news__cue { margin-top:4vw; font-size:clamp(1rem,4vw,1.35rem); } .homepage-news__placeholder { min-height:48vw; } }
.work-footer-prelude { position:relative; height:18.1vw; overflow:hidden; background:var(--ahtapot-cyan); } .work-footer-prelude__tentacle { position:absolute; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; max-width:none; transform:none; pointer-events:none; } @media (max-width:700px) { .work-footer-prelude { height:36.2vw; } .work-footer-prelude__tentacle { width:48vw; bottom:-49.4vw; left:-10vw; transform:none; } }
.contact-page { overflow:hidden; background:var(--ahtapot-cream); } .contact-page__content { position:relative; overflow:hidden; padding:15.3vw 0 11vw; } .contact-page__intro { display:flex; align-items:center; gap:1.3vw; } .contact-page__intro h1 { flex:none; } .contact-page__intro > p:last-child { margin:0; color:#929292; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.015em; line-height:1.35; } .contact-page__divider { display:block; width:3vw; height:1px; flex:none; background:#929292; } .contact-page__grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); grid-template-areas:'work form' 'career map' 'location map'; gap:4.5vw 9%; margin-top:7.8vw; } .contact-page__work { grid-area:work; } .contact-page__form-area { grid-area:form; } .contact-page__career { grid-area:career; } .contact-page__location { grid-area:location; } .contact-page__map { grid-area:map; align-self:start; } .contact-page__work h2, .contact-page__career h2, .contact-page__location h2 { margin:0 0 2.1vw; color:var(--ahtapot-cyan); font-size:clamp(1.9rem,2.15vw,4.05rem); font-weight:400; letter-spacing:-.045em; line-height:1.08; } .contact-page__work p, .contact-page__career p, .contact-page__location dd { max-width:29ch; margin:0; color:#494949; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.025em; line-height:1.4; } .contact-page__work a, .contact-page__career a, .contact-page__location a { color:inherit; text-decoration:none; } .contact-page__work a:hover, .contact-page__work a:focus-visible, .contact-page__career a:hover, .contact-page__career a:focus-visible, .contact-page__location a:hover, .contact-page__location a:focus-visible { color:var(--ahtapot-cyan); text-decoration:underline; } .contact-page__location h2 { margin-bottom:2vw; } .contact-page__location dl { margin:0; } .contact-page__location dl > div + div { margin-top:1.1vw; } .contact-page__location dt, .contact-page__location dd { display:inline; } .contact-page__location dt { color:var(--ahtapot-cyan); font-size:clamp(12px,1.08vw,20px); font-weight:500; letter-spacing:-.025em; } .contact-page__location dt::after { content:' '; } .contact-form__notice { margin:0 0 1.3vw; padding:.7em .9em; border-left:2px solid currentColor; color:var(--ahtapot-cyan); font-size:clamp(12px,1vw,18px); line-height:1.35; } .contact-form__notice--error { color:#a33; } .contact-form p { margin:0 0 1.9vw; } .contact-form label { display:block; color:#858585; font-size:clamp(12px,1.08vw,20px); letter-spacing:-.025em; line-height:1.2; } .contact-form input, .contact-form textarea { display:block; width:100%; margin-top:.6vw; padding:0 0 .55vw; border:0; border-bottom:1px solid var(--ahtapot-cyan); border-radius:0; outline:0; background:transparent; color:#494949; font:inherit; font-size:clamp(12px,1.08vw,20px); line-height:1.25; } .contact-form textarea { min-height:8.6vw; padding:.4vw; border:1px solid var(--ahtapot-cyan); resize:vertical; } .contact-form input:focus, .contact-form textarea:focus { outline:2px solid rgba(0,184,197,.45); outline-offset:3px; } .contact-form__honeypot { position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .contact-form__submit { display:flex; justify-content:flex-end; margin-top:.9vw !important; } .contact-form__submit button { min-width:37%; padding:.65em 1.5em; border:0; background:var(--ahtapot-cyan); color:var(--ahtapot-cream); cursor:pointer; font:inherit; font-size:clamp(12px,1.08vw,20px); line-height:1.2; } .contact-form__submit button:hover, .contact-form__submit button:focus-visible { background:var(--ahtapot-cyan-deep); outline:2px solid var(--ahtapot-cyan-deep); outline-offset:3px; } .contact-page__map { overflow:hidden; aspect-ratio:1.42 / 1; border:1px solid rgba(0,184,197,.55); } .contact-page__map iframe { display:block; width:100%; height:100%; border:0; } .contact-page__tentacle { position:absolute; z-index:0; bottom:-24.7vw; left:-5vw; width:24vw; height:auto; max-width:none; transform:none; pointer-events:none; }
@media (max-width:700px) { .contact-page__content { padding:32vw 0 22vw; } .contact-page__intro { display:grid; grid-template-columns:auto 1fr; gap:4vw; } .contact-page__intro > p:last-child { grid-column:1 / -1; line-height:1.5; } .contact-page__divider { width:100%; } .contact-page__grid { display:flex; flex-direction:column; gap:13vw; margin-top:15vw; } .contact-page__work h2, .contact-page__career h2, .contact-page__location h2 { margin-bottom:6vw; font-size:clamp(1.85rem,8vw,2.7rem); } .contact-page__work p, .contact-page__career p, .contact-page__location dd, .contact-page__location dt { max-width:100%; font-size:clamp(13px,4vw,17px); line-height:1.45; } .contact-page__location dl > div + div { margin-top:4vw; } .contact-form p { margin-bottom:6vw; } .contact-form label { font-size:clamp(13px,4vw,17px); } .contact-form input, .contact-form textarea { margin-top:2vw; padding-bottom:2vw; font-size:clamp(13px,4vw,17px); } .contact-form textarea { min-height:38vw; padding:2vw; } .contact-form__notice { margin-bottom:5vw; font-size:clamp(13px,4vw,17px); } .contact-form__submit { margin-top:4vw !important; } .contact-form__submit button { min-width:42%; font-size:clamp(13px,4vw,17px); } .contact-page__map { width:100%; aspect-ratio:1.28 / 1; } .contact-page__tentacle { width:48vw; bottom:-49.4vw; left:-10vw; } }